/* =========================================================
   MALEA · Portrait tablets — full composition pass
   ---------------------------------------------------------
   Authoritative layer for tablets held vertically: narrow but
   tall canvases (744–1024 wide). Loaded last, so it overrides
   both the phone rules (≤760 — needed for iPad mini at 744px,
   which sits below the mobile breakpoint) and the legacy
   portrait baseline in 05-screens. One coherent design here.

   Devices (portrait CSS px, width × height):
     iPad mini 8.3"    744 × 1133
     iPad 10.2/10.9"   810 × 1080  ·  820 × 1180 (Air)
     iPad Pro 11"      834 × 1194
     iPad Pro 12.9"   1024 × 1366

   Intent: editorial single-column flow for split screens
   (image as a calm full-bleed band, copy inset and breathing),
   two-up grids where the medium reads well at this width
   (videos, musicians, quotes, timeline), generous but
   disciplined vertical rhythm, wider measures than on phone.
   ========================================================= */

@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {

  /* ---- Rhythm & gutters, retuned for a tall portrait canvas ---- */
  :root {
    --page-x:       clamp(48px, 7vw, 88px);
    --vr-standard:  clamp(92px, 11vh, 148px);
    --vr-dense:     clamp(60px, 8vh, 100px);
    --vr-generous:  clamp(116px, 13vh, 176px);
  }

  /* Reclaim section padding from the phone overrides (which set it
     explicitly) so the portrait rhythm above actually applies. */
  .pad-block            { padding-block: var(--vr-standard); }
  .pad-block--dense     { padding-block: var(--vr-dense); }
  .pad-block--generous  { padding-block: var(--vr-generous); }

  .final__media { min-height: clamp(380px, 50vh, 560px); }

  /* ===== 02 · HERO — full-screen stacked composition ===== */
  #hero { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .hero__media { order: -1; min-height: 0; }
  .hero__media::after {
    background: linear-gradient(0deg, var(--bg-deep) 0%, rgba(10,19,38,.82) 8%, rgba(10,19,38,.5) 18%, rgba(10,19,38,.22) 32%, rgba(10,19,38,.06) 46%, transparent 60%);
  }
  .hero__text {
    justify-content: flex-start;
    padding-inline: var(--page-x);
    padding-block: clamp(32px, 4.5vh, 60px) clamp(44px, 7vh, 88px);
  }
  .hero__lede { max-width: 52ch; }

  /* ===== 03 · IDENTITY ================================= */
  .identity__inner {
    grid-template-columns: 1fr;
    gap: clamp(44px, 6vh, 76px);
  }
  .identity__portrait {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
  .identity__body { max-width: none; }

  /* ===== 04 · PHILOSOPHY =============================== */
  /* Stack heading over copy, centred. */
  .philo__inner { grid-template-columns: 1fr; gap: clamp(32px, 4vh, 56px); }
  .philo__heading { white-space: normal; text-align: center; }
  .philo__text p { max-width: 52ch; margin-inline: auto; }

  /* ===== 05 · LIVE ===================================== */
  .live__media { margin-bottom: clamp(36px, 4vh, 60px); }
  .live-text-inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: auto;
    row-gap: clamp(48px, 7vh, 80px);
    align-items: stretch;
  }
  .live-text-line { display: none; grid-column: auto; grid-row: auto; }
  .live-text-left  { grid-column: auto; grid-row: auto; padding-right: 0; text-align: center; }
  .live__text { margin-inline: auto; }
  .live-text-right { grid-column: auto; grid-row: auto; padding-left: 0; }
  /* Formats become a centred 2×2 grid */
  .live-formats-label {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.2vw, 30px);
    letter-spacing: .02em;
    color: var(--ink-soft);
    font-weight: normal;
    margin-bottom: clamp(30px, 3vh, 48px);
  }
  .live-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 40px); }
  .live-format-row { border: none; border-top: 1px solid rgba(216,183,108,.10); padding: clamp(13px, 1.7svh, 19px) 0; }
  .live-format-row:hover { padding-left: 0; }
  .live-text-btn { grid-column: 1 / -1; grid-row: auto; align-self: auto; margin-top: var(--s-6); margin-bottom: 0; text-align: center; }

  /* ===== 06 · QUOTE sections =========================== */
  /* Quotes are not tablet "screens": they sit in the same vertical cadence as
     the rest of the landing sections, with no viewport-height floor. Phone and
     mid-tablet refinement layers loaded later keep their tighter overrides. */
  .quote-screen {
    min-height: 0;
    padding-block: var(--vr-standard);
  }
  .bigquote { max-width: min(90%, 720px); }
  .quote-screen--wide .bigquote { max-width: min(94%, 900px); }
  .bigquote__text {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.24;
    font-weight: 300;
    letter-spacing: .015em;
  }
  .bigquote__attr { margin-top: clamp(16px, 2vh, 24px); letter-spacing: .2em; }
  .bigquote::before {
    content: "";
    display: block;
    width: 52px;
    height: 1px;
    margin: 0 auto clamp(24px, 3vh, 34px);
    background: var(--gold-soft);
  }
  /* Last quote: Portfolio already has a full section bottom rhythm above it,
     Final is image-led below it. Keep the quote in-flow, but make this edge
     transition visually even on the large portrait iPad band. */
  .quote-screen--wide {
    margin-block: 0;
    padding-top: clamp(20px, 2.8vh, 40px);
    padding-bottom: var(--vr-standard);
  }

  /* ===== 07 · PLAYER ================================== */
  /* One stacked column, centred so cards keep a readable width. */
  .players {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-inline: auto;
  }

  /* ===== 08 · PERFORMANCE ============================= */
  .perf__grid { grid-template-columns: 1fr 1fr; }

  /* ===== 09 · ART ===================================== */
  #art { min-height: auto; }
  .art__grid { grid-template-columns: 1fr 1fr; }

  /* ===== 10 · MUSICIANS =============================== */
  /* 3 rows, each card horizontal (photo thumbnail | text). */
  .mus__grid {
    grid-template-columns: 1fr;
    max-width: 760px;           /* tidy centred column; rows stay balanced on wide iPads */
    margin-inline: auto;
    gap: clamp(28px, 3.5vw, 48px);
  }
  .mus__card {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 4vw, 48px);
  }
  .mus__photo {
    width: clamp(180px, 28vw, 260px);
    aspect-ratio: 4/5;          /* brand portrait crop, matches desktop */
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .mus__info { flex: 1; min-width: 0; }
  .mus__name { font-size: clamp(24px, 3vw, 32px); }
  .mus__desc { max-width: 42ch; }

  /* ===== 11 · REVIEWS ================================= */
  .carousel { aspect-ratio: 16 / 10; }
  .rev__quotes {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 48px);
  }

  /* ===== 12 · EGYPT ================================== */
  /* Video spans the full content width — its edges line up with the text/timeline
     below, restoring the rhythm; max-height tames the vertical clip on tall tablets. */
  .egypt__grid { grid-template-columns: 1fr; gap: clamp(44px, 6vh, 72px); align-items: stretch; }
  .egypt__media { width: 100%; max-width: none; margin-inline: 0; }
  .egypt-video-preview { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 62vh; }
  .egypt-video-preview__media { background-position: center 32%; }
  .egypt__body { display: block; }
  .egypt__text { max-width: 64ch; }
  .egypt__concl { margin-top: 0; }

  /* ===== 13 · FORMATS =============================== */
  /* Keep the 2-column image | copy layout, just more compact;
     hide the running numbers and collapse the copy to one column. */
  .fmt__line {
    grid-template-columns: minmax(280px, 48%) minmax(0, 1fr);
    padding: clamp(28px, 3.5vh, 42px) 0;
    column-gap: clamp(24px, 2.5vw, 36px);
  }
  .fmt__line-media { aspect-ratio: 16 / 9; }
  .fmt__line-content { grid-template-columns: 1fr; }
  .fmt__line-num { display: none; }
  .fmt__line-head { margin-bottom: clamp(10px, 1.4vw, 16px); }
  .fmt__line-label { font-size: clamp(22px, 2.4vw, 28px); }
  .fmt__line-summary { margin-bottom: clamp(14px, 1.6vw, 20px); }
  .fmt__line-spec { gap: var(--s-4); padding: var(--s-2) 0; }

  /* ===== 14 · INTEGRATION (fi-panels) ============== */
  /* Panels stack vertically (1 col), but each panel keeps a
     2-column inside: title + tag | description. */
  .fi-panel {
    display: grid;
    grid-template-columns: minmax(280px, 48%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(24px, 2.5vw, 36px);
    row-gap: 0;
    align-items: start;
    padding: clamp(28px, 3.5vh, 40px) clamp(20px, 2.4vw, 32px)
              clamp(32px, 4vh, 48px);
    border-right: none;
    border-bottom: 1px solid var(--gold-line);
  }
  .fi-panel:last-child { border-bottom: none; }
  .fi-title { grid-column: 1; grid-row: 1; margin-bottom: clamp(14px, 1.8vw, 20px); }
  .fi-rule { grid-column: 1; grid-row: 2; display: none; }
  .fi-tag {
    grid-column: 1; grid-row: 2;
    margin-top: 0;
    align-self: start;
    width: max-content;
    max-width: 100%;
    line-height: 1.35;
  }
  .fi-desc { grid-column: 2; grid-row: 1 / 3; align-self: center; }

  /* ===== 15 · WHY ================================== */
  /* Portrait-tablet why styling (2-col args + 52% image band) lives in
     05-screens.css so a single rule governs up to 1100px without conflict. */

  /* ===== 16 · PORTFOLIO =========================== */
  /* Keep all 3 columns on iPad portrait. Tightened locally (padding,
     type, row height) so they fit the wide portrait content width —
     the global --page-x rhythm is left untouched. Collage band stays
     hidden (it's the phone-only fallback). clamp(…vw…) scales the
     compression from iPad mini (744) up to iPad Pro (1024). */
  .pf__media { display: none; }
  .pm-grid { grid-template-columns: 1fr 1fr 1fr; }
  .pm-col {
    border-right: 1px solid var(--gold-line);
    border-bottom: none;
    padding: clamp(22px, 3vh, 32px) clamp(10px, 1.5vw, 18px);
  }
  .pm-col:last-child { border-right: none; }
  .pm-col-header { margin-bottom: clamp(16px, 2vh, 22px); min-height: 38px; }
  .pm-event, .pm-partner, .pm-upcoming { padding: 12px 0; min-height: 56px; }
  .pm-event-name, .pm-partner-name, .pm-upcoming-name {
    font-size: clamp(13px, 1.7vw, 17px);
    letter-spacing: .04em;
    word-break: break-word;
    hyphens: auto;
  }
  .pm-event-type, .pm-partner-role, .pm-upcoming-ctx { font-size: clamp(10px, 1.2vw, 12px); }
  .pm-partner--spacer { display: flex; }  /* re-enable row alignment in 3-col */

  /* ===== 17 · FINAL =============================== */
  #final-experience { grid-template-columns: 1fr; }
  .final__media {
    order: -1;
    min-height: clamp(340px, 46vh, 520px);
  }
  .final__media::after {
    background: linear-gradient(0deg, var(--bg-main) 2%, transparent 56%);
  }
  .final__text {
    padding-inline: var(--page-x);
    padding-block: clamp(56px, 8vh, 96px) clamp(72px, 10vh, 120px);
  }
  .final__body { max-width: 56ch; }
}