/* ═══════════════════════════════════════════════════════════════════════
   ACTOR PROFILE — complete, standalone
   rev 2026-08-09

   INSTALL  themes/write-direct-studio/assets/css/profile-actor.css
            enqueued on the actor CPT only

   ── THIS IS THE ONLY STYLESHEET THE ACTOR PAGE NEEDS ────────────────────

   Every class here is wda-. Nothing is shared with the crew template, with
   profile-core.css, or with style.css. Which means:

     · profile-core.css is no longer needed on actor pages at all
     · the old cast-*, cp-*, pf-* and film-* rules can be deleted outright
     · a change to crew can never reach an actor, and vice versa

   The three exceptions are .clear, .hide-mobile and .display-mobile —
   site-wide utilities that stay in style.css and are used here as-is.

   ── WHY LIGHT ───────────────────────────────────────────────────────────

   Not a preference. An actor profile is fundamentally a face, and light
   surrounds serve skin tones: a dark frame pushes the eye to the border and
   makes a headshot read as a still rather than as a person. Every casting
   platform is light for this reason.

   Crew profiles are about work — reels, posters, laurels — which is exactly
   the content a dark surround flatters. The split tracks something real
   about what each page is for.

   What must NOT differ is the architecture. Same hero shape, same card
   system, same chip treatment, same type scale as crew. Palette is the only
   axis of difference; anything more and it reads as two products rather
   than as two rooms in one.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Palette ────────────────────────────────────────────────────────────
   The mirror of the crew ladder. There, the page is darkest and cards step
   lighter. Here the page is the DARKEST of the light values and cards step
   toward white — same relationship, inverted, so a card still reads as an
   object resting on the page rather than a hole punched in it. */

.wda {
    --wda-canvas: #efece4;
    --wda-card:   #ffffff;
    --wda-raised: #f7f5f0;
    --wda-line:   #ded8cb;
    --wda-line-lo:#e8e3d8;

    --wda-head:   #211d16;
    --wda-text:   #3a352b;

    /* faint and gold-lo were tuned against a white card. Once the
       filmography rows picked up a #f1ede4 tint they dropped to 3.85 and
       4.12 — below AA on the one surface they are most used on. Darkened
       just enough to clear it there, which also lifts them everywhere
       else. Changing a surface without re-checking the text on it is the
       standard way a theme quietly loses its secondary copy. */
    --wda-dim:    #6b6459;
    --wda-faint:  #70695e;

    --wda-gold:   #ECB612;
    --wda-gold-lo:#81680b;
    --wda-gold-ink:#2e2300;

    --wda-radius: 10px;

    background: var(--wda-canvas);
    color: var(--wda-text);
    padding: 25px 20px 60px;
}

body.single-actors,
body.single-actor {
    background: #efece4;
}

.wda-shell {
    max-width: 1165px;
    margin: 0 auto;
}


/* ── Typography ─────────────────────────────────────────────────────── */

.wda h1,
.wda h2,
.wda h3 { color: var(--wda-head); }

.wda h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 400;
    margin: 0 0 14px;
}

.wda h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
    margin: 0 0 6px;
}

.wda p { line-height: 1.65; }

.wda a { color: var(--wda-gold-lo); text-decoration: none; }
.wda a:hover { text-decoration: underline; }


/* ── Cards ──────────────────────────────────────────────────────────── */

.wda-card {
    background: var(--wda-card);
    border: 1px solid var(--wda-line);
    border-radius: var(--wda-radius);
    padding: 24px 26px 26px;
    margin: 0 0 22px;
}

.wda-card:last-child { margin-bottom: 0; }

.wda-card-intro {
    color: var(--wda-dim);
    margin: -6px 0 16px;
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */

.wda-hero {
    display: flex;
    gap: 26px;
    background: var(--wda-card);
    border: 1px solid var(--wda-line);
    border-radius: var(--wda-radius);
    padding: 24px;
    margin: 0 0 22px;
}

/* flex-basis rather than width so the headshot can shrink on narrow
   viewports instead of forcing the row wider than the shell. */
.wda-shot {
    flex: 0 0 260px;
    max-width: 260px;
}

.wda-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
    background: var(--wda-line-lo);
}

@supports not (aspect-ratio: 3 / 4) {
    .wda-shot img { height: 347px; }
}

/* min-width:0 is load-bearing — a flex item holding text defaults to
   min-width:auto and refuses to shrink below its content, which would push
   the headshot narrower than its flex-basis instead of wrapping the chips. */
.wda-ident {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.wda-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
}

.wda-where {
    font-size: 15px;
    color: var(--wda-dim);
    margin-top: 7px;
}


/* ── Chips ──────────────────────────────────────────────────────────────
   Physicals live here rather than in a sidebar card. Casting reads
   physicals before anything else, so they belong on the first screen.

   is-key carries the gold and is used for age range — the first filter
   anyone applies and the one attribute that is genuinely disqualifying. */

.wda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.wda-chip {
    display: inline-block;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.35;
    background: var(--wda-line-lo);
    color: var(--wda-text);
    overflow-wrap: break-word;
}

.wda-chip.is-key {
    background: var(--wda-gold);
    color: var(--wda-gold-ink);
    font-weight: 600;
}

/* Capability, not physique — set apart so the two rows do not read as one
   long undifferentiated list of attributes. */
.wda-chip.is-exp {
    background: transparent;
    border: 1px solid var(--wda-line);
    color: var(--wda-dim);
}

.wda-chips-exp { margin-top: 0; }


/* ── Labelled sub-blocks inside the hero ────────────────────────────────
   Acting experience and the gallery both sit under the physical chips and
   both needed naming — unlabelled, "Short Films / Feature Films" read as
   two more attributes rather than as a category of its own. */

.wda-sub { margin-top: 18px; }

.wda-sublabel {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wda-faint);
    margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════════════════

   Inside the identity column now, not a card of its own. That column was
   empty below the chips on every profile — the headshot is tall and the
   name block is short — so the gallery fills a gap that already existed.

   A wrapping strip, not a grid. Fixed-width items that wrap look
   deliberate at two photos and at twenty; a grid with fixed columns leaves
   visible empty cells when someone has uploaded three.

   Thumbs are smaller than they were as a full-width card, because the
   column is narrower. Four per row at the common desktop width. */

.wda-gallery-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wda-shot-link {
    display: block;
    width: 108px;
    border-radius: 6px;
    overflow: hidden;
}

.wda-shot-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--wda-line-lo);
    transition: transform 0.25s ease;
}

@supports not (aspect-ratio: 3 / 2) {
    .wda-shot-thumb { height: 88px; }
}

.wda-shot-link:hover .wda-shot-thumb { transform: scale(1.06); }


/* ═══════════════════════════════════════════════════════════════════════
   BODY
   ═══════════════════════════════════════════════════════════════════════ */

.wda-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

/* minmax(0, 1fr) rather than 1fr: a grid column defaults to min-width:auto,
   so a wide child would push past its share and shove the rail off screen
   instead of wrapping. */

.wda-main,
.wda-rail { min-width: 0; }


/* ── Bio expander — checkbox hack, no JS ─────────────────────────────── */

.wda-bio-toggle,
.wda-bio-full,
.wda-bio-less { display: none; }

.wda-bio-toggle:checked ~ .wda-bio-short { display: none; }
.wda-bio-toggle:checked ~ .wda-bio-full  { display: block; }
.wda-bio-toggle:checked ~ .wda-bio-more  { display: none; }
.wda-bio-toggle:checked ~ .wda-bio-less  { display: inline-block; }

.wda-bio-more,
.wda-bio-less {
    display: inline-block;
    cursor: pointer;
    color: var(--wda-gold-lo);
    font-size: 14px;
}


/* ── Studio credits ─────────────────────────────────────────────────── */

.wda-credits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.wda-credit {
    display: flex;
    gap: 16px;
}

.wda-credit-poster {
    flex: 0 0 104px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wda-line-lo);
    align-self: flex-start;
}

.wda-credit-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.wda-credit-body { min-width: 0; }

.wda-credit-meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--wda-dim);
    margin-bottom: 6px;
}

.wda-credit-roles {
    font-size: 13px;
    line-height: 1.45;
    color: var(--wda-text);
    margin: 6px 0 10px;
}

.wda-imdb img {
    display: block;
    width: 34px;
    height: auto;
}


/* SELECTOR SHAPE MATTERS HERE.

   `.wda a { color: var(--wda-gold-lo) }` is (0,1,1) and a bare `.wda-btn`
   is (0,1,0) — so the generic link colour was winning and the button text
   came out gold instead of white. Writing it as `.wda a.wda-btn` makes it
   (0,2,1), which beats the link rule outright.

   The button also sits ABOVE the card rather than below it: a control
   darker than its surface reads as a hole rather than an object. On light
   that means going dark; on the crew page the same rule meant going
   lighter. */
.wda a.wda-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 5px;
    background: var(--wda-head);
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
}

.wda a.wda-btn:hover {
    background: var(--wda-gold);
    color: var(--wda-gold-ink);
    text-decoration: none;
}


/* ── Filmography ────────────────────────────────────────────────────────

   Three columns: year, title, and the type/IMDb pair. That is the shape
   every filmography uses — IMDb, Spotlight, a paper resume — because a
   fixed year column lets the eye run straight down the dates instead of
   hunting for them inside a sentence.

   The previous version put year, type and genre in one interpuncted run
   under the title, which reads fine for one credit and turns into a wall
   at fifteen. */

.wda-filmog {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Tinted rows rather than hairline separators.

   Hairlines work when there are enough rows to establish a rhythm; with
   one or two credits they read as stray lines on a white field, which is
   what left this card looking mostly empty. A filled row is an object at
   any count.

   #f1ede4 sits 1.17x below the white card — visible as a band, quiet
   enough not to compete with the poster rows in the card above. Body text
   still clears AA on it at 14.4, and the muted genre line at 5.0. */
.wda-film {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 14px 18px;
    background: #f1ede4;
    border-radius: 8px;
}

/* tabular-nums so every year is the same width — without it a 1998 and a
   2011 sit on different left edges and the column stops reading as one. */
.wda-film-year {
    font-size: 14px;
    color: var(--wda-faint);
    font-variant-numeric: tabular-nums;
}

/* min-width:0 so a long title wraps inside its column instead of forcing
   the grid wider and pushing the type chip off the card. The minmax(0,1fr)
   on the column handles the track; this handles the box inside it. */
.wda-film-body { min-width: 0; }

.wda-film-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.3;
    color: var(--wda-head);
}

.wda-film-genre {
    font-size: 13px;
    color: var(--wda-dim);
    margin-top: 2px;
}

.wda-film-side {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* The type reuses the chip language from the hero rather than inventing a
   third way of showing a short categorical value on this page. */
.wda-film-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.35;
    background: var(--wda-line-lo);
    color: var(--wda-dim);
}

.wda-film-imdb { font-size: 13px; }


@media screen and (max-width: 600px) {

    /* The side column drops beneath the title rather than squeezing three
       columns into a phone. Year stays in its own column — it is the thing
       being scanned, so it keeps its alignment. */
    .wda-film {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
    }

    .wda-film-side {
        grid-column: 2;
        margin-top: 6px;
    }
}


/* ── Reel ───────────────────────────────────────────────────────────────
   .video-container had NO rule anywhere in style.css, so the actor reel has
   been rendering with no aspect ratio and collapsing. This is the fix, on
   the renamed class. */

.wda-reel {
    border-radius: var(--wda-radius);
    overflow: hidden;
    margin: 0 0 22px;
    background: #000;
}

.wda-video {
    position: relative;
    aspect-ratio: 16 / 9;
}

.wda-video iframe,
.wda-video video,
.wda-video object,
.wda-video embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
    .wda-video { height: 0; padding-bottom: 56.25%; }
}


/* ── Accolades ──────────────────────────────────────────────────────── */

.wda-accolades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.wda-accolade {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 8px;
    background: var(--wda-raised);
    border: 1px solid var(--wda-line-lo);
}

.wda-accolade-star { flex: 0 0 22px; width: 22px; height: auto; }

.wda-accolade-head    { color: var(--wda-head); font-size: 15px; line-height: 1.35; }
.wda-accolade-project { font-size: 13px; color: var(--wda-dim); margin-top: 3px; }
.wda-accolade-type,
.wda-accolade-source  { font-size: 12px; color: var(--wda-faint); }
.wda-accolade-source  { display: inline-block; margin-top: 4px; }


/* ── Top Films / TV ─────────────────────────────────────────────────────

   Chips rather than tiles. A tile in poster proportions promises artwork;
   with only a title string it reads as an image that failed to load. A
   chip promises nothing and is sized by its own text, so ten titles of
   different lengths pack into the rail without any looking short-changed.

   Six tints, assigned in PHP from a hash of the title. All six were solved
   to the SAME luminance — spread 0.0046 — which is what makes them read as
   one family rather than as confetti. They are pale on purpose: gold is
   1.5x more distinct against the card than any of them, so the age-range
   chip in the hero stays the loudest thing on the page.

   Gold is deliberately absent here. It means "age range" in the hero, and
   spending it on decoration would dilute that. */

.wda-faves {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.wda-fave {
    display: inline-block;
    max-width: 100%;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.35;
    color: #2e2a33;
    overflow-wrap: break-word;
}

.wda-fave.t0 { background: #e7e2f5; }   /* violet     */
.wda-fave.t1 { background: #d7e7f4; }   /* sky        */
.wda-fave.t2 { background: #d3e9ea; }   /* teal       */
.wda-fave.t3 { background: #f4e0e9; }   /* rose       */
.wda-fave.t4 { background: #e2e4f5; }   /* periwinkle */
.wda-fave.t5 { background: #eee1f2; }   /* orchid     */


/* ── Contact form note ──────────────────────────────────────────────────

   Sits between the heading and the first field, where it is read before
   anyone starts typing. Below the form it would be an apology; above it,
   it is an instruction.

   Deliberately not styled as a warning — no red, no icon, no box. The
   sentence does the work, and alarm chrome on every profile would make the
   whole directory feel policed. */

.wda-formnote {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wda-dim);
    margin: -4px 0 18px;
}


/* ── Form fields ────────────────────────────────────────────────────── */

.wda input[type="text"],
.wda input[type="email"],
.wda input[type="tel"],
.wda input[type="url"],
.wda select,
.wda textarea,
.wda .ff-el-form-control {
    background: #fff;
    border: 1px solid var(--wda-line);
    border-radius: 6px;
    color: var(--wda-text);

    /* 16px stops iOS zooming the page when a field takes focus. Anything
       smaller and Safari treats it as unreadable and scales in. */
    font-size: 16px;
    padding: 11px 12px;
}

.wda input:focus,
.wda textarea:focus,
.wda .ff-el-form-control:focus { border-color: var(--wda-gold); outline: none; }

.wda input::placeholder,
.wda textarea::placeholder,
.wda .ff-el-form-control::placeholder { color: var(--wda-faint); }

.wda .ff-el-input--label label { color: var(--wda-dim); font-size: 13px; }

.wda input[type="submit"],
.wda button[type="submit"],
.wda .ff-btn-submit {
    background: var(--wda-gold);
    color: var(--wda-gold-ink);
    border: 0;
    border-radius: 6px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════ */

.wda-lb {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.wda-lb.is-open { opacity: 1; visibility: visible; }

.wda-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wda-lb-close,
.wda-lb-prev,
.wda-lb-next {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;

    /* 44px is the minimum comfortable touch target. The old controls were
       sized by their glyph alone, which on a phone is a coin-flip tap. */
    min-width: 44px;
    min-height: 44px;
}

.wda-lb-close { top: 14px; right: 18px; font-size: 40px; }
.wda-lb-prev  { left: 14px;  font-size: 54px; }
.wda-lb-next  { right: 14px; font-size: 54px; }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1000px) {

    /* Rail below the content. The rail carries skills and representation —
       supporting detail, so it belongs after the credits, not before. */
    .wda-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .wda-rail { margin-top: 22px; }
}

@media screen and (max-width: 700px) {

    .wda { padding: 16px 14px 44px; }

    /* Headshot goes full width and the identity block sits beneath it. At
       this width a 260px shot beside wrapped text leaves both cramped. */
    .wda-hero {
        flex-direction: column;
        gap: 18px;
        padding: 16px;
    }

    .wda-shot {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .wda-shot img { aspect-ratio: 4 / 5; }

    .wda-name { font-size: 27px; }

    .wda-card { padding: 18px 16px 20px; }

    .wda-shot-link { width: calc(33.333% - 6px); }

    .wda-credit { flex-direction: column; }
    .wda-credit-poster { flex: 0 0 auto; max-width: 120px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════

   Casting prints. A headshot and the physicals are the whole point, so the
   hero survives and the interactive furniture goes. */

@media print {

    .wda { background: #fff; padding: 0; }

    .wda-hero,
    .wda-card { border-color: #ccc; break-inside: avoid; }

    .wda-body { display: block; }

    .wda-lb,
    .wda-btn,
    .wda-reel { display: none; }

    .wda-chip {
        background: #eee;
        color: #000;
        border: 1px solid #ccc;
    }
}