/* ==========================================================================
   LIVZO — Location guide (locations.php, city and sector)

   Class prefix: lz-guide-* / lz-guide__*. Deliberately NOT lz-dir-* (the city index and
   Explore Societies), nor lz-loc-* (the homepage location module), lz-exp-*, lz-qa-*,
   lz-sp-* or lz-cmp-*.

   Contents
     1.  Shell + section scaffolding
     2.  Hero
     3.  Search + suggestions
     4.  Quick stats
     5.  Breadcrumb
     6.  Section head
     7.  Sector strip
     8.  Featured societies
     9.  At a glance + amenities
     10. Recent experiences
     11. Popular questions
     12. Compare CTA
     13. Living in <place>
     14. Empty / error / note
     15. Reveal + reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Shell + section scaffolding
   ========================================================================== */

.lz-guide {
    position: relative;
    padding-bottom: clamp(44px, 6vw, 84px);
}

.lz-guide-block {
    padding-top: clamp(36px, 4.6vw, 60px);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.lz-guide-hero {
    position: relative;
    /* The header is fixed, so the first section owns the offset — otherwise the back link
       and breadcrumb sit behind it. */
    padding-top: calc(var(--lz-header-h) + clamp(10px, 1.6vw, 26px));
    padding-bottom: clamp(20px, 2.6vw, 30px);
    overflow: hidden;
}

/* The hero clips its own decorations, which also clipped the search field's suggestion
   panel — it is absolutely positioned inside the section, so it was cut at the section's
   bottom edge and only the first row showed. Unclip only while the panel is open, so the
   resting render stays exactly as it was (the same fix the experiences hero carries). */
.lz-guide-hero:has(.lz-popover:not([hidden])) {
    overflow: visible;
}

.lz-guide-hero__wash {
    position: absolute;
    inset: 0 0 auto;
    height: 82%;
    background-image: linear-gradient(168deg, #FAF8FF 0%, rgba(251, 250, 248, 0) 76%);
    pointer-events: none;
}

.lz-guide-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

@media (min-width: 980px) {
    .lz-guide-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.lz-guide-hero__copy { min-width: 0; }

.lz-guide-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--lz-body);
    font-size: 0.84rem;
    font-weight: 700;
    transition: color var(--lz-t-fast) var(--lz-ease);
}

.lz-guide-hero__back:hover { color: var(--lz-accent-700); }
.lz-guide-hero__back-ico { width: 15px; height: 15px; }

.lz-guide-hero__badge {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 6px 14px;
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lz-guide-hero__title {
    margin-top: 12px;
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    max-width: 22ch;
}

.lz-guide-hero__lead {
    margin-top: 12px;
    max-width: 52ch;
    color: var(--lz-body);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.6;
}

.lz-guide-hero__trail { margin-top: 18px; }

.lz-guide-hero__media {
    position: relative;
    display: block;
    min-width: 0;
}

.lz-guide-hero__halo {
    position: absolute;
    inset: 4% 0 0;
    border-radius: var(--lz-r-xl);
    background-image: radial-gradient(circle at 62% 38%, rgba(109, 74, 255, 0.2), transparent 66%);
    filter: blur(8px);
}

/* The city artwork blends into the light page instead of sitting in a hard rectangle. */
.lz-guide-hero__img {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: var(--lz-r-xl);
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* The hero's own callout. It sits on photography, so it carries its own contrast: a deep
   navy→violet glass card with a mint icon disc, lifted off the artwork with a hard shadow.
   It is decoration over the image — the same words are in the hero copy, never only here. */
.lz-guide-hero__overlay {
    position: absolute;
    left: 5%;
    bottom: 16%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 12px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--lz-r-lg);
    background-image: linear-gradient(140deg, rgba(33, 30, 89, 0.97) 0%, rgba(72, 46, 168, 0.95) 100%);
    box-shadow: 0 22px 44px -20px rgba(11, 27, 51, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    animation: lzGuideOverlayIn 0.8s var(--lz-ease-out) both,
        lzGuideOverlayFloat 6.5s var(--lz-ease) 1.1s infinite;
}

/* A slow sheen crossing the card, so it reads as live without the text ever moving. */
.lz-guide-hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.24) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: lzGuideOverlaySheen 5s var(--lz-ease) 1.6s infinite;
    pointer-events: none;
}

/* `icon()` puts the class on the <svg> itself, so the disc needs its own wrapper (gotcha 36). */
.lz-guide-hero__overlay-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 13px;
    background-image: linear-gradient(150deg, var(--lz-band-success-text) 0%, var(--lz-accent) 100%);
    box-shadow: 0 10px 20px -10px rgba(5, 150, 105, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
}

.lz-guide-hero__overlay-ico .lz-icon { width: 20px; height: 20px; }

.lz-guide-hero__overlay-body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.lz-guide-hero__overlay strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.lz-guide-hero__overlay-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

@keyframes lzGuideOverlayIn {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes lzGuideOverlayFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes lzGuideOverlaySheen {
    0% { transform: translateX(-130%); }
    60%, 100% { transform: translateX(130%); }
}

/* A sector page is a narrower place than a city — keep the hero short. */
.lz-guide-hero--sector .lz-guide-hero__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

/* ==========================================================================
   3. Search + suggestions
   ========================================================================== */

.lz-guide-search {
    position: relative;
    max-width: 560px;
    margin-top: 22px;
}

.lz-guide-search__form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 7px 7px 14px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-2);
    transition: border-color var(--lz-t-fast) var(--lz-ease), box-shadow var(--lz-t-fast) var(--lz-ease);
}

.lz-guide-search__form:focus-within {
    border-color: var(--lz-accent);
    box-shadow: var(--lz-sh-accent);
}

.lz-guide-search__ico { flex: none; color: var(--lz-muted); }

.lz-guide-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--lz-navy);
    font-size: 0.95rem;
    outline: none;
}

.lz-guide-search__input::placeholder { color: var(--lz-muted); }
.lz-guide-search__btn { flex: none; padding: 11px 22px; }

/* The suggestion panel is the site's shared one (search.css, .lz-popover--suggest): the
   dropdown the homepage and Resident Experiences render. It hangs off the search block and
   matches its width, so it can never widen the page on a narrow phone. */
.lz-guide-search .lz-popover--suggest {
    width: 100%;
    max-height: min(420px, 62vh);
}

/* The shared popover's quiet tones (`--lz-muted`, 3.84:1 on white) are below AA for the small
   text they carry, and here they also sit on this hero's wash rather than the surface they
   were measured against — a reused component's own colours are not guaranteed in a new
   context, so they are scoped, not changed for every page. */
.lz-guide-search .lz-popover__head,
.lz-guide-search .lz-popover__state,
.lz-guide-search .lz-option__meta,
.lz-guide-search .lz-option__tag {
    color: var(--lz-body);
}

/* ==========================================================================
   4. Quick stats
   ========================================================================== */

.lz-guide-stats { padding-top: clamp(18px, 2.4vw, 28px); }

.lz-guide-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 760px) {
    .lz-guide-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lz-guide-stat {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 24px 18px 22px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F4FBF7 100%);
    box-shadow: var(--lz-sh-2);
    text-align: center;
    transition: border-color var(--lz-t) var(--lz-ease), box-shadow var(--lz-t) var(--lz-ease);
}

.lz-guide-stat:hover {
    border-color: rgba(5, 150, 105, 0.34);
    box-shadow: 0 20px 40px -22px rgba(5, 150, 105, 0.55), var(--lz-sh-2);
}

/* The icon sits in an accent circle that pulses a soft expanding ring. The card itself stays
   light — the green is only the disc, the ring and the shadow. `icon()` puts the class on the
   <svg>, so the circle needs this wrapper (gotcha 36). */
.lz-guide-stat__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-image: linear-gradient(150deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    box-shadow: 0 14px 26px -14px rgba(5, 150, 105, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff;
    transition: transform var(--lz-t) var(--lz-ease-out);
}

.lz-guide-stat:hover .lz-guide-stat__ico { transform: scale(1.06); }

.lz-guide-stat__ico .lz-icon { width: 26px; height: 26px; }

.lz-guide-stat__ico::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--lz-accent);
    border-radius: 50%;
    animation: lzGuideStatPulse 2.8s var(--lz-ease) infinite both;
    pointer-events: none;
}

/* Staggered so the row breathes instead of blinking in unison. */
.lz-guide-stat:nth-child(2) .lz-guide-stat__ico::after { animation-delay: 0.4s; }
.lz-guide-stat:nth-child(3) .lz-guide-stat__ico::after { animation-delay: 0.8s; }
.lz-guide-stat:nth-child(4) .lz-guide-stat__ico::after { animation-delay: 1.2s; }

@keyframes lzGuideStatPulse {
    0% { opacity: 0.6; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.5); }
}

.lz-guide-stat__value {
    color: var(--lz-navy);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.lz-guide-stat__label {
    color: var(--lz-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   5. Breadcrumb
   ========================================================================== */

.lz-guide-crumbs { min-width: 0; }

.lz-guide-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.lz-guide-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lz-guide-crumb__link {
    color: var(--lz-body);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color var(--lz-t-fast) var(--lz-ease);
}

.lz-guide-crumb__link:hover { color: var(--lz-accent-700); }

.lz-guide-crumb__sep {
    display: inline-flex;
    color: var(--lz-muted);
}

.lz-guide-crumb__sep .lz-icon { width: 13px; height: 13px; }

.lz-guide-crumb__current {
    color: var(--lz-navy);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ==========================================================================
   6. Section head
   ========================================================================== */

.lz-guide-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.lz-guide-head__title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

.lz-guide-head__lead {
    margin-top: 5px;
    color: var(--lz-body);
    font-size: 0.9rem;
}

.lz-guide-head__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lz-accent-700);
    font-size: 0.86rem;
    font-weight: 800;
}

.lz-guide-head__action:hover { color: var(--lz-accent); }
.lz-guide-head__action-ico { width: 15px; height: 15px; transition: transform var(--lz-t-fast) var(--lz-ease); }
.lz-guide-head__action:hover .lz-guide-head__action-ico { transform: translateX(3px); }

/* ==========================================================================
   7. Sector strip
   ========================================================================== */

.lz-guide-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.lz-guide-sectors {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    width: max-content;
    min-width: 100%;
}

.lz-guide-sector-item { min-width: 0; }

.lz-guide-sector {
    display: grid;
    width: 250px;
    overflow: hidden;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    transition: transform var(--lz-t) var(--lz-ease), box-shadow var(--lz-t) var(--lz-ease),
        border-color var(--lz-t) var(--lz-ease);
}

.lz-guide-sector:hover {
    transform: translateY(-4px);
    border-color: var(--lz-accent-soft-2);
    box-shadow: var(--lz-sh-3);
}

.lz-guide-sector.is-active { border-color: var(--lz-accent-soft-2); }

.lz-guide-sector__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--lz-bg-2);
}

.lz-guide-sector__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lz-t-slow) var(--lz-ease-out);
}

.lz-guide-sector:hover .lz-guide-sector__img { transform: scale(1.04); }

.lz-guide-sector__sheen {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.34), transparent 52%);
    pointer-events: none;
}

.lz-guide-sector__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

.lz-guide-sector__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.lz-guide-sector__label {
    color: var(--lz-navy);
    font-size: 0.94rem;
    font-weight: 800;
}

.lz-guide-sector__meta {
    display: block;
    margin-top: 2px;
    color: var(--lz-body);
    font-size: 0.78rem;
}

.lz-guide-sector__arrow { flex: none; color: var(--lz-accent); }
.lz-guide-sector__arrow .lz-icon { width: 17px; height: 17px; transition: transform var(--lz-t-fast) var(--lz-ease); }
.lz-guide-sector:hover .lz-guide-sector__arrow .lz-icon { transform: translateX(3px); }

/* Wide screens fit the whole row (as the design does); below that it is one swipeable
   strip, which is why the wrapper gains tabindex only while it really overflows.
   This must stay AFTER the base `.lz-guide-sector` rule, or that rule wins. */
@media (min-width: 1200px) {
    .lz-guide-sectors {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        width: auto;
        min-width: 0;
    }

    .lz-guide-sector { width: 100%; }
}

/* ==========================================================================
   8. Featured societies
   ========================================================================== */

.lz-guide-societies {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@media (min-width: 640px) {
    .lz-guide-societies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .lz-guide-societies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lz-guide-soc { min-width: 0; }
.lz-guide-soc .lz-society { height: 100%; }

/* ==========================================================================
   9. At a glance + amenities
   ========================================================================== */

.lz-guide-glance {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@media (min-width: 900px) {
    .lz-guide-glance { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.lz-guide-glance__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lz-guide-glance__item {
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-guide-glance__ico { color: var(--lz-accent); margin-bottom: 4px; }

.lz-guide-glance__value {
    color: var(--lz-navy);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lz-guide-glance__label {
    color: var(--lz-body);
    font-size: 0.78rem;
    font-weight: 600;
}

.lz-guide-amenities {
    padding: 20px;
    border: 1px solid rgba(109, 74, 255, 0.16);
    border-radius: var(--lz-r-lg);
    background-image: linear-gradient(155deg, #FAF8FF 0%, #F3EFFF 100%);
}

.lz-guide-amenities__title { font-size: 1.05rem; }

.lz-guide-amenities__lead {
    margin-top: 4px;
    color: var(--lz-body);
    font-size: 0.82rem;
}

.lz-guide-amenities__list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.lz-guide-amenity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-md);
    background-color: rgba(255, 255, 255, 0.86);
}

.lz-guide-amenity__ico { flex: none; color: var(--lz-accent-700); }
.lz-guide-amenity__body { display: grid; gap: 1px; min-width: 0; }

.lz-guide-amenity__label {
    color: var(--lz-navy);
    font-size: 0.86rem;
    font-weight: 700;
}

.lz-guide-amenity__count { color: var(--lz-body); font-size: 0.74rem; }

/* ==========================================================================
   10. Recent experiences
   ========================================================================== */

.lz-guide-experiences {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 700px) {
    .lz-guide-experiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .lz-guide-experiences { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The shared review card, compact: no society photo — this is a preview row. */
.lz-guide-experiences .lz-exp-card {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.lz-guide-experiences .lz-exp-card__media { display: none; }

/* ==========================================================================
   11. Popular questions
   ========================================================================== */

.lz-guide-questions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (min-width: 900px) {
    .lz-guide-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lz-guide-question { min-width: 0; }

.lz-guide-question__link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    transition: transform var(--lz-t-fast) var(--lz-ease), border-color var(--lz-t-fast) var(--lz-ease),
        box-shadow var(--lz-t-fast) var(--lz-ease);
}

.lz-guide-question__link:hover {
    transform: translateY(-3px);
    border-color: var(--lz-accent-soft-2);
    box-shadow: var(--lz-sh-2);
}

.lz-guide-question__ico { flex: none; color: var(--lz-accent); }
.lz-guide-question__body { display: grid; gap: 7px; min-width: 0; }

.lz-guide-question__text {
    color: var(--lz-navy);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}

.lz-guide-question__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lz-guide-question__society { color: var(--lz-body); font-size: 0.76rem; }
.lz-guide-question__arrow { flex: none; margin-left: auto; color: var(--lz-muted); }
.lz-guide-question__arrow .lz-icon { width: 16px; height: 16px; }

.lz-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--lz-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
}

.lz-guide-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.lz-guide-pill--green { background-color: var(--lz-green-soft); color: var(--lz-green-600); }
.lz-guide-pill--amber { background-color: var(--lz-amber-soft); color: var(--lz-amber-700, #B2760E); }

/* ==========================================================================
   12. Compare CTA
   ========================================================================== */

.lz-guide-compare { padding-top: clamp(38px, 4.8vw, 62px); }

.lz-guide-compare__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
    padding: clamp(24px, 3.4vw, 40px);
    border-radius: var(--lz-r-xl);
    background-image: linear-gradient(150deg, #F3EFFF 0%, #EDE7FF 100%);
}

@media (min-width: 860px) {
    .lz-guide-compare__card { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; }
}

.lz-guide-compare__body { position: relative; min-width: 0; }
.lz-guide-compare__title { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }

.lz-guide-compare__lead {
    margin-top: 8px;
    max-width: 48ch;
    color: var(--lz-body);
    font-size: 0.94rem;
    line-height: 1.6;
}

.lz-guide-compare__btn { margin-top: 18px; }
.lz-guide-compare__ico { width: 16px; height: 16px; }

.lz-guide-compare__art {
    position: relative;
    display: none;
}

@media (min-width: 860px) {
    .lz-guide-compare__art { display: block; }
}

.lz-guide-compare__img { width: 100%; height: auto; }

/* ==========================================================================
   13. Living in <place>
   ========================================================================== */

.lz-guide-living {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 700px) {
    .lz-guide-living { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .lz-guide-living { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lz-guide-living__item {
    padding: 20px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-guide-living__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: var(--lz-r-sm);
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-guide-living__title { font-size: 0.98rem; }

.lz-guide-living__text {
    margin-top: 6px;
    color: var(--lz-body);
    font-size: 0.84rem;
    line-height: 1.55;
}

/* ==========================================================================
   14. Empty / error / note
   ========================================================================== */

.lz-guide-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: clamp(26px, 3.6vw, 40px) 20px;
    border: 1px dashed var(--lz-line-2);
    border-radius: var(--lz-r-lg);
    background-color: var(--lz-surface);
    text-align: center;
}

.lz-guide-empty__art {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-guide-empty__title { font-size: 1.05rem; }

.lz-guide-empty__text {
    max-width: 44ch;
    color: var(--lz-body);
    font-size: 0.9rem;
}

.lz-guide-state { padding: clamp(40px, 6vw, 80px) 0; }

.lz-guide-state__card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: clamp(30px, 4vw, 48px) 20px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-xl);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    text-align: center;
}

.lz-guide-state__art {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-guide-state__title { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.lz-guide-state__text { max-width: 46ch; color: var(--lz-body); font-size: 0.92rem; }
.lz-guide-state__card .lz-btn { margin-top: 12px; }

.lz-guide-note {
    margin-top: 26px;
    padding: 12px 16px;
    border: 1px dashed var(--lz-line-2);
    border-radius: var(--lz-r-md);
    color: var(--lz-body);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* ==========================================================================
   15. Reveal + reduced motion
   ========================================================================== */

.has-js .lz-guide [data-lz-inview] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--lz-t-slow) var(--lz-ease-out), transform var(--lz-t-slow) var(--lz-ease-out);
    transition-delay: var(--lz-delay, 0ms);
}

.has-js .lz-guide [data-lz-inview].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .has-js .lz-guide [data-lz-inview] {
        opacity: 1;
        transform: none;
    }

    .lz-guide-sector,
    .lz-guide-sector__img,
    .lz-guide-question__link,
    .lz-guide-head__action-ico,
    .lz-guide-crumb__link,
    .lz-guide-search__form { transition: none; }

    .lz-guide-sector:hover,
    .lz-guide-question__link:hover { transform: none; }

    .lz-guide-sector:hover .lz-guide-sector__img { transform: none; }

    /* The callout's entrance, float and sheen are all animation-based (gotcha 24). */
    .lz-guide-hero__overlay,
    .lz-guide-hero__overlay::after,
    .lz-guide-stat__ico::after { animation: none; }
}