/*
 * v24 — Porsche 997 GT3 presentation only
 *
 * Keeps the accepted v23 feature-page treatment, restores every portrait
 * photo to its natural frame, and makes the GT3 cards on the homepage and
 * La Collezione use the photograph itself instead of a detached caption band.
 */

.feature-gt3 .feature-hero-content {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
}

.feature-gt3 .feature-hero-content > .kicker,
.feature-gt3 .feature-hero-content > h1 {
  inline-size: min(52vw, 49rem) !important;
}

.feature-gt3 .feature-hero-note {
  order: -1;
  align-self: flex-start;
  inline-size: min(40vw, 38rem) !important;
  margin: 0 0 clamp(.9rem, 1.8svh, 1.5rem) !important;
  text-align: left;
}

.feature-gt3 .feature-hero-note p {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .92);
}

.feature-gt3 .feature-hero-content > .kicker,
.feature-gt3 .feature-hero h1 {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .78);
}

.feature-gt3 .feature-hero-shade {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .46) 25%, transparent 52%),
    linear-gradient(90deg, rgba(0, 0, 0, .48) 0%, transparent 48%),
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 38%);
}

.feature-gt3 .story-closing-media {
  margin: 0;
}

/* The GT3 editorial comment follows the same desktop rule as the other cars.
   Supporting comments remain hidden at mobile sizes where all four are hidden. */
@media (min-width: 1025px) {
  .home-page .access-gt3 .panel-copy > p:not(.kicker),
  .collection-page .collection-card-gt3 .collection-card-copy > p:not(.kicker) {
    display: block !important;
  }
}

/* Width-led story panels preserve the complete portrait source on mobile. */
@media (max-width: 1024px) {
  .feature-gt3 .feature-hero-content {
    padding-block-end: clamp(1.35rem, 4svh, 2.5rem) !important;
  }

  .feature-gt3 .feature-hero-content > .kicker,
  .feature-gt3 .feature-hero-content > h1,
  .feature-gt3 .feature-hero-note {
    inline-size: min(88vw, 39rem) !important;
  }

  .feature-gt3 .story-full.rear,
  .feature-gt3 .story-full.motion {
    block-size: auto !important;
    min-block-size: 0 !important;
    aspect-ratio: 3 / 4;
  }

  .feature-gt3 .story-full.rear > img,
  .feature-gt3 .story-full.motion > img {
    object-position: center !important;
  }

  .feature-gt3 .story-full.rear .story-full-copy,
  .feature-gt3 .story-full.motion .story-full-copy {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 0 clamp(1.35rem, 5vw, 2.75rem) !important;
    text-align: left;
  }

  .feature-gt3 .story-full.rear .story-full-copy > *,
  .feature-gt3 .story-full.motion .story-full-copy > * {
    inline-size: min(84vw, 34rem) !important;
  }

  .feature-gt3 .story-full.rear .story-full-shade,
  .feature-gt3 .story-full.motion .story-full-shade {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 25%, transparent 52%),
      linear-gradient(90deg, rgba(0, 0, 0, .38) 0%, transparent 52%);
  }
}

/* Restore complete portrait frames on short phone/tablet landscape screens. */
@media (max-width: 1024px) and (orientation: landscape) {
  .feature-gt3 .feature-hero-media img {
    object-position: 50% 70% !important;
  }

  .feature-gt3 .feature-hero-note {
    display: block;
  }

  .feature-gt3 .feature-hero-note span {
    display: none;
  }

  .feature-gt3 .feature-hero-content > .kicker,
  .feature-gt3 .feature-hero-content > h1 {
    inline-size: min(64vw, 34rem) !important;
  }

  .feature-gt3 .feature-hero-note {
    inline-size: min(54vw, 25rem) !important;
  }

  .feature-gt3 .story-duo figure:first-child,
  .feature-gt3 .story-duo figure:last-child {
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: auto;
  }

  .feature-gt3 .story-duo img {
    block-size: auto;
    min-block-size: 0;
    object-fit: contain;
  }

  .feature-gt3 .story-full.rear .story-full-copy,
  .feature-gt3 .story-full.motion .story-full-copy {
    padding-block-end: clamp(11rem, 31vw, 16.5rem) !important;
  }

  /* The road below the cars is the intended caption area. */
  .home-page .access-gt3 .panel-copy {
    margin: 0 0 clamp(.65rem, 1.5vw, 1rem) var(--edge) !important;
  }
}

/* Both GT3 photo pairs are native 3:4 portraits. The legacy 4:3 phone frame
   clipped roughly 44% from their lower halves; reserve the natural ratio so
   lazy-loaded images never collapse before entering the viewport. */
@media (max-width: 640px) and (orientation: portrait) {
  .feature-gt3 .story-duo figure:first-child,
  .feature-gt3 .story-duo figure:last-child {
    block-size: auto !important;
    min-block-size: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }

  .feature-gt3 .story-duo img {
    display: block;
    inline-size: 100%;
    block-size: 100% !important;
    min-block-size: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* Phone portrait: all GT3 card layers share one grid cell. This removes the
   detached black caption row and its Android-visible one-pixel seam. */
@media (max-width: 760px) and (orientation: portrait) {
  .home-page .access-gt3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) !important;
    border-block-end: 0;
  }

  .home-page .access-gt3 > img,
  .home-page .access-gt3 > .panel-shade,
  .home-page .access-gt3 > .panel-index,
  .home-page .access-gt3 > .panel-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .home-page .access-gt3 > img {
    position: static !important;
    inset: auto !important;
    align-self: stretch;
    inline-size: 100%;
    block-size: 100% !important;
    min-block-size: 0;
    object-fit: cover;
    object-position: 50% 58% !important;
  }

  .home-page .access-gt3 .panel-shade {
    position: static !important;
    inset: auto !important;
    align-self: stretch;
    inline-size: 100%;
    block-size: auto !important;
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .34) 28%, transparent 55%),
      linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, transparent 52%);
  }

  .home-page .access-gt3 .panel-copy {
    position: static !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: start !important;
    inline-size: 90vw !important;
    margin: 0 0 clamp(.9rem, 4vw, 1.25rem) 5vw !important;
    padding: 0 !important;
  }

  .collection-page .collection-card-gt3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    border: 0;
  }

  .collection-page .collection-card-gt3 > * {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .collection-page .collection-card-gt3 .collection-card-media,
  .collection-page .collection-card-gt3 .collection-card-media img {
    position: static !important;
    inset: auto !important;
    align-self: stretch;
    inline-size: 100%;
    block-size: 100% !important;
    min-block-size: 0;
  }

  .collection-page .collection-card-gt3 .collection-card-media img {
    object-fit: cover;
    object-position: 50% 58% !important;
  }

  .collection-page .collection-card-gt3 .collection-card-shade {
    display: block;
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .38) 30%, transparent 58%),
      linear-gradient(90deg, rgba(0, 0, 0, .38) 0%, transparent 58%);
  }

  .collection-page .collection-card-gt3 .collection-card-copy {
    position: static !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: start !important;
    inline-size: min(84vw, 43rem);
    margin: 0 0 clamp(.9rem, 4vw, 1.25rem) 4vw !important;
    padding: 0 !important;
    background: transparent;
  }
}

@media (max-width: 479px) {
  .feature-gt3 .feature-hero-content > .kicker,
  .feature-gt3 .feature-hero-content > h1,
  .feature-gt3 .feature-hero-note {
    inline-size: 90vw !important;
  }

  .feature-gt3 .feature-hero h1 {
    font-size: clamp(2.45rem, 10.8vw, 3.35rem);
  }

  .feature-gt3 .story-full.rear .story-full-copy > *,
  .feature-gt3 .story-full.motion .story-full-copy > * {
    inline-size: 84vw !important;
  }

  .feature-gt3 .story-full.rear .story-full-copy h2,
  .feature-gt3 .story-full.motion .story-full-copy h2 {
    font-size: clamp(2.25rem, 10.2vw, 3.25rem);
  }
}