/* ============================================================================
   HutchConnect — Holiday Light Trail (EPIC #535)
   Christmas theme. Photos are the product on this board, so the layout is built
   around a large image, not around text with a thumbnail beside it.

   WHY THIS IS A NEW FILE AND NOT A ?v= BUMP ON trunk-or-treat.css
   ---------------------------------------------------------------
   The EPIC's reuse map is explicit: "Copy the file, do not add a second ?v= to
   the existing one — see #647." A second seasonal theme sharing one URL means
   every Halloween visitor's cached copy has to be busted to ship a Christmas
   change, and the two themes then fight over the same cache entry.

   WHY A GLOBAL STYLESHEET AND NOT A SCOPED .razor.css
   ---------------------------------------------------
   A scoped `.razor.css` in this RCL does NOT aggregate into the host's
   {HostAssembly}.styles.css when the module is a cross-repo ProjectReference.
   The page returns 200 with correct HTML and every class unstyled — HC.Module
   #97, and the single most likely way this work becomes invisible. So: a plain
   file in wwwroot, served at
   _content/ForWardAI.HutchConnect.Module/holiday-lights.css, linked from each
   page's <HeadContent>, exactly as hutchconnect.css and trunk-or-treat.css do.

   ⚠️ IT MUST ALSO BE LINKED FROM THE HOST. ForWardAI.HutchConnect.Web's
   Components/App.razor carries the <link> tags for every module stylesheet, and
   that file is in a DIFFERENT REPO. A stylesheet this page references but which
   the host never serves is an unstyled page that still returns 200 — the exact
   false-green L3 catches only if you probe the asset URL, not just the route.

   NAMESPACING
   -----------
   Every selector is prefixed `hl-`. Nothing here is a bare element or utility
   selector, so it cannot collide with hutchconnect.css, trunk-or-treat.css,
   app.css or post-studio.css no matter what order the host loads them in.

   MOBILE FIRST
   ------------
   This board is submitted from a phone, in a driveway, in the dark, and read
   from a phone in a car. Every rule below is written for a narrow viewport
   first and widened at a breakpoint. Data-derived text (addresses, household
   names) uses min-width:0 + overflow-wrap so a long string cannot run off the
   side of the screen — a 62-character string did exactly that on Joey's phone
   once because a nowrap rule had no min-width escape.

   ?v=1 is a starting point; bump it in EACH page's <HeadContent> AND in the
   host's App.razor on any future edit to this file.
   ============================================================================ */

.hl-page {
    /* Local tokens only. Deliberately NOT overriding --hc-* : the seasonal theme
       switcher writes those on :root, and stomping them here would recolour the
       nav and footer too. Christmas stays inside this page. */
    --hl-ink: #f4f8ff;
    --hl-ink-dim: #c3d3e8;
    --hl-bg: #06203a;
    --hl-bg-soft: #0c2e4f;
    --hl-bg-card: #0f3758;
    --hl-red: #d7263d;
    --hl-red-bright: #f04055;
    --hl-green: #1e8c5a;
    --hl-gold: #f0b429;
    --hl-line: rgba(244, 248, 255, 0.16);

    background: var(--hl-bg);
    color: var(--hl-ink);
    /* A dark page with warm points of light. Subtle, not a gradient mess. */
    background-image:
        radial-gradient(circle at 12% 8%, rgba(240, 180, 41, 0.14) 0, transparent 38%),
        radial-gradient(circle at 88% 4%, rgba(215, 38, 61, 0.14) 0, transparent 34%);
    padding: 1.25rem 1rem 3rem;
    min-height: 60vh;
    /* Belt to the braces on horizontal overflow: nothing in here may push the
       page sideways on a phone. */
    overflow-x: hidden;
}

.hl-page a { color: var(--hl-gold); }

/* ---------------------------------------------------------------- hero ---- */

.hl-hero {
    text-align: center;
    padding: 1.5rem 0 1.75rem;
    border-bottom: 1px solid var(--hl-line);
    margin-bottom: 1.5rem;
}

.hl-hero-compact { padding: 1rem 0 1.25rem; }

.hl-hero-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 0 18px rgba(240, 180, 41, 0.35);
}

.hl-hero-sub {
    margin: 0 auto 1.25rem;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hl-ink-dim);
}

/* ------------------------------------------------------- buttons / CTA ---- */

.hl-cta,
.hl-btn {
    display: inline-block;
    /* 44px minimum touch target — these get tapped on a phone, often with gloves on. */
    min-height: 44px;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.5;
}

.hl-cta {
    background: var(--hl-red);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(215, 38, 61, 0.3);
}

.hl-cta:hover,
.hl-cta:focus-visible { background: var(--hl-red-bright); }

.hl-cta-secondary {
    background: transparent;
    color: var(--hl-gold) !important;
    border-color: var(--hl-gold);
    box-shadow: none;
}

.hl-btn {
    background: rgba(244, 248, 255, 0.08);
    color: var(--hl-ink);
    border-color: var(--hl-line);
}

.hl-btn:hover,
.hl-btn:focus-visible { background: rgba(244, 248, 255, 0.16); }

.hl-btn-primary {
    background: var(--hl-green);
    color: #fff;
    border-color: transparent;
}

.hl-btn-primary:hover,
.hl-btn-primary:focus-visible { background: #24a569; }

.hl-btn-submit {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 1.05rem;
}

.hl-link {
    display: inline-block;
    min-height: 44px;
    padding: .7rem 0;
    font-weight: 600;
}

/* ------------------------------------------------------------- toolbar ---- */

.hl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--hl-bg-soft);
    border: 1px solid var(--hl-line);
    border-radius: 14px;
    /* min-width:0 so the count text can shrink instead of forcing the row wide. */
    min-width: 0;
}

.hl-toolbar-count {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .95rem;
    color: var(--hl-ink-dim);
}

.hl-toolbar-count strong { color: #fff; font-size: 1.1rem; }

.hl-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hl-toolbar-bottom { justify-content: center; margin-top: 1.5rem; }

.hl-action-msg {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--hl-gold);
}

.hl-note { margin: 0 0 1rem; }

/* -------------------------------------------------------------- panels ---- */

.hl-panel {
    padding: 1.25rem;
    margin: 0 0 1.5rem;
    background: var(--hl-bg-soft);
    border: 1px solid var(--hl-line);
    border-left: 4px solid var(--hl-gold);
    border-radius: 12px;
}

.hl-panel-title {
    margin: 0 0 .6rem;
    font-size: 1.2rem;
    color: #fff;
}

.hl-panel p { margin: 0 0 .6rem; line-height: 1.55; }
.hl-panel p:last-child { margin-bottom: 0; }

/* A read failure is NOT an empty board. This panel is what the trail renders when
   the submissions read fails, and it must never look like "nothing posted yet". */
.hl-panel-error { border-left-color: var(--hl-red-bright); }
.hl-panel-warn  { border-left-color: var(--hl-gold); }
.hl-panel-route { border-left-color: var(--hl-green); }
.hl-panel-success { border-left-color: var(--hl-green); }

.hl-warn {
    color: var(--hl-gold);
    font-size: .95rem;
}

.hl-muted {
    color: var(--hl-ink-dim);
    font-size: .9rem;
}

/* ---------------------------------------------- the grid of displays ---- */

.hl-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* minmax(0, 1fr) not just 1fr — a bare 1fr lets a long unbroken address
       widen the track and push the whole grid off a phone screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.hl-card {
    min-width: 0;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hl-card-unpinned { border-style: dashed; }

/* The photo IS the card. 4:3 reserved up front so the grid does not reflow as
   images arrive (and so a slow connection does not show a collapsing layout). */
.hl-card-photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #061a2e;
    overflow: hidden;
}

.hl-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hl-card-photo-count {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(6, 26, 46, 0.82);
    color: var(--hl-ink);
    font-size: .8rem;
    font-weight: 600;
}

/* Should be unreachable (photos are required at submit). Visible on purpose so a
   moderator notices, rather than a silently blank box. Never a stock placeholder
   image — a fabricated photo would be worse than an honest gap. */
.hl-card-photo-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
    text-align: center;
    color: var(--hl-ink-dim);
    font-size: .9rem;
}

.hl-card-body {
    min-width: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.hl-card-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    /* Data-derived: a household can type anything. Wrap it, never clip it. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.hl-card-title a { color: #fff; text-decoration: none; }
.hl-card-title a:hover { text-decoration: underline; }

.hl-card-address,
.hl-card-hours,
.hl-card-desc,
.hl-card-nopin,
.hl-card-flag {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.hl-card-address { font-size: .95rem; color: var(--hl-ink-dim); }
.hl-card-hours   { font-size: .9rem;  color: var(--hl-gold); }
.hl-card-desc    { font-size: .95rem; color: var(--hl-ink); }

.hl-card-flag {
    font-size: .85rem;
    font-weight: 600;
    color: var(--hl-red-bright);
}

/* The quiet "why there's no pin" note. Deliberately legible rather than hidden —
   a missing pin with no explanation is indistinguishable from a display that
   isn't real. */
.hl-card-nopin {
    font-size: .85rem;
    color: var(--hl-ink-dim);
    font-style: italic;
}

/* pick-your-stops checkbox. Big tap target, not a 13px default box. */
.hl-pick {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    padding: .6rem .25rem;
    min-height: 44px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hl-ink);
    cursor: pointer;
}

.hl-pick input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--hl-green);
    flex: 0 0 auto;
    cursor: pointer;
}

/* ------------------------------------------------------- detail page ---- */

.hl-detail { min-width: 0; }

.hl-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.hl-gallery-item {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #061a2e;
    aspect-ratio: 4 / 3;
}

.hl-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hl-detail-head { margin-bottom: 1rem; }

.hl-detail-title {
    margin: 0 0 .35rem;
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.15;
    color: #fff;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hl-detail-address,
.hl-detail-hours,
.hl-detail-desc {
    margin: 0 0 .5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.hl-detail-address { font-size: 1.05rem; color: var(--hl-ink-dim); }
.hl-detail-hours   { font-size: .95rem;  color: var(--hl-gold); }
.hl-detail-desc    { font-size: 1rem; margin-bottom: 1.25rem; }

.hl-detail-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hl-line);
}

/* -------------------------------------------------------------- forms ---- */

.hl-form {
    max-width: 38rem;
    margin: 0 auto;
}

.hl-field { margin-bottom: 1.1rem; min-width: 0; }

.hl-field > label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--hl-ink);
}

.hl-field-check > label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.45;
    min-height: 44px;
    padding: .5rem 0;
    cursor: pointer;
}

.hl-field-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    accent-color: var(--hl-green);
    flex: 0 0 auto;
}

.hl-req { color: var(--hl-red-bright); }

/* Scoped to .hl-page so this cannot restyle forms on any other page. */
.hl-page .form-control {
    width: 100%;
    /* 16px minimum — iOS Safari zooms the whole page in on focus for anything
       smaller, which on a submit form reads as the page breaking. */
    font-size: 1rem;
    min-height: 44px;
    padding: .6rem .75rem;
    color: #10243a;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 10px;
}

.hl-page textarea.form-control { min-height: 5.5rem; line-height: 1.5; }

.hl-page .form-text {
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--hl-ink-dim);
    line-height: 1.45;
}

.hl-page .es-section-title {
    margin: 1.75rem 0 .75rem;
    font-size: 1.1rem;
    color: #fff;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--hl-line);
}

/* Blazor's own validation output. Without this the messages render as default
   browser text on a dark background and are effectively invisible. */
.hl-page .validation-message,
.hl-page .validation-errors {
    color: #ffb3bd;
    font-size: .9rem;
    list-style: none;
    padding: 0;
    margin: .3rem 0 0;
}

/* --------------------------------- named per-photo failures (the AC) ---- */

/* EPIC #535: "if any photo fails to persist, the poster is told which". These
   filenames are the whole point, so they get real contrast, not a muted note. */
.hl-photo-failures {
    margin: .75rem 0 0;
    padding: .75rem .9rem;
    background: rgba(215, 38, 61, 0.14);
    border: 1px solid rgba(240, 64, 85, 0.45);
    border-radius: 10px;
    font-size: .92rem;
    line-height: 1.5;
}

.hl-photo-failures ul,
ul.hl-photo-failures {
    margin: .4rem 0 .4rem;
    padding-left: 1.1rem;
}

.hl-photo-failures li {
    margin-bottom: .3rem;
    min-width: 0;
    /* A filename off a phone can be long and unbroken (IMG_20261214_193045.jpg
       or worse) — it must wrap rather than run off the screen. */
    overflow-wrap: anywhere;
}

.hl-photo-failures strong { color: #fff; }

.hl-success-photos {
    font-weight: 600;
    color: var(--hl-green);
}

.hl-back { margin-top: 2rem; font-size: .95rem; }

/* ---------------------------------------------------------- wider screens -- */

@media (min-width: 40rem) {
    .hl-page { padding: 1.5rem 1.5rem 4rem; }

    .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* First photo spans the full width — it is the hero. */
    .hl-gallery-hero { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

    .hl-detail-actions { flex-direction: row; align-items: center; }

    .hl-btn-submit { width: auto; min-width: 16rem; }
}

@media (min-width: 64rem) {
    .hl-page { padding: 2rem 2rem 5rem; }

    .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hl-detail { max-width: 64rem; margin: 0 auto; }
}

/* Respect a reader who has asked for less motion — the only transitions here are
   hover colours, but be explicit rather than leaving it to chance. */
@media (prefers-reduced-motion: reduce) {
    .hl-page * { transition: none !important; animation: none !important; }
}