/* ============================================================
   Round 8 — actor page rework (apX classes)
   New layout for individual /VA/{XX}.html pages.

   Round 12 updates:
     • Actor portrait + shortbio overlay REMOVED from face area.
     • Long bio moved into col1+col2; bio2.jpg sits bottom-right.
     • Voice profile moves to col3 below the player.
     • Player main demo column 2 shows a poster image (1st-frame thumb).
     • Play-All long oval changed to a rounded-corner button.
   ============================================================ */

.apX-wrap {
    /* Bridge between the existing .main-row-content (face area) and the
       new bio/player/longbio block below it. We keep the padding scheme
       consistent with the rest of the actor template. */
    margin-top: 6px;
}

/* ----- 3-column row (bio1 | video | player) ----- */
.apX-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;   /* col3 a touch wider for the player */
    gap: 22px;
    align-items: stretch;
    padding: 24px 24px 8px;
    background: #fff;
}
.apX-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.apX-col__top {
    /* The "top" item of a column (bio1 image, video widget, or player). */
    width: 100%;
    margin-bottom: 14px;
}
.apX-bio1 {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20,30,60,.12);
    display: block;
}

/* shortBio area (Round 12: REMOVED — kept rule with display:none so that
   any older markup on the page is hidden silently). */
.apX-shortbio {
    display: none !important;
}

/* Round 20: player auto-sizes to its content. Previously the player span
   was fixed via grid-row: 1/3 which left blank space when an actor's
   demo list was short. Now the player only spans grid row 1 (top half)
   and the voice-profile (.apX-vp via .apX-vp-row) sits BELOW it in row 2,
   right next to the longbio that occupies cols 1-2 row 2. */
.apX-player {
    grid-column: 3 / 4;
    grid-row: 1 / 2;            /* was 1/3 — now only row 1 */
    align-self: start;
}
.apX-player .demo-player {
    width: 100%;
    height: auto;
    min-height: 0;
}

/* ----- Long bio area ---------------------------------------------------
   Round 12: longBio is now placed INSIDE the 3-col row, spanning col1+col2
   (under the bio1 image and the video). The bio2.jpg image is floated to
   the bottom-right corner of the long bio body. The player keeps col3 by
   spanning rows 1-3 (we just expanded its row span).
*/
.apX-longbio {
    grid-column: 1 / 3;        /* span the 2 left columns */
    padding: 18px 22px 22px;
    background: #fff;
    border-left: 4px solid var(--actor-color, #0e4ccc);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #2a3245;
    margin-top: 6px;
}
.apX-longbio h2 {
    margin: 0 0 10px;
    color: var(--actor-color, #0e4ccc);
    font-size: 1.4rem;
}
.apX-longbio__body {
    /* Allow bio2 to be floated inside this paragraph block */
    overflow: hidden;          /* contain the float */
    position: relative;
}
.apX-bio2 {
    /* Round 12: bio2 sits in the bottom-right corner of the long bio area.
       We use shape-outside not being needed; instead, the image is floated
       right with margin-top large enough to push it down (so the prose
       text wraps along the LEFT side of the image). For a true bottom-
       right anchor, we use float:right and let prose wrap. */
    float: right;
    width: 240px;
    max-width: 42%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    margin: 8px 0 0 22px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20,30,60,.16);
    /* shape-outside lets the text hug the left side, treating the image
       as if it lives in the corner. */
    shape-outside: margin-box;
}
@media (max-width: 760px) {
    .apX-bio2 {
        float: none;
        display: block;
        width: 100%;
        max-width: 360px;
        margin: 14px auto 4px;
    }
}

/* ----- Voice profile (Round 12: lives inside the apX-row, col3, ROW 2,
   right under the player) -----
   Implementation: we expand the player to span row 1 only and the .apX-vp
   sits in row 2 of col3. But it's simpler to keep the player at row 1/3
   span and append the voice-profile after the longbio in the markup, so
   we use the dedicated .apX-vp-row container that follows .apX-row. To
   keep voice-profile under col3, the row uses the same grid template
   and we place .apX-vp in column 3.
*/
.apX-vp-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;   /* same proportions as apX-row */
    gap: 22px;
    padding: 8px 24px 24px;
    background: #fff;
}
.apX-vp {
    grid-column: 3 / 4;     /* under the player column */
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: -8px;
}

/* Round 20: when JS moves the voice-profile INTO .apX-row (col3, row 2),
   it sits directly under the player and beside the longbio. */
.apX-row > .apX-vp {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    align-self: start;
    margin-top: 14px;
}
/* When JS has moved the .apX-vp out, hide the now-empty placeholder row. */
.apX-vp-row.is-emptied { display: none; }
.apX-vp h3 {
    margin: 0 0 8px;
    color: var(--actor-color, #0e4ccc);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.apX-vp dl {
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
    font-size: 0.86rem;
}
.apX-vp dt {
    font-weight: 700;
    color: #4a5168;
}
.apX-vp dd {
    margin: 0;
    color: #2a3245;
}
.apX-vp ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #2a3245;
}
.apX-vp ul li { margin-bottom: 4px; }

/* ----- Mobile collapse to single column ----- */
@media (max-width: 980px) {
    .apX-row,
    .apX-vp-row {
        display: block;
        padding-left: 14px;
        padding-right: 14px;
    }
    .apX-row > .apX-col,
    .apX-row > .apX-shortbio,
    .apX-row > .apX-longbio,
    .apX-row > .apX-player {
        grid-column: auto;
        grid-row: auto;
        margin-bottom: 16px;
    }
    .apX-vp { margin-top: 12px; }
}

/* ----- Container break (the "close container, open new one") -----
   Below the apX-actor-specialties section we close .main-container and
   open a new full-width band. The new band has a soft background to
   distinguish it from the actor's own section above.

   Round 12: the band ("Wait — they're an actual family?") now uses a
   subtle grey-white-grey vertical gradient.
*/
.apX-extra-band {
    background: linear-gradient(180deg,
                #e6e9ef 0%,
                #f7f9fc 18%,
                #ffffff 50%,
                #f7f9fc 82%,
                #e6e9ef 100%);
    padding: 32px 0 8px;
    margin-top: 18px;
}
.apX-extra-band__inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
}
.apX-extra-band h2 {
    text-align: center;
    margin: 0 0 18px;
    color: #0e4ccc;
}

/* The .fam-cards block is already styled in specialty-page.css. We add
   actor-page-specific overrides for Round 12: arrows shifted UP by 120px,
   peek images flush with the top of the info card body, and the body’s
   top-padding tightened to 5px so the info sits higher.

   These rules are scoped under .apX-extra-band so we only affect the
   actor-page family-cards block, NOT the specialty pages where the
   layout is currently working as desired.
*/
.apX-extra-band .fam-cards__nav {
    /* Move both prev/next arrows up by 120px from the vertical center. */
    top: calc(50% - 120px);
}

.apX-extra-band .fam-card__peek {
    /* Round 12: peek image flush with the TOP of the info card body
       (i.e. it sits above with its bottom edge touching the body's top
       border-radius). Previously top:-85px placed it floating well
       above the body; now we anchor it to the top.
       We also remove the rounded-bottom-corner so it meets the body
       cleanly and inherit the body border-radius for the top corners. */
    top: 0;
    height: 110px;
    border-radius: 14px 14px 0 0;
}

.apX-extra-band .fam-card__body {
    /* Round 12: top padding 5px (was 10px) so the info text moves up
       and sits right under the peek image. */
    padding: 5px 10px 0;
    /* The peek now sits AT top:0 with height:110px. The body must start
       below that, so its margin-top equals the peek height. */
    margin-top: 110px;
}

/* Track: keep enough headroom so the now-anchored peek image still has
   visible space (it lives INSIDE the card now, anchored to top:0, and
   the card no longer needs the big top-headroom padding for a peek
   poking ABOVE it). Reduce the track top padding here. */
.apX-extra-band .fam-cards__track {
    padding-top: 28px;
}


/* ==================================================================
   Round 30 — apX actor-page responsive layout
   ==================================================================
   These rules target the real /VA/{actor}.html structure: two .apX-col
   blocks, .apX-player, and .apX-longbio inside .apX-row.
*/
@media (min-width: 981px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) minmax(360px, 1.1fr) !important;
    grid-template-areas:
      "bio video player"
      "story story player" !important;
    align-items: start !important;
  }
  .apX-row > .apX-col:nth-of-type(1) { grid-area: bio !important; }
  .apX-row > .apX-col:nth-of-type(2) { grid-area: video !important; }
  .apX-player {
    grid-area: player !important;
    align-self: start !important;
    display: flex !important;
    justify-content: center !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-longbio {
    grid-area: story !important;
    margin-top: 0 !important;
    align-self: start !important;
  }
}

@media (min-width: 901px) and (max-width: 980px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr) !important;
    grid-template-areas:
      "left player" !important;
    gap: 20px !important;
    align-items: start !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: left !important;
    display: block !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: left !important;
    width: calc(50% - 8px) !important;
    float: right !important;
    margin-left: 16px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    width: calc(50% - 8px) !important;
    float: left !important;
  }
  .apX-longbio {
    grid-area: left !important;
    clear: both !important;
    margin-top: 16px !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr) !important;
    grid-template-areas:
      "left player" !important;
    gap: 18px !important;
    align-items: start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: left !important;
    display: block !important;
    min-width: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: left !important;
    width: calc(50% - 7px) !important;
    float: right !important;
    margin-left: 14px !important;
    min-width: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    width: calc(50% - 7px) !important;
    float: left !important;
  }
  .apX-longbio {
    grid-area: left !important;
    clear: both !important;
    margin-top: 14px !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 760px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "bio video"
      "player player"
      "story story" !important;
    gap: 14px !important;
    align-items: start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: bio !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: video !important;
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
  }
  .apX-bio1,
  .main-demo {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .apX-longbio {
    grid-area: story !important;
    width: 100% !important;
    margin-top: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
  }
}

/* ==================================================================
   Round 30b — safer apX 761–980 grid, no overlapping grid-area stack
   ================================================================== */
@media (min-width: 901px) and (max-width: 980px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) !important;
    grid-template-areas:
      "bio video player player"
      "story story player player" !important;
    gap: 18px !important;
    align-items: start !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: bio !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: video !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    float: none !important;
    width: 100% !important;
  }
  .apX-longbio {
    grid-area: story !important;
    clear: none !important;
    margin-top: 0 !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .apX-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) !important;
    grid-template-areas:
      "bio video player player"
      "story story player player" !important;
    gap: 16px !important;
    align-items: start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .apX-row > .apX-col:nth-of-type(1) {
    grid-area: bio !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(2) {
    grid-area: video !important;
    display: flex !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .apX-row > .apX-col:nth-of-type(1) .apX-bio1 {
    float: none !important;
    width: 100% !important;
  }
  .apX-longbio {
    grid-area: story !important;
    clear: none !important;
    margin-top: 0 !important;
  }
  .apX-player {
    grid-area: player !important;
    display: flex !important;
    justify-content: center !important;
    align-self: start !important;
    min-width: 0 !important;
  }
  .apX-player .demo-player {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ==================================================================
   Follow-up — Voice Profile lives below Player inside .apX-player
   ================================================================== */
.apX-player {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}
.apX-player > .demo-player,
.apX-player > .apX-vp {
  width: 100% !important;
  max-width: 720px !important;
  box-sizing: border-box !important;
}
.apX-player > .apX-vp {
  margin-top: 0 !important;
}
@media (max-width: 980px) {
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 680px !important;
  }
}
@media (max-width: 760px) {
  .apX-player > .demo-player,
  .apX-player > .apX-vp {
    max-width: 100% !important;
  }
}
.apX-vp-row:empty,
.apX-vp-row.is-emptied {
  display: none !important;
}