/*
 * v21 — La Collezione-only composition corrections.
 *
 * This file is loaded only by la-collezione.html. It intentionally leaves the
 * accepted Ferrari 550 card and the accepted phone-landscape GT3 card alone.
 */

/* Computer layouts ------------------------------------------------------ */
@media (min-width: 1025px) {
  /* The photographer mark is baked into the source at the centre-bottom.
     Mask that small road area without changing the accepted image crop. */
  .collection-page .collection-hero-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 15rem 4.5rem at 50% 95%,
      rgba(5, 5, 5, .99) 0%,
      rgba(5, 5, 5, .96) 38%,
      rgba(5, 5, 5, .72) 56%,
      rgba(5, 5, 5, 0) 76%
    );
  }

  /* Legacy padding and the later responsive margins were accumulating.
     Reset the padding, then position each block once in the actual safe zone. */
  .collection-page .collection-card-gt3 .collection-card-copy,
  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    padding: 0 !important;
  }

  .collection-page .collection-card-gt3 .collection-card-copy {
    align-self: start;
    justify-self: start;
    inline-size: min(62%, 47rem);
    margin: clamp(2.25rem, 5svh, 3.5rem) 0 0 clamp(2rem, 4vw, 3rem);
  }

  .collection-page .collection-card-gt3 h3 {
    font-size: clamp(3.4rem, 4.4vw, 5.25rem);
  }

  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    inline-size: calc(100% - clamp(3rem, 6vw, 5rem));
    margin-block-start: clamp(2rem, 4.5svh, 3rem);
  }

  .collection-page .collection-card-22b .collection-card-copy {
    align-self: start;
    justify-self: start;
    margin-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  }

  .collection-page .collection-card-r34 .collection-card-copy {
    align-self: start;
    justify-self: end;
    margin-block-start: clamp(3.5rem, 6.5svh, 4.25rem);
    margin-inline-end: clamp(1.5rem, 3vw, 2.5rem);
  }

  .collection-page .collection-card-22b h3,
  .collection-page .collection-card-r34 h3 {
    margin-block: .7rem .8rem;
    font-size: clamp(3rem, 3.55vw, 4.35rem);
    line-height: .8;
  }

  .collection-page .collection-card-22b .collection-card-link,
  .collection-page .collection-card-r34 .collection-card-link {
    margin-block-start: 1rem;
  }
}

/* Phone/tablet portrait ------------------------------------------------- */
@media (max-width: 1024px) and (orientation: portrait) {
  .collection-page .collection-card-gt3 .collection-card-copy,
  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    align-self: start;
    padding: 0 !important;
  }

  .collection-page .collection-card-gt3 .collection-card-copy {
    justify-self: start;
    inline-size: min(84vw, 43rem);
    margin: clamp(2.75rem, 7svh, 4rem) 0 0 4vw;
  }

  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    inline-size: calc(100% - 8vw);
    margin-block-start: clamp(2.75rem, 7svh, 4rem);
  }

  .collection-page .collection-card-22b .collection-card-copy {
    justify-self: start;
    margin-inline-start: 4vw;
  }

  .collection-page .collection-card-r34 .collection-card-copy {
    justify-self: end;
    margin-inline-end: 4vw;
  }

  .collection-page .collection-card-22b h3,
  .collection-page .collection-card-r34 h3 {
    margin-block: .65rem 0;
    font-size: clamp(2.4rem, 6.4vw, 4rem);
    line-height: .82;
  }
}

/* Phone portrait needs a card-relative title scale rather than viewport-wide
   desktop sizing, especially on the two half-width story cards. */
@media (max-width: 479px) and (orientation: portrait) {
  .collection-page .collection-card-gt3 .collection-card-copy,
  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    margin-block-start: clamp(2.5rem, 6.5svh, 3.5rem);
  }

  .collection-page .collection-card-22b h3,
  .collection-page .collection-card-r34 h3 {
    font-size: clamp(2.4rem, 10.8vw, 3.25rem);
  }
}

/* Phone/tablet landscape ------------------------------------------------
   GT3 landscape is already approved, so only the two failing story cards are
   changed here. */
@media (max-width: 1024px) and (orientation: landscape) {
  .collection-page .collection-card-22b .collection-card-copy,
  .collection-page .collection-card-r34 .collection-card-copy {
    align-self: start;
    inline-size: calc(100% - 6vw);
    padding: 0 !important;
    margin-block-start: clamp(1.5rem, 6svh, 2.25rem);
  }

  .collection-page .collection-card-22b .collection-card-copy {
    justify-self: start;
    margin-inline-start: 3vw;
  }

  .collection-page .collection-card-r34 .collection-card-copy {
    justify-self: end;
    margin-block-start: clamp(3.25rem, 13svh, 4rem);
    margin-inline-end: 3vw;
  }

  .collection-page .collection-card-22b h3,
  .collection-page .collection-card-r34 h3 {
    margin-block: .55rem 0;
    font-size: clamp(2.3rem, 5vw, 3.3rem);
    line-height: .82;
  }
}