/* =====================================================================
   LooseMap — Home page sections (States panels, Cities rail, Top Stories)
   Uses the :root tokens already defined in layouts/app.blade.php
   (--eh-ink, --eh-gold, --eh-cream)
   ===================================================================== */

/* ---------- Shared section header ---------- */
.eh-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.75rem; }
.eh-eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--eh-gold); font-weight: 600; margin-bottom: .35rem; }
.eh-link-arrow { font-weight: 600; font-size: .9rem; color: var(--eh-ink); text-decoration: none; white-space: nowrap; }
.eh-link-arrow i { display: inline-block; transition: transform .2s ease; }
.eh-link-arrow:hover { color: var(--eh-gold); }
.eh-link-arrow:hover i { transform: translateX(4px); }

/* =====================================================================
   1) STATES — expanding image panels
   ===================================================================== */
.eh-panels { display: flex; gap: 12px; height: 480px; }

.eh-panel {
    position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
    border-radius: 18px; color: #fff; text-decoration: none; background: #2d4739;
    transition: flex-grow .6s cubic-bezier(.2,.8,.2,1);
}
.eh-panel.is-active { flex-grow: 4.2; }
.eh-panel img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .9s ease;
}
.eh-panel.is-active img { transform: scale(1.05); }
.eh-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(10,15,20,.88) 0%, rgba(10,15,20,.15) 55%, rgba(10,15,20,.3) 100%);
}
.eh-panel-no {
    position: absolute; top: 16px; left: 18px; z-index: 2;
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; opacity: .9;
}

/* collapsed state: vertical name */
.eh-panel-vname {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px;
    display: flex; justify-content: center; transition: opacity .25s ease;
}
.eh-panel-vname span {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
    font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600;
}
.eh-panel.is-active .eh-panel-vname { opacity: 0; }

/* expanded state: details */
.eh-panel-body {
    position: absolute; z-index: 2; left: 26px; bottom: 26px; width: 400px; max-width: calc(100% - 52px);
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity .35s ease, transform .45s ease;
}
.eh-panel.is-active .eh-panel-body {
    opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s;
}
.eh-panel-body h3 { font-size: 1.9rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.eh-panel-meta { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--eh-gold); font-weight: 600; margin-bottom: .6rem; }
.eh-panel-body p { font-size: .92rem; opacity: .9; margin-bottom: 1rem; }
.eh-panel-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--eh-gold); color: var(--eh-ink); font-weight: 600; font-size: .85rem;
    padding: .5rem 1.1rem; border-radius: 50px;
}

/* tablet / mobile: horizontal snap slider, details always visible */
@media (max-width: 991.98px) {
    .eh-panels {
        height: auto; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .eh-panels::-webkit-scrollbar { display: none; }
    .eh-panel, .eh-panel.is-active { flex: 0 0 78%; height: 400px; scroll-snap-align: start; }
    .eh-panel-vname { display: none; }
    .eh-panel-body { opacity: 1; transform: none; pointer-events: auto; width: auto; left: 20px; right: 20px; bottom: 20px; max-width: none; }
    .eh-panel-body h3 { font-size: 1.5rem; }
    .eh-panel img, .eh-panel.is-active img { transform: none; }
}
@media (max-width: 575.98px) {
    .eh-panel, .eh-panel.is-active { flex-basis: 86%; height: 380px; }
}

/* =====================================================================
   2) TOP CITIES — dark band + arch cards in a scroll rail
   ===================================================================== */
.eh-cities-band { background: var(--eh-ink); color: #fff; padding: 4.5rem 0; overflow: hidden; }
.eh-cities-band .eh-section-title { color: #fff; }
.eh-cities-band .eh-section-sub { color: #9fb0bf; }
.eh-cities-band .eh-link-arrow { color: #fff; }
.eh-cities-band .eh-link-arrow:hover { color: var(--eh-gold); }

.eh-rail-nav { display: flex; gap: .5rem; }
.eh-rail-nav button {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
    background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.eh-rail-nav button:hover { background: var(--eh-gold); border-color: var(--eh-gold); color: var(--eh-ink); }

.eh-rail {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 2px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.eh-rail::-webkit-scrollbar { display: none; }

.eh-rail-card {
    position: relative; flex: 0 0 236px; aspect-ratio: 3/4; scroll-snap-align: start;
    border-radius: 118px 118px 18px 18px; overflow: hidden; color: #fff; text-decoration: none;
    background: #1d2b38; transition: transform .3s ease;
}
.eh-rail-card:hover { transform: translateY(-6px); color: #fff; }
.eh-rail-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.eh-rail-card:hover img { transform: scale(1.07); }
.eh-rail-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(10,15,20,.92) 0%, rgba(10,15,20,.35) 45%, rgba(10,15,20,0) 70%);
}
.eh-rail-type {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
    background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3); border-radius: 50px; padding: .2rem .75rem;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.eh-rail-body { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; }
.eh-rail-no {
    display: block; font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 700; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); margin-bottom: .2rem;
}
.eh-rail-body h3 { font-size: 1.25rem; margin: 0; color: #fff; }
.eh-rail-state { font-size: .78rem; color: var(--eh-gold); font-weight: 600; letter-spacing: .04em; }
.eh-rail-desc {
    font-size: .8rem; opacity: 0; max-height: 0; overflow: hidden; margin: 0;
    transition: opacity .3s ease, max-height .35s ease, margin .3s ease;
}
.eh-rail-card:hover .eh-rail-desc { opacity: .9; max-height: 4.8em; margin-top: .4rem; }
@media (hover: none) {
    .eh-rail-desc { opacity: .85; max-height: 2.9em; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 575.98px) {
    .eh-cities-band { padding: 3rem 0; }
    .eh-rail-card { flex-basis: 200px; border-radius: 100px 100px 16px 16px; }
    .eh-rail-nav { display: none; }
}

/* =====================================================================
   3) TOP STORIES — magazine layout (1 lead + 4 compact)
   ===================================================================== */
.eh-story-lead {
    position: relative; display: block; height: 100%; min-height: 440px;
    border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; background: #2d4739;
}
.eh-story-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.eh-story-lead:hover img { transform: scale(1.04); }
.eh-story-lead::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(10,15,20,.92) 0%, rgba(10,15,20,.3) 55%, rgba(10,15,20,.1) 100%);
}
.eh-story-flag {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    background: var(--eh-gold); color: var(--eh-ink); font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 50px;
}
.eh-story-lead-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.75rem; }
.eh-story-lead-body h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.25; margin: .5rem 0; color: #fff; }
.eh-story-lead-body p { font-size: .95rem; opacity: .88; margin-bottom: .75rem; max-width: 560px; }
.eh-story-type { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--eh-gold); }
.eh-story-meta { font-size: .8rem; opacity: .85; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

.eh-story-stack { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.eh-story-mini {
    flex: 1 1 0; display: flex; gap: 14px; align-items: center;
    background: #fff; border-radius: 16px; padding: 10px; color: var(--eh-ink); text-decoration: none;
    box-shadow: 0 4px 18px rgba(20,32,43,.08); transition: transform .2s ease, box-shadow .2s ease;
}
.eh-story-mini:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(20,32,43,.14); color: var(--eh-ink); }
.eh-story-thumb { flex: 0 0 120px; align-self: stretch; min-height: 88px; border-radius: 12px; overflow: hidden; background: #e9ecef; }
.eh-story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eh-story-mini h4 {
    font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; line-height: 1.35; margin: .15rem 0 .35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eh-story-mini .eh-story-type { color: #b07d1a; }
.eh-story-mini .eh-story-meta { color: #6b7280; opacity: 1; font-size: .75rem; }

@media (max-width: 991.98px) {
    .eh-story-lead { min-height: 360px; }
    .eh-story-mini { flex: none; }
}
@media (max-width: 575.98px) {
    .eh-story-lead-body { padding: 1.1rem; }
    .eh-story-thumb { flex-basis: 96px; }
}

/* =====================================================================
   4) LATEST STORIES — filterable horizontal feed
   ===================================================================== */
.ls-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: 1.5rem; scrollbar-width: none; }
.ls-chips::-webkit-scrollbar { display: none; }
.ls-chip {
    white-space: nowrap; border: 1px solid rgba(20,32,43,.15); background: transparent; color: var(--eh-ink);
    font-size: .85rem; font-weight: 600; padding: .4rem 1.05rem; border-radius: 50px; transition: all .2s ease;
}
.ls-chip:hover { border-color: var(--eh-gold); }
.ls-chip.is-active { background: var(--eh-ink); border-color: var(--eh-ink); color: #fff; }

.ls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.ls-card {
    display: flex; gap: 16px; align-items: stretch; background: #fff; border-radius: 18px; padding: 12px;
    color: var(--eh-ink); text-decoration: none; box-shadow: 0 4px 18px rgba(20,32,43,.07);
    transition: transform .22s ease, box-shadow .22s ease;
}
.ls-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,32,43,.13); color: var(--eh-ink); }
.ls-card.ls-hidden { display: none; }
.ls-thumb { flex: 0 0 38%; max-width: 230px; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #e9ecef; align-self: flex-start; }
.ls-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.ls-card:hover .ls-thumb img { transform: scale(1.06); }
.ls-body { display: flex; flex-direction: column; min-width: 0; padding: .1rem .25rem .1rem 0; }
.ls-type { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #b07d1a; margin-bottom: .3rem; }
.ls-body h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; margin: 0 0 .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-excerpt { font-size: .85rem; color: #5b6572; margin: 0 0 .6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .75rem; color: #6b7280; }

@media (max-width: 991.98px) {
    .ls-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 575.98px) {
    .ls-card { gap: 12px; padding: 10px; border-radius: 16px; }
    .ls-thumb { flex-basis: 108px; aspect-ratio: 1/1; }
    .ls-body h3 { font-size: .98rem; }
    .ls-excerpt { display: none; }
}

/* =====================================================================
   5) DISCOVER BY CATEGORY — mood tiles
   ===================================================================== */
.dc-band { background: #fff; padding: 4rem 0; }
.dc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dc-tile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px;
    padding: 1.35rem; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none;
    background-size: cover; background-position: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
a.dc-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(20,32,43,.25); color: #fff; }
.dc-tone-0 { background-color: #2d4739; background-image: linear-gradient(150deg, #1f3a2e 0%, #3a5c49 100%); }
.dc-tone-1 { background-color: #8a4a2b; background-image: linear-gradient(150deg, #5a2d1f 0%, #9a5a35 100%); }
.dc-tone-2 { background-color: #2b4a63; background-image: linear-gradient(150deg, #1d3448 0%, #3a6285 100%); }
.dc-tone-3 { background-color: #5c3b73; background-image: linear-gradient(150deg, #3d2650 0%, #77509a 100%); }
.dc-tile.has-image { background-image: none; }
.dc-tile.has-image::before { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transition: transform .8s ease; }
.dc-tile.has-image:hover::before { transform: scale(1.06); }
.dc-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,15,20,.55) 0%, rgba(10,15,20,0) 60%); }
.dc-watermark { position: absolute; right: -14px; bottom: -22px; font-size: 9.5rem; line-height: 1; opacity: .13; transform: rotate(-12deg); transition: transform .5s ease, opacity .5s ease; z-index: 1; }
a.dc-tile:hover .dc-watermark { transform: rotate(-4deg) scale(1.1); opacity: .2; }
.dc-icon { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--eh-gold); }
.dc-body { position: relative; z-index: 2; }
.dc-body h3 { font-size: 1.5rem; margin: 0 0 .3rem; color: #fff; }
.dc-body p { font-size: .85rem; opacity: .88; margin: 0 0 .8rem; }
.dc-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--eh-gold); }
.dc-go { width: 38px; height: 38px; border-radius: 50%; background: var(--eh-gold); color: var(--eh-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform .25s ease; }
a.dc-tile:hover .dc-go { transform: rotate(45deg); }

@media (max-width: 991.98px) {
    .dc-grid { grid-template-columns: repeat(2, 1fr); }
    .dc-tile { min-height: 230px; }
}
@media (max-width: 575.98px) {
    .dc-band { padding: 2.75rem 0; }
    .dc-grid { gap: 12px; }
    .dc-tile { min-height: 200px; padding: 1rem; border-radius: 18px; }
    .dc-body h3 { font-size: 1.15rem; }
    .dc-body p { display: none; }
    .dc-watermark { font-size: 6.5rem; }
}