/**
 * For Residents.
 *
 * From residents-page.html, with the mock's hex palette mapped onto theme
 * tokens. 1280px container, matching the rest of the site.
 */

.cul-res {
    --rs-navy:      var(--cul-brand, #1B3A5C);
    --rs-head:      var(--cul-brand, #1B3A5C);
    --rs-ink:       var(--cul-g700, #444);
    --rs-ink-soft:  #64798c;
    --rs-line:      var(--cul-g200, #d0dce8);
    --rs-line-mid:  var(--cul-g100, #e0e8f0);
    --rs-page:      var(--cul-g50, #EEF4FB);
    --rs-orange:    var(--cul-accent, #E87722);
    --rs-orange-dk: #cf5f0a;
    --rs-orange-w:  #fff7f0;
    --rs-orange-l:  #f4d6b8;
    --rs-white:     var(--cul-white, #fff);
    --rs-r:         5px;
    --rs-col:       var(--cul-content-w, 1280px);
    --rs-gutter:    var(--cul-gutter, 24px);

    background: var(--rs-white);
    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--rs-ink);
}
.cul-res *, .cul-res *::before, .cul-res *::after { box-sizing: border-box; }

.cul-res__col { max-width: var(--rs-col); margin: 0 auto; padding: 0 var(--rs-gutter); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.cul-res__hero {
    /* Soft orange glow over navy, the same treatment as the other heroes —
       not a navy→orange crossfade, which goes muddy in the middle. */
    background-color: var(--rs-navy);
    background-image:
        radial-gradient(680px 300px at 10% 6%, rgba(232,119,34,.24), transparent 62%),
        linear-gradient(160deg, #1e4266, #122c46);
    color: #fff;
    padding: 66px 0 60px;
    text-align: center;
}
.cul-res__eyebrow {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #ffd0a3;
}
.cul-res__h1 {
    max-width: 17ch;
    margin: 0 auto 16px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
.cul-res__h1 em { font-style: normal; color: var(--rs-orange); }
.cul-res__lede {
    max-width: 52ch;
    margin: 0 auto 26px;
    font-size: 18px;
    line-height: 1.55;
    color: #c3d6e6;
}

/* ── Signup ──────────────────────────────────────────────────────────── */

.cul-res__signup { max-width: 480px; margin: 0 auto; }
.cul-res__form { display: flex; gap: 10px; flex-wrap: wrap; }
.cul-res__form[hidden] { display: none; }
.cul-res__form input[type="email"] {
    flex: 1;
    min-width: 220px;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--rs-r);
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--rs-head);
}
.cul-res__form input[type="email"]:focus { outline: 2px solid var(--rs-orange); outline-offset: 2px; }
.cul-res__form button {
    -webkit-appearance: none; appearance: none;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--rs-r);
    background: var(--rs-orange) !important;
    color: #fff !important;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.cul-res__form button:hover:not(:disabled) { background: var(--rs-orange-dk) !important; }
.cul-res__form button:disabled { opacity: .75; cursor: default; }

/* Off-screen rather than display:none — a hidden field some bots still
   fill, but no assistive tech announces. */
.cul-res__hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}

.cul-res__fine { margin: 13px 0 0; font-size: 13.5px; color: #9db4c8; }
.cul-res__fine[hidden] { display: none; }

.cul-res__err {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--rs-r);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    font-size: 14px;
    color: #ffd7d0;
}
.cul-res__err[hidden] { display: none; }

.cul-res__done {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 18px;
    border-radius: var(--rs-r);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-align: left;
}
.cul-res__done[hidden] { display: none; }
.cul-res__done svg { flex: 0 0 auto; margin-top: 3px; color: #7fe0a8; }
.cul-res__done b { font-weight: 700; }
.cul-res__done a,
.cul-res__done a:link,
.cul-res__done a:visited { color: #ffd0a3 !important; font-weight: 650; text-decoration: underline !important; }

/* ── Local-only strip ────────────────────────────────────────────────── */

.cul-res__strip {
    background: var(--rs-orange-w);
    border-top: 1px solid var(--rs-orange-l);
    border-bottom: 1px solid var(--rs-orange-l);
    padding: 16px 0;
}
.cul-res__strip-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-wrap: wrap;
    text-align: center;
}
.cul-res__strip svg { flex: 0 0 auto; color: var(--rs-orange-dk); }
.cul-res__strip p { margin: 0; font-size: 15.5px; color: var(--rs-head); }
.cul-res__strip b { font-weight: 700; }
.cul-res__strip span { color: var(--rs-ink-soft); }

/* ── Sections ────────────────────────────────────────────────────────── */

.cul-res__sec { padding: 64px 0; }
.cul-res__sec--tint { background: var(--rs-page); }
.cul-res__h2 {
    margin: 0 0 8px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--rs-head);
    text-align: center;
}
.cul-res__sub {
    max-width: 52ch;
    margin: 0 auto 38px;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--rs-ink-soft);
    text-align: center;
}

.cul-res__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cul-res__step { text-align: center; padding: 0 8px; }
.cul-res__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--rs-orange);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.cul-res__step h3 {
    margin: 0 0 7px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--rs-head);
}
.cul-res__step p {
    max-width: 34ch;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--rs-ink-soft);
}

/* ── Example offer ───────────────────────────────────────────────────── */

/* Three across rather than one boxed card, so the row reads as a sample of
   what is on the site. Falls to two or one when the city has fewer live
   offers, without leaving a gap where a card would have been. */
.cul-res__examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 38px 0 0;
    align-items: stretch;
}
.cul-res__examples[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.cul-res__examples[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }

.cul-res__example,
.cul-res__example:link,
.cul-res__example:visited {
    display: flex;
    flex-direction: column;
    background: var(--rs-white);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
    overflow: hidden;
    color: var(--rs-ink) !important;
    text-decoration: none !important;
    transition: box-shadow .14s, border-color .14s;
}
.cul-res__example:hover { border-color: #c2d0dc; box-shadow: 0 3px 14px rgba(22,50,79,.08); }
.cul-res__ex-img {
    display: block;
    /* flex: 0 0 auto so the ratio governs the height. As a plain flex item
       it was being sized from the image's natural height instead, and a
       portrait photo made one card's banner three times the height of its
       neighbours'. */
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--rs-line-mid);
}
.cul-res__ex-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cul-res__ex-img.is-grad {
    background: linear-gradient(140deg, #1e4266, var(--rs-orange));
    display: flex;
    align-items: center;
    justify-content: center;
}
.cul-res__ex-gradini { color: rgba(255,255,255,.9); font-size: 22px; font-weight: 700; }
.cul-res__ex-in {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px;
}
/* Pushes the button to the bottom so all three align regardless of how long
   the business name or offer line runs. */
.cul-res__ex-btn { margin-top: auto; }
.cul-res__ex-who { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cul-res__ex-ini {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--rs-orange-w);
    border: 1px solid var(--rs-orange-l);
    color: var(--rs-orange-dk);
    font-size: 12px;
    font-weight: 700;
}
.cul-res__ex-n {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rs-head);
}
.cul-res__ex-n span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--rs-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cul-res__ex-val {
    display: block;
    margin: 0 0 3px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rs-head);
}
.cul-res__ex-val--long { font-size: 19px; line-height: 1.3; }
.cul-res__ex-of { display: block; margin: 0 0 16px; font-size: 15px; color: var(--rs-ink); }
.cul-res__ex-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: var(--rs-r);
    background: var(--rs-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.cul-res__ex-cap {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--rs-ink-soft);
}

/* ── Closing ─────────────────────────────────────────────────────────── */

.cul-res__final {
    background: linear-gradient(160deg, #1e4266, #122c46);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.cul-res__final .cul-res__h2 { color: #fff; font-size: 30px; }
.cul-res__final .cul-res__sub { color: #c3d6e6; max-width: 48ch; margin-bottom: 24px; }
.cul-res__browse { margin: 18px 0 0; font-size: 14px; color: #9db4c8; }
.cul-res__browse a,
.cul-res__browse a:link,
.cul-res__browse a:visited { color: #fff !important; text-decoration: underline !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 820px) {
    .cul-res__hero { padding: 46px 0 42px; }
    .cul-res__h1 { font-size: 31px; }
    .cul-res__lede { font-size: 16.5px; }
    .cul-res__sec { padding: 48px 0; }
    .cul-res__h2 { font-size: 25px; }
    .cul-res__final .cul-res__h2 { font-size: 24px; }
    .cul-res__sub { margin-bottom: 28px; }

    /* Enough room between stacked steps that the numbers read as separate. */
    .cul-res__steps { grid-template-columns: 1fr; gap: 32px; }

    .cul-res__examples,
    .cul-res__examples[data-count="1"],
    .cul-res__examples[data-count="2"] {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 14px;
    }

    /* Field and button go full width rather than sitting half-width each. */
    .cul-res__form { flex-direction: column; }
    .cul-res__form input[type="email"],
    .cul-res__form button { width: 100%; min-width: 0; }
}
@media (max-width: 1024px) and (min-width: 821px) {
    .cul-res__examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .cul-res__h1 { font-size: 27px; }
    .cul-res__strip-in { gap: 8px; }
    .cul-res__strip p { font-size: 14.5px; }
}

/* ── Hero photo mosaic ────────────────────────────────────────────────────
   Real listing photos behind the hero, the same treatment as the homepage.
   Markup comes from cul_hero_mosaic_markup() so the tiles, srcset and mobile
   `sizes` are defined in one place for all three heroes.

   The scrim has to be heavier here than on the homepage's desktop hero: this
   copy is centred across the full width rather than sitting in a left column,
   so it crosses the busiest part of the grid at every size. It keeps the
   hero's own orange glow on top of the photos so the page still looks like
   itself.

   Scoped to --has-mosaic, which is only added when the city actually has
   enough photos. Without it the section keeps its plain gradient.
   ────────────────────────────────────────────────────────────────────────── */
.cul-res__hero--has-mosaic { position: relative; overflow: hidden; }
.cul-res__hero--has-mosaic .cul-hero-mosaic {
    position: absolute; inset: 0; z-index: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
}
.cul-res__hero--has-mosaic .cul-hero-mosaic__tile { display: block; overflow: hidden; min-height: 0; }
.cul-res__hero--has-mosaic .cul-hero-mosaic__tile img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.cul-res__hero--has-mosaic .cul-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(680px 300px at 10% 6%, rgba(232,119,34,.20), transparent 62%),
        linear-gradient(160deg, rgba(30,66,102,.90), rgba(18,44,70,.88));
}
.cul-res__hero--has-mosaic .cul-res__col { position: relative; z-index: 2; }

@media (max-width: 899px) {
    /* Two columns, three rows. Six columns over a hero this tall makes each
       tile a letterbox slice with nothing recognisable in it, and only the
       first six tiles are requested. Matches the homepage. */
    .cul-res__hero--has-mosaic .cul-hero-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .cul-res__hero--has-mosaic .cul-hero-mosaic__tile:nth-child(n+7) { display: none; }
}