/* ==========================================================================
   Petra Pan Film · home.css  (index.html only)
   One screen, no scrolling: background slideshow, intro, films, footer.
   All sizes are in rem, so the whole page scales from one number:
   the html font-size set for wide screens and for phones below.
   ========================================================================== */

:root {
  --side: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.55;
}

/* ---- Background slideshow ----
   The visible still has class "on"; home.js moves it every 5 seconds.
   Crossfade length: transition below. Visible part of the photo: object-position. */
.photo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  animation: settle 2.4s ease-out both;
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0;
  transition: opacity 3s ease-in-out; /* crossfade length */
}
.photo img.on {
  opacity: 1;
}
/* dark veil over the photo, so the text stays readable.
   The last two digits of each colour set its darkness: a6 = 65%, 8c = 55%,
   66 = 40%, 33 = 20%, 1a = 10%. Lower = lighter. Wide screens: see below. */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, #121210a6, #12121066 55%, #12121033),
    linear-gradient(to top, #1212108c, transparent 40%);
}

/* ---- Layout ---- */
.page {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.875rem;
  padding: max(1.75rem, env(safe-area-inset-top)) var(--side) max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
}
.intro {
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  max-width: 40rem;
}
.kicker {
  text-wrap: balance;
}

/* Title. Weight: 200 (light) to 700 (bold); 600 = SemiBold. */
h1 {
  font: 600 5rem/0.9 var(--title-font);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h1 em {
  font-style: normal;
  color: var(--soft);
}

/* Intro text (uses .justified from base.css, with stricter limits) */
.blurb {
  width: 100%;
  max-width: 34rem;
  color: var(--soft);
  text-justify: inter-word;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2; /* Safari: no more than 2 hyphenated lines in a row */
  word-spacing: -0.02em;
}

/* Selected films */
.films-col .label {
  margin-bottom: 0.5rem;
}
.films {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ---- Footer: links, laurels, photo credit ---- */
.foot {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.links,
.laurels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.links {
  gap: 0.375rem 1.375rem;
}
.laurels {
  gap: 0.5rem 0.9rem;
  max-width: 64rem;
}
.laurels img {
  width: 5rem; /* laurel size */
  opacity: 0.82; /* 1 = pure white */
}
.credit {
  font-size: 0.7rem;
  color: var(--faint);
}

/* ==========================================================================
   Wide screens (721px and up): everything aligned left, two columns.
   Left: eyebrow, title, text; the column is exactly as wide as the
   title. Right: selected films, starting level with the eyebrow.
   ========================================================================== */
@media (min-width: 721px) {
  /* between tablet and small-laptop widths the page scales down a little;
     from about 1030px wide it is full size (16px) */
  html {
    font-size: clamp(11px, 1.55vw, 16px);
  }
  :root {
    --edge: 3.5rem; /* same margin on the left and at the bottom */
  }
  /* header lines up with the content's left edge */
  .topbar {
    padding-inline: max(var(--edge), env(safe-area-inset-left)) var(--edge);
  }
  .page {
    align-items: flex-start;
    padding: max(1.75rem, env(safe-area-inset-top)) var(--side) max(var(--edge), env(safe-area-inset-bottom))
      max(var(--edge), env(safe-area-inset-left));
    text-align: left;
  }
  .photo::after {
    background:
      linear-gradient(to right, #121210cc, #1212108c 40%, #12121026 75%, #1212101a),
      linear-gradient(to top, #121210a6, transparent 45%);
  }
  .cols {
    display: grid;
    grid-template-columns: 1fr 1fr; /* both columns the same width */
    justify-items: start;
    gap: 1.125rem 4.5rem;
    width: max-content;
    max-width: 100%;
  }
  /* the intro's children sit directly in the grid (column 1), so the films
     column can start exactly at the eyebrow row */
  .intro {
    display: contents;
  }
  .intro > * {
    grid-column: 1;
  }
  h1 {
    white-space: nowrap;
  }
  /* the text fills the title's width but never widens the column */
  .blurb {
    width: 0;
    min-width: 100%;
    max-width: none;
  }
  /* right column: Selected films, then New & upcoming.
     Left column (eyebrow, title, text) is aligned to the bottom: the first
     row (1fr) takes the extra height, so the text ends level with the lists. */
  .cols {
    grid-template-rows: 1fr auto auto auto;
  }
  .kicker {
    grid-row: 2;
  }
  h1 {
    grid-row: 3;
  }
  .blurb {
    grid-row: 4;
  }
  .films-side {
    grid-column: 2;
    grid-row: 1 / span 4;
    display: grid;
    align-content: start;
    gap: 2.25rem;
  }
  /* long titles wrap instead of widening the columns (same trick as .blurb) */
  .films-new {
    width: 0;
    min-width: 100%;
  }
  .foot {
    justify-items: start;
  }
  .links,
  .laurels {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Phones (720px and narrower): header with menu, content at the top,
   footer at the bottom, rotated slideshow.
   ========================================================================== */
@media (max-width: 720px) {
  :root {
    --side: max(9vw, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  /* one number zooms the content: raise 3.2vw for bigger text, lower for smaller;
     the footer below has its own sizes, so it stays the same */
  html {
    font-size: clamp(10px, min(3.2vw, 1.85svh), 16px);
  }
  .page {
    justify-content: flex-start;
    padding-top: max(7rem, calc(env(safe-area-inset-top) + 5.5rem)); /* room for the header */
  }
  h1 {
    font-size: 4rem;
  }
  .films-col {
    display: none; /* films are in the menu */
  }
  /* eyebrow, title and text aligned left, in line with the header logo */
  .intro {
    justify-items: start;
    text-align: left;
  }
  .blurb {
    hyphenate-limit-chars: 5 2 2;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 2;
    -webkit-hyphenate-limit-lines: 3;
  }

  /* still turned 90° counterclockwise to fill the tall screen
     (laid out sideways, centred, then rotated; -90deg → 90deg for clockwise) */
  .photo img {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    translate: -50% -50%;
    rotate: -90deg;
    object-position: 50% 50%;
  }

  /* footer pushed to the bottom; sizes compensate for the smaller rem */
  .foot {
    margin-top: auto;
    gap: 0.68rem;
  }
  .links {
    flex-wrap: nowrap;
    gap: 0 0.6rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }
  .laurels {
    flex-wrap: nowrap;
    gap: 0 0.34rem;
  }
  .laurels li:not(.key) {
    display: none; /* only laurels marked class="key" show on phones */
  }
  .laurels img {
    width: 3.95rem;
  }
  .credit {
    font-size: 0.79rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo {
    animation: none;
  }
}