/* About page only. Layout specifics; every component comes from components.css. */

/* Hero: let the two headline sentences sit on one line each on wide screens */
.about-hero .page-hero__title { max-width: 13.5em; }

/* 1997 story */
.about-roots .split__media img { object-position: 24% 50%; }
.about-roots .split__copy .t-2 { margin-top: 18px; }
.about-roots .split__copy .body-lg { margin-top: 24px; }
.about-quote { margin: clamp(26px, 3vw, 40px) 0; padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--line-2); }
.about-quote .icon { width: 28px; height: 28px; color: var(--accent); }
.about-quote blockquote { margin: 14px 0 0; }
.about-quote blockquote p { margin: 0; font-family: var(--serif); font-weight: 300; font-size: var(--step-2); line-height: 1.25; letter-spacing: -.012em; color: var(--text); text-wrap: balance; }
.about-quote figcaption { margin-top: 16px; font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.about-roots__note { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--step-1); color: var(--text); }

/* Anthem: one line per span, wrapped lines hang so the verse keeps its shape */
.about-anthem__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.about-anthem__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 40px); }
.about-anthem__head .t-2 { margin-top: 18px; }
.about-anthem__text { grid-column: 6 / span 7; padding-top: .5em; }
.about-anthem__text p > span { display: block; padding-left: .9em; text-indent: -.9em; text-wrap: balance; }
.about-anthem__text .anthem__sign { margin: 1.6em 0 0; }

/* Where we stand */
.about-stand__close { margin: clamp(40px, 5vw, 72px) 0 0; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }

/* Principles: hold three columns until the page stacks, so no feature sits alone on a second row */
@media (min-width: 901px) and (max-width: 1100px) {
  .about-principles .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-principles .feature:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .about-principles .features { grid-template-columns: 1fr; }
  .about-principles .feature:nth-child(2n) { padding-left: 0; border-left: 0; }
}

/* The company */
.about-company__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.about-company__head { grid-column: 1 / span 5; }
.about-company__head .t-2 { margin-top: 18px; }
.about-company__head .body-lg { margin-top: 24px; max-width: 34ch; }
.about-company__facts { grid-column: 7 / span 6; }
.about-company__facts dd { font-family: var(--serif); font-size: var(--step-1); line-height: 1.35; }

/* The family */
.about-family .sec-head__aside p { margin-bottom: 18px; }
.about-family .sec-head__aside .link-arrow { color: var(--text); }
.about-family__label { display: block; margin: 0 0 18px; color: var(--text-2); }
.about-family__label--next { margin-top: clamp(48px, 6vw, 88px); }
.about-family__list .brand-item:hover .brand-item__go { transform: translateX(3px); }

/* Closing band: the italic answer always starts on its own line */
.about-cta { padding-block: clamp(96px, 12vw, 190px); }
.about-cta .cta-band__title .t-1 { margin-top: 18px; }
.about-cta .t-1 em { display: block; color: var(--pear); }

@media (max-width: 900px) {
  .about-anthem__head, .about-anthem__text, .about-company__head, .about-company__facts { grid-column: 1 / -1; }
  .about-anthem__head { position: static; }
  /* Single-column tablet widths: hold body copy near a 60 to 75 character measure */
  .about-principles .sec-head__aside, .about-principles .feature p, .about-family .sec-head__aside { max-width: 60ch; }
}

/* Two-column brand list at tablet widths: "Coming soon" drops under the name instead of squeezing it */
@media (min-width: 641px) and (max-width: 900px) {
  .about-family .brand-item__note { grid-column: 2; grid-row: 2; margin-top: -8px; }
}

/* Wall of the family's real logos (replaces the old orchard photograph) */
.about-brands { margin: 0; }
.about-brands__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.about-brands__grid li { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 17%; background: var(--paper); }
.about-brands__grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.about-brands__type { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.45rem); line-height: 1.15; text-align: center; }

/* Logo wall tiles link to each brand's own website with the shared flip tile */
.about-brands__grid li:has(.about-brands__link) { position: relative; padding: 0; }
.about-brands__link.flip { position: absolute; inset: 0; width: auto; height: auto; }
.about-brands__link .flip__front { background: var(--paper); }
.about-brands__link .flip__front img { max-width: 66%; max-height: 52%; }
.about-brands__link .flip__back { font-size: .72rem; }
.about-brands__link .flip__back small { font-size: .7rem; }