/* Signature-line page (templates/line.php). Store pills, the release-alert form, section heads and "Show all" come
   from shoe-common.css. */

/* ------------------------------------------------------------ hero */
.cd-line-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; padding-top: 56px; align-items: center; }
.cd-line-hero__main { grid-column: span 6; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cd-line-hero--noimg .cd-line-hero__main { grid-column: 1 / -1; }
.cd-line-hero__media { grid-column: span 6; min-width: 0; }
.cd-line-hero__tile { aspect-ratio: auto; height: 440px; border-radius: 24px; }
.cd-line-hero__tile .cd-tile__img { width: 92% !important; }
.cd-line-hero .cd-crumbs ol { font-weight: 700; }
.cd .cd-line-hero .cd-crumbs a { color: var(--cd-accent); display: inline-block; padding: 10px 0; }
.cd-line-hero .cd-crumbs li { display: flex; align-items: center; }
.cd-line-hero .cd-crumbs [aria-current] { color: var(--cd-text-2); }
.cd-line-h1 { text-wrap: balance; line-height: 0.9 !important; }
.cd-line-short { display: none; }

/* ------------------------------------------------------------ the story */
.cd-line-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.cd-line-story > .cd-h2 { grid-column: span 3; }
.cd-line-story__body { grid-column: 4 / span 9; min-width: 0; }
.cd-line-story__text { column-count: 2; column-gap: 48px; font-size: 18px; line-height: 1.65; color: var(--cd-text-2); }
.cd-line-story__text > * { margin: 0 0 18px; }
.cd-line-story__text a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .cd-line-story [data-cd-clamp] { display: block; -webkit-line-clamp: none; overflow: visible; }
  .cd-line-story__more { display: none; }
}

/* ------------------------------------------------------------ buy the current model, coming next */
.cd-line-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cd-line-extras--cur, .cd-line-extras--next { grid-template-columns: minmax(0, 1fr); }
.cd-line-card { background: var(--cd-raised); border: var(--cd-line) solid var(--cd-border); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cd-line-card__head { display: flex; flex-direction: column; gap: 10px; }
.cd-line-card .cd-eyebrow { font-size: 12px; }
.cd-line-card__title { font-family: var(--cd-display); font-weight: 400; font-size: 44px; line-height: 1; text-transform: uppercase; overflow-wrap: break-word; }
.cd .cd-line-card__title a { color: var(--cd-text); text-decoration: underline; text-decoration-color: var(--cd-border-strong); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cd .cd-line-card__title a:hover { color: var(--cd-accent); }
.cd-line-buy__body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.cd .cd-line-buy__body .cd-buy__btn { padding: 0 18px; }
.cd-line-buy__tile { display: block; }
.cd-line-buy__tile .cd-tile { aspect-ratio: auto; height: 190px; border-radius: 14px; }
.cd-line-buy__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 0; }
.cd-line-buy__see { min-height: 52px; }
.cd-line-buy__note { font-size: 15px; color: var(--cd-muted); text-align: center; }
.cd-line-extras--cur .cd-line-buy__body { grid-template-columns: 5fr 6fr; gap: 24px; align-items: center; }
.cd-line-extras--cur .cd-line-buy__tile .cd-tile { height: 260px; }
.cd-line-extras--cur .cd-line-buy__actions { max-width: 520px; }
.cd-line-next__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-line-next__eyebrow { display: flex; align-items: center; gap: 8px; }
.cd-line-next__chips .cd-chip { font-size: 12px; padding: 7px 12px; }
.cd-line-next__teaser { font-size: 17px; line-height: 1.55; color: var(--cd-text-2); }
.cd-line-extras--next .cd-line-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: end; }

/* ------------------------------------------------------------ the history */
.cd-line-models { display: grid; gap: 28px 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cd-line-models--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.cd-line-models--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.cd-line-models--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.cd-line-models--one { grid-template-columns: minmax(0, 1fr); }
.cd .cd-line-model { display: flex; flex-direction: column; gap: 10px; color: var(--cd-text); min-width: 0; }
.cd-line-model__media { position: relative; display: block; }
.cd-line-model__tile { border-radius: 14px; aspect-ratio: 4 / 3; }
.cd-line-models--four .cd-line-model__tile { aspect-ratio: 16 / 10; }
.cd-line-models--three .cd-line-model__tile { aspect-ratio: auto; height: 260px; }
.cd-line-models--two .cd-line-model__tile { aspect-ratio: auto; height: 320px; }
.cd-line-model__tile .cd-tile__img { width: 88% !important; }
.cd-line-model__badge { position: absolute; left: 10px; top: 10px; background: var(--cd-ground); color: var(--cd-accent); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.cd-line-model__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cd-line-model__name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.cd-line-models--two .cd-line-model__name, .cd-line-models--three .cd-line-model__name { font-size: 19px; }
.cd .cd-line-model:hover .cd-line-model__name { color: var(--cd-accent); }
.cd-line-models--one .cd-line-model { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.cd-line-models--one .cd-line-model__media { grid-column: span 6; }
.cd-line-models--one .cd-line-model__tile { aspect-ratio: auto; height: 360px; border-radius: 20px; }
.cd-line-models--one .cd-line-model__text { grid-column: span 6; gap: 12px; }
.cd-line-model__kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cd-muted); }
.cd-line-models--one .cd-line-model__name { font-family: var(--cd-display); font-weight: 400; font-size: 56px; line-height: 1; text-transform: uppercase; }
.cd-line-model__go { font-size: 15px; font-weight: 700; color: var(--cd-accent); }

/* ------------------------------------------------------------ narrower desktops */
@media (min-width: 1100px) and (max-width: 1279px) {
  .cd-line-h1.cd-h1--name1 { font-size: 144px; }
  .cd-line-h1.cd-h1--name2 { font-size: 120px; }
  .cd-line-h1.cd-h1--name3 { font-size: 96px; }
  .cd-line-extras--both .cd-line-buy__body { grid-template-columns: minmax(0, 1fr); }
  .cd-line-card__title { font-size: 38px; }
}
@media (max-width: 1365px) { .cd-line-extras--both .cd-line-buy__body { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1099px) {
  .cd-line-hero { padding-top: 40px; }
  .cd-line-hero__main, .cd-line-hero__media { grid-column: 1 / -1; }
  .cd-line-hero__tile { height: 340px; }
  .cd-line-story { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .cd-line-story > .cd-h2, .cd-line-story__body { grid-column: 1 / -1; }
  .cd-line-extras, .cd-line-extras--next .cd-line-next { grid-template-columns: minmax(0, 1fr); }
  .cd-line-extras--both .cd-line-buy__body { grid-template-columns: 5fr 6fr; }
  .cd-line-models { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd-line-models--four, .cd-line-models--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-line-models--three .cd-line-model__tile { height: 200px; }
  .cd-line-models--two .cd-line-model__tile { height: 260px; }
  .cd-line-models--one .cd-line-model__tile { height: 280px; }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 767px) {
  .cd-line-hero { padding-top: 24px; row-gap: 20px; }
  .cd-line-hero__main { gap: 16px; }
  .cd-line-hero .cd-crumbs ol { font-size: 13px; }
  .cd-line-hero__tile { height: 220px; border-radius: 18px; }
  .cd-line-story__text { column-count: 1; font-size: 17px; }
  .cd-line-story [data-cd-clamp] { display: block; overflow: visible; }
  .cd-line-story [data-cd-clamp] > :not(:first-child) { display: none; }
  .cd-line-story [data-cd-clamp] > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; margin: 0; }
  .cd-line-card { padding: 22px; border-radius: 20px; gap: 16px; }
  .cd-line-card__title { font-size: 32px; }
  .cd-line-buy__body, .cd-line-extras--cur .cd-line-buy__body, .cd-line-extras--both .cd-line-buy__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cd-line-buy__tile .cd-tile, .cd-line-extras--cur .cd-line-buy__tile .cd-tile { height: 180px; }
  .cd-line-next__teaser { font-size: 16px; }
  .cd-line-long { display: none; }
  .cd-line-short { display: inline; }
  .cd-line-models, .cd-line-models--four, .cd-line-models--three, .cd-line-models--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .cd-line-model__tile, .cd-line-models--four .cd-line-model__tile, .cd-line-models--three .cd-line-model__tile, .cd-line-models--two .cd-line-model__tile { aspect-ratio: 16 / 11; height: auto; }
  .cd-line-model__name, .cd-line-models--two .cd-line-model__name, .cd-line-models--three .cd-line-model__name { font-size: 15px; }
  .cd-line-models--one .cd-line-model { display: flex; }
  .cd-line-models--one .cd-line-model__tile { height: 220px; }
  .cd-line-models--one .cd-line-model__name { font-size: 36px; }
  .cd-line-history:has([data-cd-showall]) .is-pmore { display: none; }
}

/* Panels (design B2, Zack 2026-10-18; shared rules in base.css). The story stacks its heading over the text, the buy and
   coming-next cards close up to the panel spacing, and Coming next turns lime like the shoe page's release alert (the
   field and button come from .cd-alert--lime in shoe-common.css). */
.cd .cd-panel.cd-line-story { display: block; }
.cd .cd-panel.cd-line-story .cd-line-story__body { max-width: 880px; }
.cd .cd-line-extras.cd-section { padding-top: 32px; }
.cd .cd-line-next { background: var(--cd-accent); border-color: var(--cd-accent); color: var(--cd-on-accent); }
.cd .cd-line-next .cd-line-card__title a, .cd .cd-line-next .cd-line-next__eyebrow, .cd .cd-line-next .cd-line-next__teaser { color: var(--cd-on-accent); }
.cd .cd-line-next .cd-line-next__teaser { font-weight: 500; }
.cd .cd-line-next .cd-line-card__title a:hover { color: #23262B; }
.cd .cd-line-next .cd-chip { background: var(--cd-on-accent); border-color: var(--cd-on-accent); color: var(--cd-accent); }
@media (max-width: 767px) { .cd .cd-line-extras.cd-section { padding-top: 16px; } }