/*
 * opportunities-promo.css — D104, Pack 5 (15 Oct 2026). The homepage section
 * (S04b) and the site-wide popup for Hiring Challenges. Pencil-sketch art on
 * the warm paper tone; gold is the only accent, green for the button.
 *
 * This file exists TWICE — laravel-app/public/css and public_html/css — and
 * only public_html is served. Edit both, and bump ?v= where it is linked.
 */

/* ---- homepage section --------------------------------------------- */
.fi-opp-home { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; background: #fbf5ea; }
.fi-opp-home__frame { position: relative; display: block; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; background: #fbf5ea; box-shadow: 0 18px 40px rgba(40, 30, 10, .08); transition: transform .2s ease, box-shadow .2s ease; }
.fi-opp-home__frame:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(40, 30, 10, .12); color: inherit; }
.fi-opp-home__frame:focus-visible { outline: 2px solid #a86a00; outline-offset: 3px; }
.fi-opp-home__art { display: block; width: 100%; height: auto; }
.fi-opp-home__head { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: clamp(1rem, .5rem + 2.4vw, 2.4rem) 1rem 0; }
.fi-opp-home__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a5d00; }
.fi-opp-home__title { font-weight: 800; font-size: clamp(1.6rem, 1rem + 2.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.03em; color: #111; }
.fi-opp-home__title b { color: #1b6b4a; font-weight: 800; }
.fi-opp-home__btn { display: inline-flex; align-items: center; gap: .55rem; margin-top: .35rem; min-height: 46px; padding: 0 1.4rem; border-radius: 999px; background: #111; color: #fdfbf7; font-weight: 700; font-size: .95rem; }
.fi-opp-home__btn svg { color: #f5be3d; }
@media (max-width: 720px) {
    /* On phones the art is too short to hold the head — stack it above. */
    .fi-opp-home__frame { display: flex; flex-direction: column-reverse; }
    .fi-opp-home__head { position: static; padding: 1.4rem 1rem 1rem; }
}

/* ---- popup -------------------------------------------------------- */
.fi-opp-pop { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 32px)); border-radius: 20px; overflow: hidden; background: #fbf5ea; border: 1px solid #e7e2da; box-shadow: 0 24px 60px rgba(20, 15, 5, .22); opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; font-family: var(--fd-font-body, 'Inter', system-ui, sans-serif); }
.fi-opp-pop.is-in { opacity: 1; transform: none; }
.fi-opp-pop[hidden] { display: none; }
.fi-opp-pop__x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: #111; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.fi-opp-pop__x:hover { background: #fff; }
.fi-opp-pop__x:focus-visible, .fi-opp-pop__btn:focus-visible, .fi-opp-pop__later:focus-visible { outline: 2px solid #a86a00; outline-offset: 2px; }
.fi-opp-pop__art { display: block; }
.fi-opp-pop__art img { display: block; width: 100%; height: auto; }
.fi-opp-pop__body { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.fi-opp-pop__eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9a5d00; }
.fi-opp-pop__title { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #111; }
.fi-opp-pop__title b { color: #1b6b4a; }
.fi-opp-pop__actions { display: flex; align-items: center; gap: .9rem; margin-top: .25rem; }
.fi-opp-pop__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: #111; color: #fdfbf7; font-weight: 700; font-size: .9rem; text-decoration: none; }
.fi-opp-pop__btn:hover { background: #000; color: #fdfbf7; }
.fi-opp-pop__later { border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: #6f6a62; cursor: pointer; text-decoration: underline; min-height: 44px; }
.fi-opp-pop__small { margin: 0; font-size: .75rem; color: #6f6a62; }
@media (max-width: 640px) {
    .fi-opp-pop { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .fi-opp-pop__art img { max-height: 34vh; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) { .fi-opp-pop, .fi-opp-home__frame { transition: none; } }

/* D104 Pack 6 (15 Oct 2026): the two-sided problem line on the homepage card. */
.fi-opp-home__sub { max-width: 52ch; font-size: clamp(.85rem, .78rem + .3vw, .98rem); line-height: 1.45; font-weight: 600; color: #3a332a; }
@media (max-width: 699px) { .fi-opp-home__sub { font-size: .9rem; } }

/* Pack 6b (15 Oct 2026): the problem line moved from under the title to a
   bottom-left note on a soft ivory panel (it sits over the CV pile, so the
   panel keeps it readable). Phones: head, picture, then the note. */
.fi-opp-home__sub { display: none; }
.fi-opp-home__note { position: absolute; left: clamp(.75rem, .4rem + 1.5vw, 1.75rem); bottom: clamp(.75rem, .4rem + 1.5vw, 1.75rem); max-width: min(400px, 38%); padding: .9rem 1.1rem; border-radius: 16px; background: rgba(251, 245, 234, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(27, 107, 74, .18); box-shadow: 0 10px 28px rgba(40, 30, 10, .10); font-size: clamp(.8rem, .72rem + .3vw, .93rem); line-height: 1.45; font-weight: 500; color: #3a332a; text-align: left; }
.fi-opp-home__note b { display: block; margin-bottom: .3rem; font-size: 1.08em; font-weight: 800; letter-spacing: -0.01em; color: #1b6b4a; }
@media (max-width: 720px) {
    .fi-opp-home__frame { flex-direction: column; }
    .fi-opp-home__head { order: 1; }
    .fi-opp-home__art { order: 2; }
    .fi-opp-home__note { order: 3; position: static; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(27, 107, 74, .14); box-shadow: none; background: #fbf5ea; padding: 1rem 1.1rem 1.2rem; }
}

/* ---------------------------------------------------------------------------
   Pack 8 (15 Oct 2026) — popup and homepage card on phones, tablets and in
   landscape. The popup must never cover more than about a third of a phone
   screen, never sit under the iPhone home bar, and never lose its X.
   --------------------------------------------------------------------------- */
.fi-opp-pop { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.fi-opp-pop__x { width: 40px; height: 40px; }
@media (max-width: 640px) {
    /* Phone, portrait: a bottom sheet with a short picture strip. */
    .fi-opp-pop { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 18px; }
    .fi-opp-pop__art img { height: 22vh; max-height: 170px; width: 100%; object-fit: cover; object-position: center 40%; }
    .fi-opp-pop__body { padding: .75rem 1rem 1rem; gap: .35rem; }
    .fi-opp-pop__title { font-size: 1.02rem; }
    .fi-opp-pop__actions { gap: .75rem; }
    .fi-opp-pop__small { display: none; }
}
@media (max-width: 360px) {
    /* Small phones: text only, so the sheet stays short. */
    .fi-opp-pop__art { display: none; }
    .fi-opp-pop__body { padding-right: 3.2rem; }
}
@media (orientation: landscape) and (max-height: 540px) {
    /* Phone turned sideways: little height, so drop the picture and keep a
       compact corner card that leaves the page readable. */
    .fi-opp-pop { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(360px, 48vw); }
    .fi-opp-pop__art { display: none; }
    .fi-opp-pop__body { padding: .7rem 3.2rem .8rem 1rem; gap: .3rem; }
    .fi-opp-pop__title { font-size: .98rem; }
    .fi-opp-pop__small { display: none; }

    /* Homepage card: stack it like a phone, or the head and the note crowd
       the short picture. */
    .fi-opp-home__frame { display: flex; flex-direction: column; }
    .fi-opp-home__head { order: 1; position: static; padding: 1.2rem 1rem 1rem; }
    .fi-opp-home__art { order: 2; }
    .fi-opp-home__note { order: 3; position: static; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(27, 107, 74, .14); box-shadow: none; background: #fbf5ea; padding: 1rem 1.1rem 1.2rem; }
}
@media (min-width: 721px) and (max-width: 980px) and (orientation: portrait) {
    /* Tablet, portrait: keep the overlay, but give the note a little more room. */
    .fi-opp-home__note { max-width: 46%; }
}