/* ==========================================================================
   IPL 2018 — page-specific layout.

   Loaded after css/casestudy.css (see $page['css'] in ipl.php) and scoped to
   .ipl-page, so nothing here can reach any other case study. This is the file to
   edit when only the IPL page should change.

   The shared case-study layout indents text into a 776px column 197px from the
   left. This page's design does not: the stats and the opening paragraph both run
   from the container's left edge, and the stats spread across its full width.
   ========================================================================== */

/* Highlights — three equal columns across the container, not a left-offset flex row */
.ipl-page .cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: none;
}

/* Opening paragraph sits at the container edge and reads at lead size */
.ipl-page .cs-intro .cs-column {
  max-width: 1000px;
  margin:0 auto;
}
.ipl-page .cs-intro .cs-body.is-white {
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.6;
}
/* Used in the intro and again in the closing section */
.ipl-page .cs-body .is-underlined {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Source note under the paragraph */
.ipl-page .cs-credit {
  margin: 46px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   The Challenge — two unequal panels
   Widths 1 : 1.9, and each panel keeps its own aspect ratio, which is what makes
   them finish level without either being cropped.
   -------------------------------------------------------------------------- */
.ipl-page .ipl-challenge {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ipl-page .ipl-player-panel {
  flex: 1;
  margin: 0;
  overflow: hidden;
  /* 0.805 pairs with the line-up's natural 820/536 so both columns end level */
  aspect-ratio: 161 / 200;
  background: linear-gradient(158deg, #ff8f34 0%, #ff6b00 46%, #ef5a00 100%);
}
.ipl-page .ipl-player-panel img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: the cut-out must not lose the nameplate or his head */
  object-fit: contain;
  object-position: 50% 100%;
}
.ipl-page .ipl-challenge .cs-collage-item {
  flex: 1.9;
}

/* --------------------------------------------------------------------------
   Palette — two half panels with the third laid across their seam
   -------------------------------------------------------------------------- */
/* Measured off the reference, which is 1447 x 622. Everything is expressed as a
   share of the palette's own width (cqw) rather than in px or vw, so the whole block
   scales as one piece and holds those proportions at any container width:

     panel pair   1447 x 622            -> aspect-ratio 1447 / 622
     padding      38 / 1447             -> 2.63cqw
     name         29px                  -> 2.00cqw
     hex          20px                  -> 1.38cqw
     spec text    17px                  -> 1.18cqw
     spec rows    53px baseline-to-base -> 1.18 x 1.2 line + 2.24cqw gap
     label column 110px                 -> 7.60cqw
     overlay      x 497..946, y 235..bottom
                  -> left 34.35%, width 31.03%, top 37.78%, bottom 0 */
.ipl-page .ipl-palette {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1447 / 622;
}
.ipl-page .ipl-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.63cqw;
  color: var(--white);
}
/* The right panel's text starts at x=1082 in the reference, not at its own left edge
   — it is pushed across to clear the overlay panel, which would otherwise cover it.
   24.8cqw measured from the palette's left edge, minus the 50% the panel already
   starts at, is the inset needed. */
.ipl-page .ipl-swatch:nth-child(2) {
  padding-left: 24.8cqw;
}
/* The third panel leaves the grid flow and lies across the seam, meeting the bottom
   edge — which is what puts all three spec blocks on the same line. */
.ipl-page .ipl-swatch--over {
  position: absolute;
  left: 34.35%;
  top: 37.78%;
  width: 31.03%;
  bottom: 0;
  height: auto;
  z-index: 2;
}
.ipl-page .ipl-swatch-name {
  margin: 0;
  font-size: 2cqw;
  line-height: 1.2;
  font-weight: 600;
}
.ipl-page .ipl-swatch-hex {
  margin: 1.1cqw 0 0;
  font-size: 1.38cqw;
  line-height: 1.3;
  font-weight: 400;
}
/* Spec rows pinned to the bottom of each panel */
.ipl-page .ipl-swatch-spec {
  margin: auto 0 0;
  display: grid;
  gap: 2.24cqw;
  font-size: 1.18cqw;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.ipl-page .ipl-swatch-spec > div {
  display: grid;
  grid-template-columns: 7.6cqw 1fr;
  align-items: baseline;
}
.ipl-page .ipl-swatch-spec dt,
.ipl-page .ipl-swatch-spec dd {
  margin: 0;
}
.ipl-page .ipl-swatch-spec dd {
  font-variant-numeric: tabular-nums;
}

/* Two square match creatives side by side under the full-width banner */
.ipl-page .ipl-creatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   Type specimen
   The lettering is white/transparent artwork drawn for a dark ground, so the panel
   supplies that ground. Sized in cqw against the panel's own width so the three
   SUPERSTAR lines stay locked to each other at any width.
   -------------------------------------------------------------------------- */
/* Sits in the text column, not full width, and on the page's own background —
   there is no panel behind it in the design. */
.ipl-page .ipl-type {
  container-type: inline-size;
  max-width: 776px;
  margin-left: 197px;
}
/* The three lines are tight against each other, separated by hairline rules at each
   cap-height and baseline — four rules for three rows, hence one on the container
   and one under each image. */
.ipl-page .ipl-type-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ipl-page .ipl-type-stack img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.ipl-page .ipl-type-row {
  display: flex;
  align-items: flex-start;
  gap: 11cqw;
  margin-top: 11cqw;
}
.ipl-page .ipl-type-spartan {
  display: block;
  width: 45cqw;
  height: auto;
}
.ipl-page .ipl-type-alphabet {
  display: block;
  width: 42cqw;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .ipl-page .ipl-type {
    padding: 22px 18px 26px;
  }
  .ipl-page .ipl-type-row {
    gap: 22px;
    margin-top: 30px;
  }
  .ipl-page .ipl-type {
    max-width: none;
    margin-left: 0;
  }
  .ipl-page .ipl-type-row {
    gap: 20px;
    margin-top: 30px;
  }
  .ipl-page .ipl-type-spartan { width: 44%; }
  .ipl-page .ipl-type-alphabet { width: 42%; }
  .ipl-page .ipl-creatives { gap: 10px; }

  /* Both layouts stack: side-by-side panels and an overlapping card are unusable
     at phone width. */
  .ipl-page .ipl-challenge {
    display: block;
  }
  .ipl-page .ipl-player-panel {
    aspect-ratio: 4 / 5;
    margin-bottom: 12px;
  }
  /* Phone: the overlap and the cqw sizing both stop making sense at this width, so
     the panels simply stack at fixed sizes. */
  .ipl-page .ipl-palette {
    display: block;
    aspect-ratio: auto;
  }
  .ipl-page .ipl-swatch {
    min-height: 230px;
    padding: 26px 22px 24px;
  }
  .ipl-page .ipl-swatch--over {
    position: static;
    width: auto;
    height: auto;
    bottom: auto;
  }
  .ipl-page .ipl-swatch-name { font-size: 21px; }
  .ipl-page .ipl-swatch-hex  { font-size: 15px; margin-top: 10px; }
  .ipl-page .ipl-swatch-spec { font-size: 13px; gap: 12px; }
  .ipl-page .ipl-swatch-spec > div { grid-template-columns: 5.6em 1fr; }

  .ipl-page .cs-stats {
    /* One per row on a phone — three columns would crush the labels, which are
       nowrap so they would overflow rather than wrap. */
    grid-template-columns: 1fr;
    gap: 29px;
    margin-top: 74px;
    text-align: center;
  }
  .ipl-page .cs-intro .cs-column {
    max-width: none;
  }
  .ipl-page .cs-intro .cs-body.is-white {
    font-size: 19px;
    line-height: 1.55;
  }
  .ipl-page .cs-credit {
    margin-top: 30px;
    font-size: 14px;
  }
}