/* =====================================================================
   work.css  —  styles for the new AGS Ignite "Work" / portfolio page
   Add this file to /css/work.css and link it after style.css + mobile.css.
   Depends on the site's existing font (canada-type-gibson via Typekit).
   ===================================================================== */

:root {
    --ign-orange:   #DF7D1C;   /* Core/Orange   (design token)        */
    --ign-charcoal: #4D4F53;   /* Typography/Charcoal                 */
    --ign-navy:     #021A32;   /* hero gradient start                 */
    --ign-cyan:     #0195D3;   /* hero gradient end                   */
    --ign-white:    #FFFFFF;
}

/* ---------------------------------------------------------------------
   Chapter shell — full-bleed section, centered content column
   --------------------------------------------------------------------- */
.work-chapter {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: "canada-type-gibson", Arial, Helvetica, sans-serif;
}

.work-chapter .wc-inner {
    max-width: 1440px;
    min-height: 720px;
    margin: 0 auto;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-sizing: border-box;
}

/* Each section's DOM already lists text/media in visual order, so both
   layouts use a normal row. (wc-text-left / wc-text-right are kept as
   hooks in case you want to reorder via CSS later.) */
.wc-text-left  .wc-inner,
.wc-text-right .wc-inner { flex-direction: row; }

.wc-text  { flex: 0 1 560px; max-width: 560px; }
.wc-media { flex: 1 1 auto; display: flex; justify-content: center; }

/* ---------------------------------------------------------------------
   Backgrounds
   --------------------------------------------------------------------- */
/* Light chapters: near-white with faint grey edges (matches Figma) */
.wc-light {
    background: linear-gradient(180deg,
        #F2F2F2 0%, #FFFFFF 12%, #FFFFFF 94%, #F2F2F2 100%);
}

/* Dark chapters: navy -> cyan diagonal, plus a lighter swoop overlay */
.wc-dark {
    background: linear-gradient(116.5deg, var(--ign-navy) 1%, var(--ign-cyan) 79%);
}
.wc-dark::after {                 /* soft diagonal "swoop" highlight */
    content: "";
    position: absolute;
    top: -20%;
    right: -25%;
    width: 90%;
    height: 140%;
    background: radial-gradient(closest-side,
        rgba(255,255,255,0.16), rgba(255,255,255,0) 70%);
    transform: skewX(-12deg);
    pointer-events: none;
}
.wc-dark .wc-inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
.wc-head {
    margin: 0 0 22px;
    line-height: 1.02;
    font-weight: 300;              /* Gibson Light */
}
.wc-head .light {
    display: block;
    font-weight: 300;
    color: var(--ign-charcoal);
}
.wc-head .accent {
    display: block;
    font-weight: 700;              /* Gibson Bold */
    color: var(--ign-orange);
}
/* Hero heading is the largest */
#work-hero .wc-head { font-size: clamp(3.25rem, 7vw, 112px); }
/* Content + Ignite headings */
.work-chapter:not(#work-hero) .wc-head { font-size: clamp(3rem, 6.4vw, 100px); }

/* On dark chapters the "light" part of the heading is white */
.wc-dark .wc-head .light { color: var(--ign-white); }

/* Sub-headline (Gibson Medium, 30px) */
.wc-sub {
    margin: 0 0 22px;
    font-size: clamp(1.25rem, 2vw, 30px);
    font-weight: 500;              /* Gibson Medium */
    line-height: 1.15;
    color: var(--ign-orange);      /* orange on light chapters */
}
.wc-sub-light { color: var(--ign-white); font-weight: 600; }  /* hero/ignite */
.wc-sub .emph { font-style: italic; font-weight: 700; }

/* Body copy (Gibson Book, 24px) */
.wc-body {
    margin: 0;
    font-size: clamp(1.05rem, 1.55vw, 24px);
    font-weight: 400;              /* Gibson Book / Regular */
    line-height: 1.5;
    color: var(--ign-charcoal);
}
.wc-dark .wc-body { color: var(--ign-white); }
.wc-body .emph { font-style: italic; font-weight: 600; }

/* ---------------------------------------------------------------------
   CTA button (Ignite chapter)
   --------------------------------------------------------------------- */
.wc-cta {
    display: inline-block;
    margin-top: 28px;
    padding: 16px 44px;
    border-radius: 40px;
    background: var(--ign-orange);
    color: var(--ign-white);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.wc-cta:hover { background: #c76a12; transform: translateY(-2px); color: #fff; }

/* ---------------------------------------------------------------------
   Lottie placeholder (swap for <lottie-player> when assets are ready)
   --------------------------------------------------------------------- */
.wc-media .lottie-placeholder {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed rgba(77, 79, 83, 0.35);
    border-radius: 24px;
    background:
        repeating-linear-gradient(45deg,
            rgba(223,125,28,0.05) 0 12px,
            rgba(223,125,28,0.10) 12px 24px);
    color: var(--ign-charcoal);
    text-align: center;
}
.wc-media .lottie-placeholder span { font-size: 20px; font-weight: 600; }
.wc-media .lottie-placeholder small { font-size: 14px; opacity: 0.6; }
/* on dark chapters make the placeholder readable */
.wc-dark .lottie-placeholder {
    border-color: rgba(255,255,255,0.45);
    color: #fff;
    background:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.06) 0 12px,
            rgba(255,255,255,0.12) 12px 24px);
}

/* Live media: dotLottie animations sized like the placeholder.
   aspect-ratio gives the player an actual height — without it the element
   collapses to 0px tall and the animation appears blank. */
.wc-media dotlottie-wc,
.wc-media dotlottie-player,
.wc-media lottie-player {
    display: block;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 4 / 3;
}

/* Adoption chapter uses a Vimeo video — responsive 16:9 frame */
.wc-media .wc-video {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(19, 29, 48, 0.12);
}
.wc-media .wc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------
   Responsive — stack media above text (matches the mobile Figma frames)
   --------------------------------------------------------------------- */
@media (max-width: 992px) {
    .work-chapter .wc-inner {
        flex-direction: column !important;
        min-height: 0;
        padding: 120px 24px 64px;    /* top padding clears the fixed header */
        gap: 32px;
        text-align: center;
    }
    .wc-text  { flex: none; max-width: 560px; width: 100%; }
    .wc-media { width: 100%; }
    .wc-media .lottie-placeholder { margin: 0 auto; }
    .wc-head .light,
    .wc-head .accent { display: inline; }   /* let it wrap naturally */
    .wc-head .accent { margin-left: .25em; }
    .wc-dark::after { display: none; }
}

@media (max-width: 480px) {
    .work-chapter .wc-inner { padding: 100px 18px 48px; }
}