/* PACK09I: reusable professional visual system for public commercial pages. */
:root {
  --type-display: clamp(3rem, 5vw, 5.5rem);
  --type-h1: clamp(2.75rem, 4vw, 4.5rem);
  --type-h2: clamp(2rem, 3vw, 3.25rem);
  --type-h3: clamp(1.4rem, 1.8vw, 2rem);
  --type-h4: clamp(1.08rem, 1.25vw, 1.35rem);
  --type-body-large: clamp(1.05rem, 1.2vw, 1.2rem);
  --type-body: 1rem;
  --type-small: .82rem;
  --type-eyebrow: .72rem;
  --type-navigation: .75rem;
  --type-button: .74rem;
  --space-section-commercial: clamp(3.5rem, 5.2vw, 5.75rem);
  --space-hero-commercial: clamp(3.25rem, 4.5vw, 4.75rem);
  --space-card: clamp(1.25rem, 2.4vw, 2rem);
  --measure-body: 68ch;
}

body:not(.page--home):not(.page--admin) {
  font-size: var(--type-body);
}

body:not(.page--home):not(.page--admin) main h1 {
  max-width: 16ch;
  font-size: var(--type-h1);
  line-height: 1.04;
  letter-spacing: -.04em;
}

body:not(.page--home):not(.page--admin) main h2 {
  font-size: var(--type-h2);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body:not(.page--home):not(.page--admin) main h3 {
  font-size: var(--type-h3);
  line-height: 1.15;
  letter-spacing: -.025em;
}

body:not(.page--home):not(.page--admin) main h4 {
  font-size: var(--type-h4);
  line-height: 1.2;
}

body:not(.page--home):not(.page--admin) :is(.section, .rubber-section) {
  padding-block: var(--space-section-commercial);
}

body:not(.page--home):not(.page--admin) :is(.section--compact, .rubber-final-cta) {
  padding-top: 0;
}

body:not(.page--home):not(.page--admin) :is(.lede, .rubber-lede) {
  max-width: var(--measure-body);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

body:not(.page--admin) :is(.eyebrow, .rubber-kicker) {
  font-size: var(--type-eyebrow);
  line-height: 1.35;
  letter-spacing: .14em;
}

body:not(.page--admin) .button {
  min-height: 44px;
  padding: .72rem 1.2rem;
  font-size: var(--type-button);
  letter-spacing: .075em;
}

body:not(.page--admin) .button--small {
  min-height: 44px;
  padding-inline: 1rem;
}

body:not(.page--admin) .theme-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

body:not(.page--admin) :is(.rubber-text-link, .text-link) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: .9rem;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

/* Keep the approved PACK09G-C homepage cinematic scale. The division hero is commercial. */
.page--rubber:not(.page--home) .rubber-hero h1 {
  max-width: 13ch;
  font-size: var(--type-display);
}

.page-hero,
.error-page,
.rubber-page-hero,
.rubber-product-hero,
.finished-rubber-hero,
.finished-detail-hero {
  padding-block: var(--space-hero-commercial);
}

.page-hero h1,
.error-page h1,
.rubber-page-hero h1,
.rubber-product-hero h1,
.finished-rubber-hero h1,
.finished-detail-hero__copy h1 {
  max-width: 16ch;
  font-size: var(--type-h1);
}

.rubber-page-hero__grid,
.rubber-product-hero__grid {
  gap: clamp(2rem, 5vw, 5rem);
}

/* Natural Rubber catalogue: image-led role card, never an empty stretched panel. */
.rubber-page-hero__visual,
.rubber-product-hero__media {
  position: relative;
  height: clamp(21rem, 31vw, 28rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rubber-line);
  border-radius: .85rem;
  background: #18211e;
  box-shadow: var(--shadow);
}

.rubber-page-hero__visual > .rubber-image,
.rubber-product-hero__media > .rubber-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rubber-page-hero__visual img,
.rubber-product-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rubber-page-hero__visual img {
  object-position: 58% center;
}

.rubber-page-hero__visual figcaption,
.rubber-product-hero__media figcaption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(4rem, 9vw, 6.5rem) var(--space-card) var(--space-card);
  background: linear-gradient(180deg, transparent, rgba(7, 12, 10, .93) 58%);
  color: #f4f0e8;
}

.rubber-page-hero__visual figcaption span,
.rubber-product-hero__media figcaption span {
  display: block;
  color: #e7b17b;
  font-size: var(--type-eyebrow);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rubber-page-hero__visual figcaption strong,
.rubber-product-hero__media figcaption strong {
  display: block;
  margin-top: .35rem;
  font: 400 var(--type-h3)/1.15 var(--font-display);
}

.rubber-page-hero__visual figcaption p,
.rubber-product-hero__media figcaption p {
  max-width: 43ch;
  margin: .4rem 0 0;
  color: #d7ded7;
  font-size: var(--type-small);
  line-height: 1.5;
}

.rubber-product-hero__image {
  min-height: 0;
}

/* Compact commercial cards use the H3 tier, not display typography. */
body:not(.page--home):not(.page--admin) :is(
  .rubber-product-panel,
  .rubber-catalogue-card,
  .rubber-catalogue__note,
  .note-card,
  .contact-card,
  .finished-rubber-card,
  .finished-rubber-family,
  .finished-detail-overview,
  .finished-detail-related,
  .market-empty
) :is(h2, h3) {
  max-width: 24ch;
  font-size: var(--type-h3);
}

body:not(.page--home):not(.page--admin) :is(.rubber-audience-card, .rubber-heading, .finished-rubber-section-heading) h2,
body:not(.page--home):not(.page--admin) .rubber-audience-card h3 {
  font-size: var(--type-h2);
}

.rubber-catalogue-card__body,
.finished-rubber-card__body,
.finished-rubber-family__content,
.note-card,
.contact-card {
  padding: var(--space-card);
}

.finished-rubber-family > summary h3 {
  max-width: none;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

/* Rubber section navigation is distinct from the global header but fully legible. */
.rubber-navigation {
  min-height: 4rem;
  font-size: var(--type-navigation);
  letter-spacing: .06em;
}

.rubber-navigation__links {
  width: 100%;
  gap: clamp(.8rem, 1.5vw, 1.4rem);
}

.rubber-navigation a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.rubber-navigation a[aria-current='page'] {
  border-bottom-color: var(--amber);
  color: var(--rubber-accent-bright);
}

.rubber-navigation a:hover,
.rubber-navigation a:focus-visible {
  border-bottom-color: var(--rubber-accent);
}

@media (max-width: 58rem) {
  .rubber-navigation {
    display: block;
    min-height: auto;
    padding-block: .45rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .rubber-navigation__links {
    display: flex;
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .rubber-page-hero__visual,
  .rubber-product-hero__media {
    order: -1;
    width: min(42rem, 100%);
    height: clamp(19rem, 52vw, 24rem);
  }
}

@media (max-width: 47rem) {
  :root {
    --type-h1: clamp(2.4rem, 10.5vw, 2.8rem);
    --type-h2: clamp(1.8rem, 7vw, 2.25rem);
    --space-section-commercial: clamp(3rem, 13vw, 4rem);
    --space-hero-commercial: clamp(2.5rem, 10vw, 3.25rem);
  }

  .rubber-page-hero,
  .rubber-product-hero,
  .finished-rubber-hero,
  .finished-detail-hero {
    padding-block: var(--space-hero-commercial);
  }

  .rubber-page-hero__grid,
  .rubber-product-hero__grid {
    gap: 1.5rem;
  }

  .rubber-page-hero__visual,
  .rubber-product-hero__media {
    height: 16rem;
  }

  .rubber-page-hero__visual figcaption,
  .rubber-product-hero__media figcaption {
    padding: 3.8rem 1.1rem 1rem;
  }

  .rubber-page-hero__visual figcaption p,
  .rubber-product-hero__media figcaption p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rubber-navigation a,
  body:not(.page--admin) .button,
  body:not(.page--admin) :is(.rubber-text-link, .text-link) {
    transition: none;
  }
}