/* styles/sections/release-timeline.css
 * /release-week/: the centred hero, then one white card per release day (day badge and date
 * over the embedded video beside its copy, sides alternating), then the light closing band
 * (cta-band.css on the page field, so its deck keeps ink). One column at 768px and below,
 * the page's own pre-swap query. */
@layer sections {
  /* Before the swap the hero subtitle was 20px at every width: the body-lg
     role's 900px step. */
  .release-week-hero {
    --t-body-lg-size: 20px;

    padding-block: var(--space-96) var(--space-64);
  }

  .release-week-hero .eyebrow {
    margin-bottom: var(--space-16);
  }

  .release-week-hero h1 {
    margin-bottom: var(--space-24);
  }

  .release-week-hero .subtitle {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Day titles were 24px at every width: the h5 role's 900px step (campaign-frame.css). */
  .release-timeline {
    --t-h5-size: 24px;

    padding-block: var(--space-64);
  }

  .release-day {
    margin-bottom: var(--space-48);
    padding: var(--space-32);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--elevation-low);
    transition: box-shadow var(--dur-fast);
  }

  .release-day:last-child {
    margin-bottom: 0;
  }

  .release-day:hover {
    box-shadow: var(--elevation-floating);
  }

  .release-day-header {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-16);
  }

  .release-day-badge {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--fern);
    color: var(--white);
  }

  .release-day-header time {
    font-weight: 400;
  }

  .release-day-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    align-items: start;
  }

  /* Even days put the copy first and the video second. */
  .release-day:nth-child(2n) .release-day-content > .release-video-container {
    order: 1;
  }

  .video-wrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: var(--radius-md);
  }

  .video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .release-info h2 {
    margin-bottom: var(--space-8);
  }

  .release-origin {
    margin-bottom: var(--space-16);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Standalone link: a 44px hit area around its text line, without moving it. */
  .release-origin a {
    position: relative;
  }

  .release-origin a::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 44px;
    transform: translateY(-50%);
  }

  .release-info p {
    margin-bottom: var(--space-8);
    line-height: 1.7;
  }

  .release-info p:last-child {
    margin-bottom: 0;
  }

  .cta-section--light h2 + p {
    color: var(--ink);
  }

  @media (width <= 768px) {
    .release-day-content {
      grid-template-columns: 1fr;
    }

    .release-day:nth-child(2n) .release-day-content > .release-video-container {
      order: 0;
    }
  }
}