/*
 * Estate theme — the "modern property portal" look.
 *
 * What actually produces that look is not clever CSS: it is large photographs
 * at consistent aspect ratios, generous vertical rhythm, one accent colour used
 * sparingly, and shadows soft enough to read as depth rather than decoration.
 * Everything below is in service of those four things.
 *
 * Per-site values still arrive as custom properties from Site::themeTokens(),
 * so an agency can recolour this without touching a stylesheet and there is
 * still no build step.
 */

:root {
    /*
     * The eight below are design TOKENS: the <style> block the layout writes
     * comes after this file, so what an agency chose — or, when they have
     * chosen nothing, config/theme-tokens.php — decides them and these values
     * are only the fallback for a token that arrives blank. They are written
     * here as what the platform actually ships, not as a second opinion: a
     * fallback that disagrees is a design nobody ever sees until the day it
     * appears. A different STARTING point for this theme goes in that config's
     * `theme_defaults`, which is where the font below comes from.
     */
    --brand: #1f4b3f;
    --brand-ink: #ffffff;
    --accent: #c2703d;
    --radius: 10px;
    --font: Roboto, system-ui, sans-serif;
    --heading-weight: 600;
    --ink: #1c1c1c;
    --surface: #ffffff;

    /*
     * Everything else on the page is DERIVED from those — see the @supports
     * block under this one, which is where the mixing is actually done. What
     * is here is the same ramp worked out for the colours that ship, for a
     * browser too old to mix: a custom property holding an unsupported
     * function parses, so it fails only when something READS it, and the
     * failure is `--surface-dark` unset — a transparent footer with near-white
     * text on it. A fallback the cascade can choose between is the one way to
     * make that impossible, and @supports is how the cascade is given one.
     */
    --ink-muted: #595959;
    --line: #e2e4e4;
    --surface-alt: #f4f6f6;
    --surface-dark: #142327;
    --ink-on-dark: #e3e5e5;
    --ink-on-dark-muted: #afb4b5;
    --shadow-ink: #1d2624;
    /*
     * The one pair guaranteed to read on the second colour. `.badge-accent` and
     * the recommended rail both print a word on it, and one of them printed it
     * in white: 3.7:1 on the terracotta that ships, which is a label somebody
     * has to lean in to read.
     */
    --accent-ink: #1a1205;

    /*
     * 1460 = 1430 of content plus the 15px gutter on each side. The container
     * is measured border-box, so widening the gutter narrows the content
     * rather than pushing the container past this.
     */
    --max: 1460px;

    /* One spacing scale. Sections that each invent their own padding are what
       make a page feel assembled rather than designed. */
    /* xs and sm held the same .5rem, so every rule choosing between them was
       expressing a difference that was not on the screen. */
    --gap-xs: .375rem;
    --gap-sm: 0.5rem;
    --gap: 1.5rem;
    --gap-lg: 2.5rem;
    --section-gap: 4rem;

    --shadow-sm: 0 1px 2px rgb(29 38 36 / .06), 0 1px 3px rgb(29 38 36 / .1);
    --shadow: 0 4px 6px -1px rgb(29 38 36 / .07), 0 10px 24px -6px rgb(29 38 36 / .12);
    --shadow-lg: 0 20px 40px -12px rgb(29 38 36 / .22);
}

/*
 * The ramp, mixed from the three colours the agency actually chose.
 *
 * The greys, the hairlines, the dark bands and the shadows used to be fixed —
 * #64748b, #e6eaf0, #0d1420, shadows tinted navy — a slate ramp drawn for the
 * blue this theme used to declare and never rendered. An agency picks a green,
 * and then the ink is warm, the buttons are green, and every line, caption,
 * footer and shadow on the page is still faintly blue: two palettes stacked,
 * which is what a page looks like when nobody chose. Mixed instead, a green
 * agency gets green-shadowed cards and a blue one blue, and a site whose page
 * background is dark gets light hairlines rather than pale ones nobody can see.
 *
 * One grey stays a number: --ink-muted is #595959 on all four themes, asserted
 * in SiteConfigTest, because a subtitle is the same line on the same white in
 * each of them.
 */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --line: color-mix(in srgb, var(--brand) 5%, color-mix(in srgb, var(--ink) 8%, var(--surface)));
        --surface-alt: color-mix(in srgb, var(--brand) 5%, var(--surface));
        --surface-dark: color-mix(in srgb, var(--brand) 25%, #10161f);

        /* Light ink for the dark bands, mixed off that same surface so the
           footer's captions carry the agency's colour too. */
        --ink-on-dark: color-mix(in srgb, #fff 88%, var(--surface-dark));
        --ink-on-dark-muted: color-mix(in srgb, #fff 66%, var(--surface-dark));

        /*
         * A near-black with a trace of the brand in it, so a shadow reads as
         * the page's own depth rather than as grey borrowed from somewhere
         * else. Not the brand alone: at these opacities a saturated colour
         * reads as a smudge rather than as a shadow.
         */
        --shadow-ink: color-mix(in srgb, var(--ink) 78%, var(--brand));

        --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
        --shadow: 0 4px 6px -1px color-mix(in srgb, var(--shadow-ink) 7%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
        --shadow-lg: 0 20px 40px -12px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    line-height: 1.15;
    margin: 0 0 var(--gap-xs);
    font-weight: var(--heading-weight);
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--gap-sm); }
.muted { color: var(--ink-muted); }
.plain { list-style: none; margin: 0; padding: 0; }

/*
 * The gutter is padding rather than a narrower width, so it survives on a
 * phone: `min(100% - 2.5rem, ...)` gave a wide screen 1280 of content and a
 * 360px screen 320, but this keeps 15px either side at every size and lets the
 * content take whatever is left.
 */
.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: 15px; }

.skip {
    position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 100; }

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

/*
 * One ring for everything a keyboard can reach. The theme had two — the tab
 * strip and the explore tiles — so every link, button, field, menu entry and
 * page number on the site was reachable and invisible while you were on it.
 *
 * `:where()` adds no specificity, so a control that wants its own focus
 * treatment still wins without having to out-shout this.
 */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/*
 * The ring is drawn OUTSIDE the element, so on a dark band it lands on the
 * band — where the brand colour is often what the band is made of. White reads
 * on all of them. The overlay header is excluded once it turns solid, because
 * by then the page behind it is white again.
 */
:where(.band-dark, .site-footer, .trio-panel, .explore-tile, .recommended-card, .site-header.is-overlay:not(.is-stuck))
    :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline-color: #fff;
}

/* A photograph fills its card to the edges and the card clips what overflows,
   so these two draw the ring inside themselves or it is cropped away. */
.card-media-link:focus-visible,
.gallery-tile:focus-visible { outline-offset: -3px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn, button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--brand-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .15s ease, filter .15s ease;
}

/*
 * Two things happen under the cursor, not three. The button also lifted a
 * pixel, which on a page where every card already grows its photograph and
 * every tile lightens is one animation too many: nothing is emphasised when
 * everything moves.
 */
.btn:hover, button[type="submit"]:hover {
    text-decoration: none;
    filter: brightness(1.07);
    box-shadow: var(--shadow);
}

.btn-ghost {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Header — transparent over a hero, solid everywhere else
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--gap);
    min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand:hover { text-decoration: none; }

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 700;
}

.nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--gap); font-size: .95rem; }
.nav a { color: var(--ink-muted); font-weight: 500; }
.nav a:hover { color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   Hero — full bleed photograph, dark scrim, search card floating over it
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    place-items: center;
    /* Five per cent off the original 420 / 62vh / 680. */
    min-height: clamp(399px, 58.9vh, 646px);
    padding: var(--section-gap) 0 calc(var(--section-gap) + 2rem);
    color: #fff;
    text-align: center;
    background-image: var(--hero-image, none);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-dark);
    /*
     * The base draws a hairline under the hero, which is right where the hero
     * is a pale band (minimal, editorial) and separates it from the page. Here
     * it is a full-bleed photograph, and the line was a pale scratch across
     * the bottom of it — invisible for as long as the page below was white,
     * and a stripe the moment the section under it was given a colour. bold
     * turns it off for the same reason: a hero that paints itself needs
     * nothing drawn under it.
     */
    border-bottom: 0;
}

/*
 * The scrim is what makes white text readable over an unknown photograph. An
 * agency will upload something bright and something dark in the same week, so
 * the theme cannot assume either.
 */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(9 14 24 / .55) 0%, rgb(9 14 24 / .35) 45%, rgb(9 14 24 / .7) 100%);
}

.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.hero-sub { font-size: clamp(1rem, .9rem + .5vw, 1.2rem); opacity: .92; max-width: 46ch; margin-inline: auto; }

.hero-stats { margin-top: var(--gap); font-size: .95rem; opacity: .9; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

main > section, .section { padding-block: var(--section-gap); }
.section-alt, .section-about { background: var(--surface-alt); }

/*
 * The space under the hero, carried by the section after it rather than by the
 * hero's own margin — a margin is transparent and would draw a white stripe
 * across a coloured band. Said again here because the rule above is `.section`
 * in this file, and it would otherwise win the tie against the base's.
 */
.hero + * { padding-top: calc(var(--section-gap) + var(--hero-gap)); }

/* The valuation band, 15% taller than the sections around it — see the base,
   where the same rule is written against minimal's own 2.5rem. */
.section.section-cta { padding-block: calc(var(--section-gap) * 1.15); }

.section > .wrap > h2,
.section-head h2 { text-align: center; }

/*
 * This theme used to draw a 56px brand rule under every section heading, and
 * then turned it off again at the foot of this file — where the suppression
 * still is, because it is what the base stylesheet's own is measured against.
 * The declaration has gone: two rules with the same selector, 1,900 lines
 * apart, where the second cancels the first, is a decision nobody can read off
 * the file. What it carried with it — the space under a heading — is set with
 * the suppression.
 */

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-sm); }
.section-head a { margin-left: auto; color: var(--brand); font-weight: 600; }
.section-more { text-align: center; margin-top: var(--gap-lg); }

/* --------------------------------------------------------------------------
   Listing cards
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* The card itself does not react: hovering a price or a line of text is not
   hovering the listing. The photograph does. */
.card-media:hover { box-shadow: var(--shadow); }

.card-media {
    position: relative;
    display: block;
    /* Fixed ratio is what makes a grid of agency photographs look deliberate
       rather than ragged — phone photos arrive in every proportion. */
    aspect-ratio: 3 / 2;
    background: var(--surface-alt);
    overflow: hidden;
}

.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-media:hover img { transform: scale(1.04); }

.card-media-empty {
    display: grid; place-items: center; height: 100%;
    color: var(--ink-muted); font-size: .9rem;
}

.card-badges { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .4rem; }

.badge {
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: rgb(255 255 255 / .92);
    color: var(--ink);
    backdrop-filter: blur(4px);
}

.badge-brand { background: var(--brand); color: var(--brand-ink); }
.badge-accent { background: var(--accent); color: var(--accent-ink); }

/* Half the vertical padding: the sides keep the theme's spacing scale, the top
   and bottom no longer add a card's worth of air to a grid of twelve. */
.card-body { padding: 12px var(--gap); }
.card-price { font-size: 17px; font-weight: 500; line-height: 17px; margin: .35rem 0 0; color: var(--brand); }
.card-title { font-size: 18px; font-weight: 500; line-height: 23px; margin: 0 0 .25rem; }
.card-title a:hover { color: var(--brand); text-decoration: none; }

.card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    padding-top: var(--gap-sm);
    font-size: .88rem;
    line-height: 30px;
    color: #595959;
}


/* --------------------------------------------------------------------------
   Category tiles and mosaic gallery
   -------------------------------------------------------------------------- */

.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/*
 * A category is a line, not a poster: a small photograph, the name, and how
 * many there are. The photograph earns its place by telling somebody which
 * kind of thing they are looking at, and it does not need half the page to do
 * that.
 */
.tile {
    display: flex; align-items: center; gap: .75rem;
    /* A floor rather than a fixed width: "Proprietate specială" needs more
       room than "Teren", and cards of one size would either crop the long name
       or leave the short one half empty. */
    min-width: 210px;
    padding: .5rem .95rem .5rem .5rem;
    border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
    background: var(--surface); color: var(--ink); text-decoration: none;
}
.tile:hover { text-decoration: none; border-color: var(--brand); }

/* The tint lives on the thumbnail now: an agency with no photographs still
   gets a deliberate-looking row rather than six empty squares. */
.tile-thumb {
    width: 70px; height: 70px; flex: none;
    border-radius: calc(var(--radius) - 2px); overflow: hidden;
}
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tile-label { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.tile-count { display: block; padding-top: 8px; font-weight: 400; font-size: .85rem; color: var(--ink-muted); }

/*
 * Mosaic: a few tiles span two rows so the grid stops reading as a spreadsheet.
 * Pure CSS — no masonry library, and it degrades to a plain grid on narrow
 * screens where the effect would be lost anyway.
 */
.mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 180px;
    gap: var(--gap-sm);
}

.mosaic > * { border-radius: var(--radius); overflow: hidden; }
.mosaic > *:nth-child(4n+1) { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
    .mosaic > *:nth-child(4n+1) { grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   Dark band
   -------------------------------------------------------------------------- */

.band-dark {
    background: var(--surface-dark);
    color: var(--ink-on-dark);
}

.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .muted { color: var(--ink-on-dark-muted); }

.band-grid { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }

.feature-list { display: grid; gap: var(--gap-sm); }

.feature-list li {
    display: flex;
    gap: .75rem;
    align-items: start;
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid rgb(255 255 255 / .1);
}

.feature-list li::before {
    content: "";
    flex: 0 0 8px;
    width: 8px; height: 8px;
    /* Level with the middle of the first line, which is 14px on 20 here — the
       dot is nudged down to it rather than sitting on the cap height. */
    margin-top: .45rem;
    border-radius: 50%;
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   Horizontal scrollers — agents, testimonials
   -------------------------------------------------------------------------- */

/*
 * scroll-snap instead of a carousel library: it works without JavaScript, it is
 * reachable by keyboard and touch for free, and it cannot break the page when a
 * script fails to load.
 */
.scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--gap-sm);
    scrollbar-width: thin;
}

.scroller > * { scroll-snap-align: start; }

@media (min-width: 900px) {
    .scroller { grid-auto-columns: minmax(280px, 1fr); }
}

.testimonial, .service {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--gap);
    box-shadow: var(--shadow-sm);
}

.band-dark .agent-tile, .band-dark .testimonial, .band-dark .service {
    background: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .12);
}

.testimonial blockquote { margin: 0 0 var(--gap-sm); font-size: 1.02rem; }
.testimonial figcaption { font-size: .9rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Stats, CTA, FAQ, prose
   -------------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); text-align: center; }
.stat strong { display: block; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); color: var(--brand); line-height: 1.1; }
.stat span { color: var(--ink-muted); }

/*
 * The valuation band is described once, in the base stylesheet: a dark surface
 * with the words on one side and a white button on the other. What used to be
 * here — the brand colour, centred, with the theme's underline under the
 * heading — is gone rather than overridden, because rules in this file win the
 * tie against that description and would have kept the old band on this theme
 * alone. `--surface-dark` is this theme's own, so the band takes its colour
 * from here anyway.
 */

/*
 * The list's width and its type are described once, in the base stylesheet.
 * What was here — a 780px measure and a 600 summary — is GONE rather than
 * overridden: rules in this file win the tie against that description, so
 * leaving them would have kept the old shape on this theme alone.
 */
/*
 * The padding, the white and the spacing between question and answer are the
 * base's now, like the rest of the list's shape; what is this theme's own is
 * the rule it draws around each card.
 */
.faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.faq summary { cursor: pointer; }

.prose { max-width: 72ch; }
/* This theme's own measure, said again for the free-text block that asks for
   the narrow one explicitly: the rule it has to beat is the page's, written
   two classes deep in the base, and 68ch there is that stylesheet's measure
   rather than this one's. */
.prose.prose-narrow { max-width: 72ch; }
.prose h2 { text-align: left; }

.about-grid { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.about-grid img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/*
 * No margin above it. The footer is a dark surface and the page behind it is
 * white, so a margin there is not space — it is a white band between two dark
 * things, and it read as a gap in the page rather than as breathing room. The
 * footer's own top padding is what separates it from what comes before.
 */
.site-footer { background: var(--surface-dark); color: var(--ink-on-dark-muted); padding-block: var(--section-gap) var(--gap-lg); }
.site-footer a { color: var(--ink-on-dark); }
/*
 * The layout of the footer is in minimal.css, which is loaded under every
 * theme. What belongs here is what this theme does differently: a dark
 * surface, so the headings are white and the rule across the bottom is a
 * lightened line rather than the page's own.
 */
.footer-title { color: #fff; font-weight: 600; margin-bottom: var(--gap-xs); }
.footer-about, .footer-legal { color: var(--ink-on-dark-muted); }
.footer-main { gap: var(--gap-lg) 3rem; }
.footer-legal { margin-top: var(--gap-lg); padding-top: var(--gap); border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Tabs — radio inputs and sibling selectors, no JavaScript
   -------------------------------------------------------------------------- */

.tab-input { position: absolute; opacity: 0; pointer-events: none; }

.tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-lg);
}

.tab-label {
    padding: .55rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tab-label:hover { border-color: var(--brand); color: var(--brand); }

.tab-panel { display: none; }

/*
 * nth-of-type counts per element type, so the inputs and the panels index
 * independently — which is why the panels are divs and the tab strip is a nav.
 */
/* Ten, because the strip is bounded at ten: a list written to three
   silently stops switching at the fourth tab. */
.tab-input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tab-input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tab-input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tab-input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
.tab-input:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5),
.tab-input:nth-of-type(6):checked ~ .tab-panel:nth-of-type(6),
.tab-input:nth-of-type(7):checked ~ .tab-panel:nth-of-type(7),
.tab-input:nth-of-type(8):checked ~ .tab-panel:nth-of-type(8),
.tab-input:nth-of-type(9):checked ~ .tab-panel:nth-of-type(9),
.tab-input:nth-of-type(10):checked ~ .tab-panel:nth-of-type(10) { display: block; }

.tab-input:nth-of-type(1):checked ~ .tab-list .tab-label:nth-of-type(1),
.tab-input:nth-of-type(2):checked ~ .tab-list .tab-label:nth-of-type(2),
.tab-input:nth-of-type(3):checked ~ .tab-list .tab-label:nth-of-type(3),
.tab-input:nth-of-type(4):checked ~ .tab-list .tab-label:nth-of-type(4),
.tab-input:nth-of-type(5):checked ~ .tab-list .tab-label:nth-of-type(5),
.tab-input:nth-of-type(6):checked ~ .tab-list .tab-label:nth-of-type(6),
.tab-input:nth-of-type(7):checked ~ .tab-list .tab-label:nth-of-type(7),
.tab-input:nth-of-type(8):checked ~ .tab-list .tab-label:nth-of-type(8),
.tab-input:nth-of-type(9):checked ~ .tab-list .tab-label:nth-of-type(9),
.tab-input:nth-of-type(10):checked ~ .tab-list .tab-label:nth-of-type(10) {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

/* Keyboard users must still see which tab has focus. */
.tab-input:focus-visible ~ .tab-list .tab-label { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Trio of closing calls to action
   -------------------------------------------------------------------------- */

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }

.trio-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--gap-xs);
    min-height: 260px;
    padding: var(--gap-lg) var(--gap);
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    background: var(--surface-dark) var(--panel-image, none) center / cover no-repeat;
}

.trio-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(9 14 24 / .25), rgb(9 14 24 / .8));
}

.trio-panel > * { position: relative; z-index: 1; }
.trio-panel h3 { color: #fff; font-size: 1.3rem; }
.trio-panel .btn { background: var(--surface); color: var(--ink); }

/* --------------------------------------------------------------------------
   Search page — filters, facets, results
   --------------------------------------------------------------------------
   minimal.css already gives these structure; what follows is only the look, so
   the search page belongs to the same design as the home page.
   -------------------------------------------------------------------------- */

.listing-head h1 { text-align: left; font-size: 37px; font-weight: 500; line-height: 37px; }
.listing-head .muted { font-size: 14px; line-height: 23px; }
.listing-head h1::after { display: none; }

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap-sm);
    align-items: end;
    padding: var(--gap);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.field { display: grid; gap: .3rem; }
.field > span, .field > label { font-size: .8rem; font-weight: 600; color: var(--ink-muted); }

.filters input, .filters select {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--ink);
}

.filters input:focus, .filters select:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--brand);
}

.field-row { display: flex; gap: var(--gap-sm); align-items: end; }

.sidebar, .listing-aside {
    align-self: start;
    padding: var(--gap);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}


.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    font-size: .85rem;
}

.chip:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }

/*
 * The selected one is already filled with the brand colour, so the hover rule
 * above was painting brand text onto a brand background and the label
 * disappeared. Same specificity as .chip.is-active and a later file, which is
 * why it won.
 */
.chip.is-active:hover { color: var(--brand-ink); }

/* Listing detail */
.listing-price { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); color: var(--brand); font-weight: 700; }
.gallery-main img { border-radius: var(--radius); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin-top: .5rem; }
.gallery-thumbs img { border-radius: calc(var(--radius) - 6px); aspect-ratio: 4/3; object-fit: cover; }
.map, .map-block { border-radius: var(--radius); overflow: hidden; }
.lead-form { display: grid; gap: var(--gap-sm); font-size: 13px; line-height: 18px; }

/*
 * The grid gap above already spaces the rows. Minimal has no gap and uses a
 * margin on each field instead, so inheriting both left every row separated by
 * the sum of the two.
 */
.lead-form .field, .lead-form .check { margin-bottom: 0; }
/*
 * Checkboxes and radios are excluded deliberately.
 *
 * `.lead-form input` and minimal's `.check input` have identical specificity,
 * and this file loads second — so the consent checkbox was being given
 * width:100% and 12px of padding. As a flex item it then claimed half the row,
 * which is what pushed the consent text into a narrow ragged column beside an
 * apparently floating box.
 */
.lead-form input:not([type="checkbox"], [type="radio"]),
.lead-form textarea,
.lead-form select {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}

.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: var(--gap-lg); }
.pagination a, .pagination span {
    padding: .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 4px);
}
.pagination .is-current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.breadcrumbs { font-size: .85rem; color: var(--ink-muted); margin-bottom: var(--gap-sm); }

/* Category tiles: a subtitle under the heading, and gradients rather than flat
   fills for the photo-less state, so an empty tile still reads as designed. */
.section-sub {
    text-align: center;
    max-width: 60ch;
    margin: calc(var(--gap-lg) * -1 + .25rem) auto var(--gap-lg);
    /* Same grey as minimal's, and for the same reason: this rule replaces that
       one wholesale, so leaving the colour out would put --ink-muted back. */
    color: #595959;
}

.tile-tint-0 { background: linear-gradient(140deg, #1b6ef3, #0d3f8f); }
.tile-tint-1 { background: linear-gradient(140deg, #16a394, #0b6058); }
.tile-tint-2 { background: linear-gradient(140deg, #f0a020, #b4650a); }
.tile-tint-3 { background: linear-gradient(140deg, #6366f1, #3730a3); }
.tile-tint-4 { background: linear-gradient(140deg, #ef6461, #a02c2a); }
.tile-tint-5 { background: linear-gradient(140deg, #0f1724, #33415c); }

/* --------------------------------------------------------------------------
   Listing photo mosaic
   --------------------------------------------------------------------------
   One large photo, two stacked beside it, three underneath — a 6-column grid
   with explicit areas rather than auto-placement, so the shape is the same
   every time instead of depending on how the browser flows the items.

   A listing with fewer than six photos gets its own set of areas. Reusing the
   six-tile grid and letting it come up short leaves holes in the mosaic, which
   reads as a broken page rather than as a small gallery.
   -------------------------------------------------------------------------- */

.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 28vw;
    gap: var(--gap-xs, .5rem);
}

.gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: calc(var(--radius) - 4px);
    background: var(--surface-alt);
    cursor: zoom-in;
}

.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile:hover { text-decoration: none; }

.gallery-badges { position: absolute; top: .8rem; left: .8rem; z-index: 1; display: flex; gap: .4rem; }

/* The count over the last tile: what tells the visitor there is more behind. */
.gallery-more {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: .5rem;
    background: rgb(9 14 24 / .5);
    color: #fff;
    font-weight: 600;
    text-align: center;
    transition: background .25s ease;
}

.gallery-tile:hover .gallery-more { background: rgb(9 14 24 / .65); }

/* Nothing is hidden behind this tile, so the message steps out of the photo. */
.gallery-more-pill {
    inset: auto .6rem .6rem auto;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgb(9 14 24 / .65);
    font-size: .82rem;
}

.gallery-tile:hover .gallery-more-pill { background: rgb(9 14 24 / .85); }

/*
 * Narrow screens keep the cover full width and tile the rest under it in rows
 * that divide into six evenly. Letting them auto-place instead ends a
 * six-photo gallery on a row of two beside a hole.
 */
@media (max-width: 720px) {
    .gallery-mosaic > :first-child { grid-column: span 6; grid-row: span 2; }

    .gallery-mosaic-2 > :nth-child(2) { grid-column: span 6; }

    .gallery-mosaic-3 > :nth-child(n+2),
    .gallery-mosaic-5 > :nth-child(n+2),
    .gallery-mosaic-6 > :nth-child(2),
    .gallery-mosaic-6 > :nth-child(3) { grid-column: span 3; }

    .gallery-mosaic-4 > :nth-child(n+2),
    .gallery-mosaic-6 > :nth-child(n+4) { grid-column: span 2; }
}

@media (min-width: 721px) {
    .gallery-mosaic { grid-auto-rows: clamp(110px, 13.5vw, 190px); }

    .gallery-mosaic-1 > :nth-child(1) { grid-area: 1 / 1 / 3 / 7; }

    .gallery-mosaic-2 > :nth-child(1) { grid-area: 1 / 1 / 3 / 5; }
    .gallery-mosaic-2 > :nth-child(2) { grid-area: 1 / 5 / 3 / 7; }

    .gallery-mosaic-3 > :nth-child(1),
    .gallery-mosaic-4 > :nth-child(1),
    .gallery-mosaic-5 > :nth-child(1),
    .gallery-mosaic-6 > :nth-child(1) { grid-area: 1 / 1 / 3 / 5; }

    .gallery-mosaic-3 > :nth-child(2),
    .gallery-mosaic-4 > :nth-child(2),
    .gallery-mosaic-5 > :nth-child(2),
    .gallery-mosaic-6 > :nth-child(2) { grid-area: 1 / 5 / 2 / 7; }

    .gallery-mosaic-3 > :nth-child(3),
    .gallery-mosaic-4 > :nth-child(3),
    .gallery-mosaic-5 > :nth-child(3),
    .gallery-mosaic-6 > :nth-child(3) { grid-area: 2 / 5 / 3 / 7; }

    .gallery-mosaic-4 > :nth-child(4) { grid-area: 3 / 1 / 4 / 7; }

    .gallery-mosaic-5 > :nth-child(4) { grid-area: 3 / 1 / 4 / 4; }
    .gallery-mosaic-5 > :nth-child(5) { grid-area: 3 / 4 / 4 / 7; }

    .gallery-mosaic-6 > :nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
    .gallery-mosaic-6 > :nth-child(5) { grid-area: 3 / 3 / 4 / 5; }
    .gallery-mosaic-6 > :nth-child(6) { grid-area: 3 / 5 / 4 / 7; }
}

/* --------------------------------------------------------------------------
   Listing body: sidebar beside the gallery, and the overview card
   -------------------------------------------------------------------------- */

/*
 * Estate keeps the gallery in the left column and runs the contact card down
 * the right from the very top, so the enquiry is on screen with the photos
 * rather than a scroll below them. Minimal's full-width rule is undone here
 * rather than in the markup — same siblings, different placement.
 */
@media (min-width: 961px) {
    /* Wider than minimal's 340: this column carries a whole enquiry form, and
       at 340 the name/email pair wraps onto two lines. */
    .layout-aside { grid-template-columns: 1fr 380px; gap: var(--gap-lg); }
    .listing-aside { grid-column: 2; position: sticky; top: 5.5rem; }

    /*
     * Scoped to the listing page, where row 1 is the gallery and row 2 the
     * body. Unscoped, the agent page — which has no gallery — put its content
     * in row 2 as well and left an empty row above it.
     */
    .listing .layout-aside > .gallery { grid-column: 1; grid-row: 1; margin: 0; }
    .listing .listing-main { grid-column: 1; grid-row: 2; }
    .listing .listing-aside { grid-row: 1 / span 2; }
}

/* The body's blocks are cards in their own right, as wide as their column. */
.overview, .card-block {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: var(--gap);
    margin-bottom: var(--gap-lg);
}

/* Card headings title a card; they do not open a section, so --heading-weight
   is overridden rather than inherited. */
.card-block > h2,
.aside-title,
.card-summary h2 { font-size: 18px; font-weight: 500; line-height: 23px; }

/* The agent's own page: their name titles a card here, it does not open the
   site, so it sits well below the theme's h1 scale. */
.agent-hero h1 { font-size: 24px; font-weight: 500; line-height: 31px; }
.agent-hero-body .muted { font-size: 14px; font-weight: 400; line-height: 23px; }

/*
 * On .btn rather than the row: the button sets its own weight, background and
 * padding, so a rule on the container alone would lose to it.
 *
 * Geometry taken from the reference: 5px/34px padding on a 28px line, 14px at
 * weight 500, a 1px border and capitalised text. Kept as inline-flex rather
 * than the reference's inline-block, because two of these carry an icon and
 * inline-block would drop it onto the text baseline.
 */
.agent-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 10px;
    padding: 5px 34px;
    border: 1px solid var(--brand);
    background-color: var(--brand);
    background-image: none;
    color: var(--brand-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    text-transform: capitalize;
    text-shadow: none;
    text-decoration: none;
}

.agent-actions .btn-ghost { background-color: transparent; color: var(--brand); }

/* The flex gap already separates icon from label; the icon's own margin was
   adding to it and pushing the pair off centre. */
.agent-actions .btn-icon { margin-right: 0; }

/* Vertical spacing comes from the buttons' margin now, so the row contributes
   only the horizontal gap — otherwise a wrapped row is spaced twice. */
.agent-actions { gap: 0 .5rem; }

/* The listings block, not the article itself, which is also a .section. */
.agent-page .section { padding-block: 20px; }
.agent-page .section-head h2 { font-size: 24px; font-weight: 500; line-height: 31px; }
.agent-type-filters { margin-bottom: 20px; }

.agent-contact { font-size: 14px; line-height: 23px; }

/*
 * Roomier than the chips elsewhere, and tinted rather than outlined. These are
 * labels rather than filters — nothing happens when you click one — so they
 * read better as a soft fill than as something with a border to press.
 */
/* 15px under each of the three, so the heading, the subheading and the tag row
   sit on one rhythm. The tags' old 40px margin goes with it — kept, it would
   have stacked to 55. */
.agent-page .card-block > h2,
.agent-page .group-title,
.agent-tags { padding-bottom: 15px; }

/* The padding above is the whole gap now, so the headings' own margins go —
   the subheading keeps its top margin, which is what separates it from the
   block before it. */
.agent-page .card-block > h2 { margin: 0; }
.agent-page .group-title { margin-bottom: 0; }

.agent-tags { gap: .6rem; margin-bottom: 0; }

.agent-tags .chip {
    padding: .55rem 1.15rem;
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    border-color: transparent;
    color: var(--brand);
    font-size: 14px;
    line-height: 23px;
}

/* Only on the agent page: there the form follows the contact lines directly,
   with no tab strip between them to do the spacing. */
.agent-page .lead-form { padding-top: 10px; }
/* Only the agent page's subheadings: the amenity groups on a listing are
   labels over a column of ticks and stay at 14. */
.agent-page .group-title { font-size: 18px; font-weight: 500; line-height: 23px; }
.card-summary::after { border-color: var(--brand); }
.spec-grid > div { font-size: 14px; line-height: 23px; }
.card-block .prose { font-size: 14px; line-height: 23px; }

/* Matched to the Detalii card beside it: same size, same line, same rhythm. */
.amenity { font-size: 14px; line-height: 20px; }
.group-title { font-size: 14px; font-weight: 600; }
.spec-grid dt { font-weight: 500; }
.spec-grid dd { font-weight: 400; }

/* Lighter than the theme's other headings: this one titles a card, it does not
   open a section, so --heading-weight is overridden rather than inherited. */
.overview h2 { font-size: 1.15rem; font-weight: 500; line-height: 23px; margin-bottom: var(--gap); }

.overview-grid { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: var(--gap); }
.overview-icon { color: var(--brand); }
.overview-label { color: var(--ink); font-weight: 500; line-height: 20px; font-size: .9rem; }
.overview-value { color: var(--ink-muted); font-weight: 400; line-height: 20px; font-size: 14px; }

.agent-avatar { border-radius: calc(var(--radius) - 4px); }
.agent-name { font-size: 1.1rem; font-weight: 500; line-height: 23px; }
.agent-role { line-height: 23px; }

/* Call and WhatsApp read as alternatives to Send, so they are outlined rather
   than filled: one primary action per card. */
.aside-actions .btn-ghost { justify-content: center; width: 100%; }

.agent-photo-empty { font-size: 2rem; }

/* The agency's brand on the contact icons rather than grey. The frame itself
   is minimal's: 331x213 is a number, not a matter of taste. */
.agent-tile-contact .social-link { color: var(--brand); }

/* The card's own padding is var(--gap), so the tab strip pulls back by that. */
.aside-tabs { margin: calc(var(--gap) * -1) calc(var(--gap) * -1) 0; }
.aside-tabs .tab-list { margin-bottom: var(--gap); }
.aside-tabs .tab-panel { padding: 0 var(--gap) var(--gap); }
.aside-tabs .tab-label { font-size: .9rem; }

/*
 * The stock link block: four columns of "Apartamente de vânzare Alba Iulia".
 * Smaller and quieter than the rest of the footer — it is a directory, read by
 * somebody who already knows what they are looking for, and by crawlers.
 */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: var(--rule);
}
.footer-links-column .footer-title { margin-bottom: .5rem; }
.footer-links-column li { margin-bottom: .35rem; font-size: .875rem; line-height: 1.4; }
/*
 * `var(--muted)` — which is what this said, and what minimal still says — is
 * not a custom property anywhere: `.muted` is a CLASS. An undefined variable
 * with no fallback makes the declaration invalid, so the links simply
 * inherited, and the hover then asked for --ink: near-black text on a dark
 * footer, i.e. the link disappeared at the moment somebody pointed at it.
 */
.footer-links-column a { color: var(--ink-on-dark-muted); }
.footer-links-column a:hover { color: var(--ink-on-dark); }

@media (max-width: 900px) {
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .footer-links { grid-template-columns: 1fr; }
}

/* The same block inside a search: separated from the results above it. */
.stock-links-inline { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.stock-links-inline .footer-links { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.stock-links-inline .section-title { margin-bottom: 1rem; }

/* Two links where a select would contradict the address. */
.filters .label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.filters .switch { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.filters .switch-option { flex: 1; padding: .5rem .25rem; text-align: center; font-size: .85rem; text-decoration: none; }
.filters .switch-option.is-active { background: var(--brand); color: var(--brand-ink); }

/* ---------- Header submenus ---------- */

/*
 * Opens on hover and on :focus-within, so it works with JavaScript off and
 * from a keyboard. site-nav.js adds .is-open for touch, where hover does not
 * exist.
 */
.nav-item { position: relative; display: inline-flex; }
.nav-parent {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: .95rem; color: inherit; cursor: pointer; text-decoration: none;
}
/*
 * A triangle drawn out of borders, which only works on a BLOCK: width and
 * height do not apply to an inline box, so the left border of the sideways
 * one was drawn down the whole line and came out as a vertical bar.
 *
 * At the top level the parent is an inline-flex, which blockifies its children
 * and hid this; inside a submenu the parent is a plain anchor.
 */
.nav-caret {
    display: block; flex: none;
    width: 0; height: 0; border-left: .28rem solid transparent; border-right: .28rem solid transparent;
    border-top: .3rem solid currentColor; opacity: .6;
}

/*
 * The panel carries its own colours, at a specificity that beats a theme's
 * `.site-header a`. In bold the header is dark chrome with white links, and a
 * white panel inherited white text: a submenu nobody could read.
 *
 * Its own colour is also what separates it from the header above and the page
 * behind — three white surfaces stacked, and nobody could see where one ended
 * and the next began. The second level is a shade off the first, so a flyout
 * reads as a new list rather than more of the same one.
 */
.submenu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 40;
    min-width: 12rem; padding: .4rem 0; margin-top: .4rem;
    background: var(--submenu-bg, var(--surface)); color: var(--submenu-ink, var(--ink));
    border: 1px solid color-mix(in srgb, var(--submenu-ink, var(--ink)) 14%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}
.site-header .submenu a,
.site-header .submenu .nav-parent { color: var(--submenu-ink, var(--ink)); }
.site-header .submenu a { display: block; padding: .45rem 1rem; font-size: .9rem; white-space: nowrap; }

/* The row under the cursor, and the row holding a flyout open: without it,
   which entry the second panel belongs to was a guess. */
.site-header .submenu a:hover,
.site-header .submenu .nav-item:hover > .nav-parent,
.site-header .submenu .nav-item:focus-within > .nav-parent,
.site-header .submenu .nav-item.is-open > .nav-parent { background: var(--submenu-hover, #eef2f6); }


.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu { display: block; }

/*
 * The language switcher, which is an ordinary menu entry with a flag in it.
 * The flag is drawn inline (partials/flags), so it costs no request and cannot
 * come back as a broken image on the agency's own header.
 */
/*
 * inline-block rather than a flex item, and NOT by widening `.submenu a`:
 * that selector dresses every link in every panel, and a rule written for the
 * new case is how the old ones quietly move.
 */
.nav-flag { display: inline-block; flex: none; width: 1.15rem; vertical-align: -.15em; line-height: 0; }
.nav-flag svg { display: block; width: 100%; height: auto; border-radius: 1px; }
.site-header .submenu .nav-flag { margin-right: .5rem; }
/* Which language is being read, marked in the panel: without it the open list
   is two identical rows and the current one is a guess. */
.site-header .submenu a.is-current { font-weight: 600; }

/* The gap between a parent and its submenu is not a place to lose the pointer. */
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .4rem; }

/* The submenu parent is a nav link like the others. */
/*
 * A submenu inside a submenu opens to the SIDE, the way every desktop menu
 * does: downwards it would cover the list it came from.
 */
.submenu .nav-item { display: block; }
.site-header .submenu .nav-parent {
    display: flex; align-items: center; width: 100%;
    padding: .45rem 1rem; font-size: .9rem; justify-content: space-between; gap: 1rem;
}
.submenu .nav-caret { border: 0; border-top: .28rem solid transparent; border-bottom: .28rem solid transparent; border-left: .3rem solid currentColor; }
.submenu .submenu {
    top: 0; left: 100%; margin: -.4rem 0 0 .35rem;
    background: color-mix(in srgb, var(--submenu-bg, var(--surface)) 92%, var(--submenu-ink, var(--ink)));
}
/* Same hazard one level down: the gap is not a place to lose the pointer. */
.submenu .nav-item::after { content: ""; position: absolute; top: 0; left: 100%; width: .45rem; height: 100%; }

/* Which entry the panel belongs to, marked on the entry itself: the panel
   opens below the header and could belong to any of them. */
.nav > .nav-item:hover > .nav-parent,
.nav > .nav-item:focus-within > .nav-parent,
.nav > .nav-item.is-open > .nav-parent { box-shadow: inset 0 -2px 0 var(--accent); }

/* Right-hand entries would push their flyout off the screen. */
.nav-item:last-child .submenu .submenu { left: auto; right: 100%; margin: -.4rem .25rem 0 0; }

.nav .nav-parent { color: var(--ink-muted); font-weight: 500; }
.nav .nav-parent:hover { color: var(--ink); }

/* ---------- Contact section: text and details beside the form ---------- */

.section-contact { background: var(--brand); color: var(--brand-ink); }
.section-contact h2 { color: var(--brand-ink); }

/* The block's title, at the size asked for rather than the theme's heading
   scale: --heading-weight is 600 by default and this one is 500. */
.section-contact .contact-intro h2 { font-weight: 500; font-size: 32px; line-height: 39px; }
/* One number for both surfaces: the strip on a home page and the page
   that IS this block open at the same rhythm, and the contact page's own
   rule no longer says a second one. */
.contact-intro h2 { margin-bottom: 12px; }
.contact-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.contact-intro { padding-top: 50px; }
.contact-intro .rich-text { font-size: 15px; line-height: 24px; }
/* The rule between the words and the details, as its own element: the two
   halves of that column say different things. */
.contact-rule { margin: 2rem 0 1.5rem; border: 0; border-top: 1px solid currentColor; opacity: .25; }
.contact-details { display: grid; gap: .3rem; font-size: 15px; line-height: 23px; }
.contact-details li { display: flex; align-items: center; gap: .6rem; }
.contact-details a { color: inherit; }
.contact-icon { display: inline-flex; width: 1.05rem; height: 1.05rem; flex: none; }
.contact-icon svg { width: 100%; height: 100%; display: block; }
/* Never a colour of its own here: the block's background is the brand. */
.section-contact .contact-icon { color: inherit; }
.contact-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.contact-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
/*
 * The buttons on this block, inverted.
 *
 * `.btn` is the brand colour on the brand colour here — the same collision the
 * icons had, and "Sunați-ne" was a button you could only find by hovering.
 * Inverted is the one pair guaranteed to read: the agency already promises
 * --brand-ink is legible against --brand, which is what makes the text above
 * it legible too. Scoped to .contact-actions, because the form's own submit
 * sits on the white card and is right as it is.
 */
.section-contact .contact-actions .btn {
    background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand);
    /* Uppercase rather than `capitalize`: the labels are capitalised already,
       so that would have changed nothing on screen. */
    text-transform: uppercase;
    font-weight: 400; font-size: 14px; line-height: 14px;
}
.section-contact .contact-actions .btn-ghost {
    background: none; border-color: currentColor; color: var(--brand-ink);
}
/*
 * The same block without the band, for a page that IS this block: the accent
 * is a strip's way of standing out from what surrounds it, and on the contact
 * page there is nothing to stand out from.
 *
 * Written as a second, more specific selector rather than as an edit to the
 * rules above: every site already published with the band keeps it.
 */
.section-contact.is-plain { background: var(--surface-alt); color: var(--ink); }
.section-contact.is-plain h2 { color: var(--ink); }
/*
 * The three buttons on this page — Sunați-ne, Scrieți-ne and the form's own
 * submit — are one shell: a pale fill, a dark rule around it, and the brand
 * kept for the hover.
 *
 * On the home page's band the pair is inverted instead, because there the
 * background IS the brand and a brand-coloured button on it cannot be seen.
 * Here nothing needs escaping from, so the button can be quiet until somebody
 * reaches for it.
 */
.section-contact.is-plain .contact-actions .btn,
.section-contact.is-plain .contact-actions .btn-ghost,
.section-contact.is-plain .contact-card .btn,
.section-about .contact-actions .btn,
.section-about .contact-actions .btn-ghost {
    background: #e6eaf0;
    border-color: #222222;
    color: rgb(34, 34, 34);
}

/*
 * The agency's own colour, on the way in. The LABEL has to move with it: the
 * brand is a colour they chose and may be dark, and #222 on it is a button you
 * can only find by hovering — which is what hovering already is. `--brand-ink`
 * is the one pair the agency has already promised reads.
 */
.section-contact.is-plain .contact-actions .btn:hover,
.section-contact.is-plain .contact-actions .btn-ghost:hover,
.section-contact.is-plain .contact-card .btn:hover,
.section-about .contact-actions .btn:hover,
.section-about .contact-actions .btn-ghost:hover {
    background: var(--brand);
    color: var(--brand-ink);
}

/*
 * And the submit reads like the two beside it. Those get their type from
 * `.section-contact .contact-actions .btn`, which this page inherits but the
 * card is outside of — so it is said again here rather than left to look
 * like a different kind of button on the same page.
 *
 * Not scoped to `.is-plain` any more: the same form, the same button and the
 * same words are drawn by this section wherever it is put, and it read one way
 * on the contact page and another on a home page's band.
 */
.section-contact .contact-card .btn {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
}


/* The form sits on its own surface, the way a card does. */
.contact-card {
    background: var(--surface); color: var(--ink);
    border-radius: var(--radius); padding: 1.8rem;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
/*
 * This theme's .field-row is a flex row and its children do not grow, so a
 * pair sat at its natural width and left half the card empty. Inside the
 * card they share it evenly; the search sidebar's rows are left alone.
 */
.contact-card .field-row { flex-wrap: wrap; }
.contact-card .field-row > .field { flex: 1 1 10rem; min-width: 0; }
/*
 * The card's controls. The placeholder is what was asked for; the control
 * itself carries the same size, or the text changes size the moment somebody
 * types into it. A select has no placeholder — its empty first option is one,
 * and it follows the control.
 */
/*
 * This theme styles controls per screen (.filters) and has no rule for a bare
 * input, so the card's boxes were the browser's own: a different typeface from
 * the rest of the page and no border at all. They get the filters' treatment,
 * at the card's size.
 */
.contact-card input,
.contact-card select,
.contact-card textarea {
    width: 100%; padding: .65rem .8rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 14px; line-height: 20px;
}
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px;
}
.contact-card input[type="checkbox"] { width: auto; padding: 0; }
.contact-card ::placeholder { font-size: 14px; line-height: 20px; color: #222222a1; }
/*
 * A select has no placeholder — its empty first option is one, and it is the
 * select's own colour until something is chosen. `:has` gives it the same grey
 * as the boxes beside it; a browser without `:has` simply shows it in the
 * ordinary ink.
 */
.contact-card select:has(option[value=""]:checked) { color: #222222a1; }
.contact-card select option { color: var(--ink); }
/*
 * Four controls on one line, of which one is always hidden — the rooms and the
 * surface take turns. Flex rather than four grid columns, so the three that
 * are on screen share the width instead of leaving the fourth column empty,
 * and so they wrap in pairs when the card is too narrow for four.
 */
.contact-card .field-row-4 { display: flex; flex-wrap: wrap; }
.contact-card .field-row-4 > .field { flex: 1 1 8rem; min-width: 0; }
.contact-card h3 { margin: 0 0 1.2rem; font-weight: 500; font-size: 24px; line-height: 28px; }

/*
 * The type scale of a block that IS the page.
 *
 * `.section-contact` is two things: a strip partway down a long home page, and
 * the whole body of the contact page. A heading with a page of its own around
 * it and a heading that is the first thing under the band want different
 * sizes, so the page-sized one is scoped to the plain surface — which is what
 * the contact page uses and the strip does not.
 *
 * More specific selectors beside the rules above rather than edits to them:
 * every home page already published keeps the strip it was designed with.
 */
/*
 * The band above ends where this begins, so the space between them is set
 * here rather than left to `--section-gap` — which is a theme token an agency
 * can move, and estate opens at 64px where minimal opens at 40px.
 */
.section-contact.is-plain { padding-top: 40px; }

/*
 * One ink for everything the block says: rgb(34, 34, 34).
 *
 * Set on the section and INHERITED, so a paragraph added to this block
 * tomorrow is the same colour without anybody remembering to say so. What
 * follows is only the things that carry a colour of their own and would
 * otherwise ignore it: the headings, the card, and form controls — which
 * never inherit a page's colour, they have their own.
 *
 * The placeholder was already this colour at 63% alpha, which is where the
 * value came from; asked for in full, it is the same ink as the text a person
 * types over it.
 */
.section-contact.is-plain { color: rgb(34, 34, 34); }
.section-contact.is-plain h2,
.section-contact.is-plain h3,
.section-contact.is-plain .contact-card,
.section-contact.is-plain .contact-actions .btn-ghost,
.section-contact.is-plain input,
.section-contact.is-plain select,
.section-contact.is-plain textarea,
.section-contact.is-plain select option,
.section-contact.is-plain .form-legend,
/*
 * A heading the agency wrote INSIDE the introductory text. Its rule is the
 * brand's ink, for the band this block is on a home page — which on this
 * page is white on a light surface, and would have been an invisible line
 * nobody could explain. Same specificity as the plain h2 rule above and
 * declared later in the file, so it has to be named here to be beaten.
 */
.section-contact.is-plain .rich-text h2,
.section-contact.is-plain .rich-text h3,
.section-contact.is-plain .rich-text h4 { color: rgb(34, 34, 34); }
.section-contact.is-plain ::placeholder,
.section-contact.is-plain select:has(option[value=""]:checked) { color: rgb(34, 34, 34); }
/* 19.2px is the 1.2rem the card's own heading sits on, so the two columns
   open at the same rhythm as well as on the same line. */
.section-contact.is-plain .contact-intro h2 { font-size: 35px; line-height: 42px; }
.section-contact.is-plain .contact-intro .rich-text { font-size: 16px; line-height: 26px; }
.section-contact.is-plain .contact-card h3 { font-size: 30px; line-height: 35px; }

/*
 * The two headings on one line: "Cum ne găsiți" and the card's own title.
 *
 * `baseline` rather than a margin worked out by hand. The columns carry
 * different padding — the intro's 50px, the card's 1.8rem — and the headings
 * different sizes, so any number written here would be wrong the moment
 * either of those changed. The grid measures the first baseline of each
 * column and works the offset out itself.
 *
 * Only where there ARE two columns. Below 900px they stack one per row and
 * there is nothing to align.
 */
@media (min-width: 900px) {
    .section-contact.is-plain .contact-split { align-items: baseline; }
}
/* The group headings inside the card. Weight and size are set here rather than
   on .form-legend itself, which the viewing tab on a listing page also uses. */
.contact-card .form-legend { color: var(--ink); font-weight: 500; font-size: 15px; line-height: 25px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* Agency rich text: sanitised on save, so these are the only tags it can be. */
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.6rem 0 .6rem; }
.rich-text ul, .rich-text ol { margin: 0 0 1rem 1.2rem; }
.rich-text li { margin-bottom: .3rem; }
.rich-text blockquote {
    margin: 1.2rem 0; padding-left: 1rem;
    border-left: 3px solid var(--accent); font-style: italic;
}
.section-contact .rich-text h2,
.section-contact .rich-text h3,
.section-contact .rich-text h4 { color: var(--brand-ink); }
.section-contact .rich-text a { color: inherit; }

/* `display` on .field beats the browser's own [hidden] rule, so a field the
   script hides stayed on screen. */
.field[hidden] { display: none; }

/* ---------- Header: centred menu, transparent over a hero ---------- */

/*
 * Three groups rather than two: the brand, the menu, and the one thing the
 * header asks for. 1fr auto 1fr keeps the menu centred on the page rather than
 * centred on what is left after the logo, which moves every time an agency
 * uploads a wider one.
 */
.header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 1rem; padding-block: .85rem;
}
.header-inner > .nav { justify-content: center; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }

.site-header { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site-header.is-stuck { box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-ink) 8%, transparent); }

/*
 * On the hero, the bar is the photograph. A scrim under it rather than a
 * colour: the agency's own photograph decides how dark the top of the page is,
 * and white text on a bright sky is unreadable without one.
 */
.site-header.is-overlay {
    position: absolute; left: 0; right: 0; top: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / .55), rgb(0 0 0 / .15) 70%, transparent);
    border-bottom-color: transparent;
    color: #fff;
}
/*
 * The TOP level only — `.nav a` also matches every link inside a submenu, and
 * a submenu is a white panel: those links went white on white and the panel
 * opened empty.
 *
 * The shadow is not decoration. A hero is somebody's photograph and the top of
 * it may be bright sky, where white text on a scrim alone is a guess.
 */
.site-header.is-overlay .brand,
.site-header.is-overlay .nav > a,
.site-header.is-overlay .nav > .nav-item > .nav-parent {
    color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .55);
}
.site-header.is-overlay .brand-mark { background: rgb(255 255 255 / .18); color: #fff; }
.site-header.is-overlay .nav > a:hover,
.site-header.is-overlay .nav > .nav-item > .nav-parent:hover { color: #fff; opacity: .8; }
.site-header.is-overlay .btn {
    background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}

/* Scrolled: the ordinary bar, wherever it started. */
.site-header.is-overlay.is-stuck {
    position: sticky;
    background: var(--surface);
    border-bottom-color: var(--line);
    color: inherit;
}
.site-header.is-overlay.is-stuck .brand,
.site-header.is-overlay.is-stuck .nav > a,
.site-header.is-overlay.is-stuck .nav > .nav-item > .nav-parent { color: inherit; text-shadow: none; }
.site-header.is-overlay.is-stuck .brand-mark { background: var(--brand); color: var(--brand-ink); }

/* An overlay header takes no space, so whatever opens the page has to start
   under it — the hero, or the valuation band that opens the same way. */
.site-header.is-overlay + main .hero,
.site-header.is-overlay + main .section-valuation { padding-top: 7rem; }

@media (max-width: 860px) {
    /* Three columns need a screen. Below one, the row wraps as it always did. */
    .header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .header-inner > .nav { justify-content: flex-start; }
    .site-header.is-overlay + main .hero,
    .site-header.is-overlay + main .section-valuation { padding-top: 5rem; }
}

/* ---------- Hero: where the words sit ---------- */

/*
 * The title had a max-width and no margin, so on a centred hero the text was
 * centred inside a block that was not. Alignment is one class on the section
 * and everything inside follows it.
 */
.hero h1, .hero .hero-sub { margin-inline: auto; }

.hero-left { text-align: left; place-items: center start; }
.hero-left h1, .hero-left .hero-sub { margin-inline: 0; }

.hero-center { text-align: center; place-items: center; }

.hero-right { text-align: right; place-items: center end; }
.hero-right h1, .hero-right .hero-sub { margin-inline: 0 0; margin-left: auto; }

/* ---------- Hero search: a card of the filters people open with ---------- */

.hero-search {
    /* One column of rows. Said out loud because this class had an older rule
       with columns of its own, and a property left undeclared is a property
       the earlier rule keeps. */
    display: grid; grid-template-columns: 1fr; gap: .75rem;
    width: min(100%, 1100px);
    margin: 2rem auto 0; padding: 1rem;
    background: var(--surface); color: var(--ink);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
    text-align: left;
}
.hero-search-row { display: grid; gap: .75rem; grid-template-columns: 2fr 1fr 1fr; }
/* The second row ends in the button, which needs less room than a field. */
.hero-search-row:last-child { grid-template-columns: 1fr 1fr 1fr auto; }
.hero-search .field { margin-bottom: 0; }
/*
 * One type scale for this card wherever it is drawn — the hero and the band
 * under the search page's map.
 *
 * Stated rather than `font: inherit`, which copies the SIZE, WEIGHT and
 * LINE-HEIGHT of whatever surrounds the card: the same markup then reads
 * differently on a hero and inside a section, and neither is wrong enough to
 * point at.
 */
.hero-search input, .hero-search select {
    width: 100%; padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .95rem; font-weight: 400; line-height: 1.5;
}

.hero-search ::placeholder { font-size: .95rem; line-height: 1.5; opacity: 1; color: #595959; }
.hero-search-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
/* The button's own ink. `.contact-icon` is declared in the brand colour for
   the agent page, and this button's background IS the brand colour. */
.hero-search-icon { display: inline-flex; width: 1.05rem; height: 1.05rem; flex: none; color: inherit; }
.hero-search-icon svg { width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
    /* Below this, a row of three is three boxes nobody can read. */
    .hero-search-row,
    .hero-search-row:last-child { grid-template-columns: 1fr; }
    .hero-search-submit { width: 100%; }
}

/*
 * The search card straddles the bottom edge of the hero: half on the
 * photograph, half on the section below it.
 *
 * Positioned rather than pushed with a margin, because the card's height
 * depends on how a browser lays out seven controls — translating it by half of
 * ITS OWN height is the only way to sit on the edge without measuring
 * anything.
 *
 * Wide screens only. Stacked on a phone the card is taller than the hero, and
 * half of that hanging over the next section would swallow it.
 */
@media (min-width: 861px) {
    .hero { position: relative; padding-bottom: 6.65rem; }

    /*
     * Scoped to the hero, because the card is drawn elsewhere too — under the
     * map on the search page — and there it must sit in the flow. Unscoped it
     * kept its absolute positioning there, escaped the band and landed on top
     * of the first row of listings: a property left undeclared is a property
     * the earlier rule keeps, which is the note above this block as well.
     */
    .hero .hero-search {
        position: absolute; left: 50%; bottom: 0;
        transform: translate(-50%, 50%);
        width: min(92%, 1100px); margin: 0; z-index: 3;
    }

    /* Room for the half that hangs over whatever comes next — or, on a page
       whose only section is the hero, over nothing at all. */
    .hero + * { padding-top: calc(var(--section-gap) + 3rem + var(--hero-gap)); }
    main > .hero:last-child { margin-bottom: 5rem; }
}

/* The logo's box. `contain` because an agency's file is whatever shape it is,
   and a logo stretched to our numbers is worse than one that fits inside them. */
.brand-logo { width: 156px; height: 44px; object-fit: contain; object-position: left center; }

/* ---------- Categories: its own type scale ---------- */

.section-categories h2,
.section-agents h2,
.section-posts h2,
.section-featured h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
/* No rule under this heading: estate draws one under every section title, and
   here the row of cards is the thing that separates it from what follows. */
.section-categories > .wrap > h2::after { content: none; }
/* Same reasoning: the row of cards separates the heading from what follows. */
.section-agents > .wrap > h2::after { content: none; }
.section-posts > .wrap > h2::after { content: none; }
/* No max-width here: the subtitle runs the width of the section, like the row
   of cards under it. */
/*
 * `.section-sub` carries a NEGATIVE top margin: it is written to tuck under the
 * rule this theme draws below a section heading. With that rule suppressed
 * there is nothing to tuck under, and the subtitle climbed on top of the
 * title.
 */
.section-categories .section-sub,
.section-agents .section-sub,
.section-posts .section-sub,
.section-featured .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

.tile-label { font-weight: 500; line-height: 23px; }
.tile-count { line-height: 18px; }

/* ---------- Proprietăți: heading, subtitle, tabs ---------- */

/* The tab strip is the line under this heading; a second rule above it is one
   line too many. */
.section-featured > .wrap > h2::after { content: none; }
.section-featured .section-more { text-align: center; margin-top: 2rem; }

/*
 * Proprietăți keeps text tabs rather than the pills the showcase uses: they sit
 * on a line that runs the width of the section, and the chosen one is a box
 * open at the bottom, joined to the panel below it.
 *
 * Scoped, and the active state is written out ten times, because the pill's own
 * active rule is ten selectors of the same specificity — a shorter one here
 * would lose.
 */
.section-featured .tab-list {
    gap: 0; justify-content: center; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}
.section-featured .tab-label {
    /* -1px at the bottom so the box sits on the strip's line; 5px either side
       so the tabs read as separate boxes rather than one run. */
    margin: 0 5px -1px;
    padding: .75rem 1.15rem;
    /* A full box, bottom edge included: the strip's own line runs behind it. */
    border: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    background: #E7E7E721;
    color: var(--ink-muted);
    font-weight: 500; font-size: .95rem;
}
.section-featured .tab-label:hover { background: #F4F7FE; border-color: var(--line); color: var(--ink); }
.section-featured .tab-input:nth-of-type(1):checked ~ .tab-list .tab-label:nth-of-type(1),
.section-featured .tab-input:nth-of-type(2):checked ~ .tab-list .tab-label:nth-of-type(2),
.section-featured .tab-input:nth-of-type(3):checked ~ .tab-list .tab-label:nth-of-type(3),
.section-featured .tab-input:nth-of-type(4):checked ~ .tab-list .tab-label:nth-of-type(4),
.section-featured .tab-input:nth-of-type(5):checked ~ .tab-list .tab-label:nth-of-type(5),
.section-featured .tab-input:nth-of-type(6):checked ~ .tab-list .tab-label:nth-of-type(6),
.section-featured .tab-input:nth-of-type(7):checked ~ .tab-list .tab-label:nth-of-type(7),
.section-featured .tab-input:nth-of-type(8):checked ~ .tab-list .tab-label:nth-of-type(8),
.section-featured .tab-input:nth-of-type(9):checked ~ .tab-list .tab-label:nth-of-type(9),
.section-featured .tab-input:nth-of-type(10):checked ~ .tab-list .tab-label:nth-of-type(10) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-weight: 600;
}

/* The card's one line of description, under the price. */
/* One grey for both lines under the price — the same #595959 the article
   cards and the section subtitles use, rather than each theme's --ink-muted,
   which is a different grey in all four. */
.card-excerpt { margin: .4rem 0 0; font-size: .9rem; line-height: 1.45; color: #595959; }

/* ---------- Card footer: who is selling it, and what to do with it ---------- */

.card-agent {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: 0.2rem; padding-top: .75rem;
    border-top: 1px solid var(--line);
}
.card-agent-who { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; min-width: 0; }
.card-agent-who a, .card-agent-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-agent-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.card-agent-avatar-empty {
    display: grid; place-items: center;
    background: var(--surface-alt, #eef2f6); color: var(--ink-muted);
    font-size: .72rem; font-weight: 600;
}

.card-actions { display: inline-flex; gap: .4rem; flex: none; }
.card-action {
    display: grid; place-items: center; width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px);
    color: var(--ink-muted);
}
.card-action svg { width: 15px; height: 15px; }
.card-action:hover { border-color: var(--brand); color: var(--brand); }
/* Chosen, and told to a screen reader by aria-pressed rather than by colour. */
.card-action.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.card-action.is-copied { border-color: var(--brand); color: var(--brand); }

/* ---------- The comparison tray and its page ---------- */

.compare-bar {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .9rem; z-index: 30;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
    font-size: .9rem;
}
.compare-bar[hidden] { display: none; }

.compare-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th[scope="row"] { width: 12rem; color: var(--ink-muted); font-weight: 600; }
.compare img { width: 100%; max-width: 220px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: .4rem; }
.compare-title { font-weight: 600; }

/* A listing of another type cannot join a comparison already under way. */
.card-action.is-disabled { opacity: .35; cursor: not-allowed; }
.card-action.is-disabled:hover { border-color: var(--line); color: var(--ink-muted); }

.compare-clear {
    border: 0; background: none; padding: 0 .1rem; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--ink-muted);
}
.compare-clear:hover { color: var(--ink); }

/* The comparison table */
.compare thead td { vertical-align: bottom; }
.compare-head { display: block; text-decoration: none; }
.compare-price { display: block; margin-top: .2rem; font-weight: 600; color: var(--brand); }
.compare-heading th { padding-top: 1.4rem; font-size: 1.05rem; color: var(--ink); }
.compare-mark { font-weight: 700; }
.compare-mark.is-yes { color: #16a34a; }
.compare-mark.is-no { color: #dc2626; }
.compare tbody tr:nth-child(odd) td, .compare tbody tr:nth-child(odd) th { background: rgb(127 127 127 / .05); }

/* ---------- Comparison page type ---------- */

.compare thead img { width: 311px; height: 201px; max-width: 100%; object-fit: cover; }
.compare-title { display: block; font-weight: 500; font-size: 18px; line-height: 23px; }
.compare-price { display: block; margin-top: .2rem; font-weight: 400; font-size: 18px; line-height: 22px; color: var(--brand); }
.compare th[scope="row"] { font-weight: 400; font-size: 14px; line-height: 23px; }
.compare td { font-weight: 400; font-size: 12px; line-height: 23px; }
/* The column heads are the listings themselves, and they keep their own scale. */
.compare thead td { font-size: inherit; line-height: inherit; }
.compare-heading-main { font-weight: 500; font-size: 34px; line-height: 44px; margin: 2rem 0 1rem; }
.compare-map + .wrap .compare-heading-main { margin-top: 0; }

/* ---------- The comparison map: full width, under the header ---------- */

.compare-map .map-block { position: relative; margin: 0; border-radius: 0; }
/* Edge to edge, and taller than an inline map because it is the first thing
   on the page rather than a footnote to a list. */
.compare-map .map { height: 440px; border: 0; border-radius: 0; }

/*
 * The privacy note belongs ON the map: it explains what the pins mean, and a
 * line of grey text under a full-width map reads as a caption for the page.
 */
.compare-map .map-note, .search-map .map-note {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0;
    padding: .45rem .9rem;
    background: var(--surface);
    /* The page's own ink, not the muted grey: it is a sentence explaining what
       the pins mean, printed over a photograph of a map. Declared here as well
       as beating `.muted` in the markup, which resolves to the grey. */
    color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
    font-size: 12px; line-height: 20px; max-width: calc(100% - 2rem);
}

@media (max-width: 640px) {
    .compare-map .map { height: 320px; }
    .compare-map .map-note, .search-map .map-note { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
}

/* ---------- Proprietăți recomandate ---------- */

.section-recommended h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
.section-recommended > .wrap > h2::after { content: none; }
.section-recommended .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

/*
 * A row that scrolls sideways. Scroll-snap is what makes it usable with no
 * script: a finger, a trackpad and a scrollbar all page through it, and the
 * padding on either side lets the first and last card sit where the wrap
 * would have put them.
 */
/*
 * The rail scrolls, the page does not. `overflow-x: clip` on the section is
 * the belt to that brace: a row wider than the window used to give the whole
 * document a horizontal scrollbar, which is the one thing a full-width row
 * must never do.
 */
.section-recommended { overflow-x: clip; }
/*
 * And the document itself, because a single stray pixel anywhere gives every
 * page a horizontal scrollbar and nobody can tell which element did it.
 * `clip` rather than `hidden`: hidden would make the body a scroll container
 * and the sticky header would stop sticking.
 */
body { overflow-x: clip; }

.recommended-rail {
    display: flex; gap: 1rem; margin-top: 2rem;
    max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    /*
     * The drag stops at the end of the row instead of continuing into the
     * page. Without this a pull past the last card scrolls the DOCUMENT
     * sideways, which is a white strip down the right of every screenshot and
     * cannot be clipped away — the page really has scrolled.
     */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0 1rem 1rem;
    /* No scrollbar of its own: it is dragged, swiped or paged with the arrows,
       and a second scrollbar under a photograph reads as a mistake. */
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab;
}
.recommended-rail::-webkit-scrollbar { display: none; }
.recommended-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* Snapping off for the instant the loop jumps by one set, or the browser
   animates the jump and the seam becomes visible. */
.recommended-rail.is-jumping { scroll-snap-type: none; scroll-behavior: auto; }
/* A drag must not end in following the link it started on. */
.recommended-rail.is-dragging a { pointer-events: none; }

.recommended-card { flex: 0 0 min(86%, 1100px); scroll-snap-align: center; }
.recommended-card > a {
    position: relative; display: block; aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) + 4px); overflow: hidden;
    color: #fff; text-decoration: none; background: var(--surface-alt);
}
.recommended-card img { width: 100%; height: 100%; object-fit: cover; }
.recommended-empty { display: block; width: 100%; height: 100%; background: var(--surface-alt); }

/* The words sit on a photograph nobody chose for its contrast. */
.recommended-body {
    position: absolute; inset: auto 0 0 0; display: block;
    padding: 4rem 1.6rem 1.4rem;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .78));
}
.recommended-title { display: block; font-size: 28px; line-height: 34px; font-weight: 500; }
.recommended-specs { display: block; margin-top: .35rem; font-size: 15px; opacity: .9; }
.recommended-price { display: block; margin-top: .5rem; font-size: 20px; font-weight: 600; }

.recommended-badge, .recommended-status {
    position: absolute; top: 1rem; padding: .3rem .8rem;
    border-radius: 999px; font-size: .8rem; font-weight: 600;
}
/* The dark ink the badges on a card already use. White on the terracotta that
   ships is 3.7:1 — under AA for a .8rem label, and it is the one word on the
   photograph that says the listing is worth a second look. */
.recommended-badge { left: 1rem; background: var(--accent); color: var(--accent-ink); }
.recommended-status { right: 1rem; background: var(--brand); color: var(--brand-ink); }

.recommended-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.recommended-arrows { display: inline-flex; gap: .5rem; }
.recommended-arrows[hidden] { display: none; }
.recommended-arrows button {
    width: 40px; height: 40px; border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 1.1rem; cursor: pointer;
}
.recommended-arrows button:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 640px) {
    .recommended-title { font-size: 20px; line-height: 26px; }
    .recommended-body { padding: 3rem 1rem 1rem; }
    .recommended-card { flex-basis: 92%; }
}

/* ---------- Explorează: big tiles with a name and a count ---------- */

.section-explore h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
.section-explore > .wrap > h2::after { content: none; }
.section-explore .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

/*
 * Four across, and every other tile taller — the rows interlock rather than
 * lining up, which is what makes a grid of photographs look composed. Dense
 * packing fills the gap the tall ones leave.
 */
/*
 * Tiles of 342x350 and 342x433, interlocking.
 *
 * One-pixel rows with no row gap, and each tile spanning its own height plus
 * the 16px that separates it from the one below — which is the only way to
 * hold exact pixel heights AND have the rows interlock. A row gap would be
 * multiplied by every one of those rows.
 */
.explore-grid {
    display: grid; margin-top: 2rem;
    grid-template-columns: minmax(0, 342px);
    justify-content: center;
    column-gap: 1rem; row-gap: 0;
    grid-auto-rows: 1px;
    /*
     * Dense, or a column waits for the cursor.
     *
     * Auto-placement moves forward only: once a tile has been put low down in
     * one column, the next tile starts looking from there — even in a column
     * that has been free since much higher up. That is a hole under the short
     * tile of every column whose neighbour is tall. Dense packing looks back
     * and fills it, and it cannot reorder anything here because every tile
     * already names its own column.
     */
    grid-auto-flow: dense;
}
.explore-tile {
    position: relative; display: block; overflow: hidden;
    height: 350px; grid-row: span 366; margin-bottom: 16px;
    border-radius: calc(var(--radius) + 2px);
    color: #fff; text-decoration: none;
}

/*
 * The checkerboard: a column starts short and its neighbour starts tall, so
 * the rows never line up.
 *
 * Written per column count, because which tile is the tall one depends on how
 * many columns there are — with three columns the pattern is simply every
 * other tile, with two and four it repeats over four and eight. That is also
 * why the count is fixed per breakpoint instead of auto-fit: `nth-child` has
 * to agree with it.
 */
.explore-tile:nth-child(even) { height: 433px; grid-row: span 449; }

@media (min-width: 730px) {
    .explore-grid { grid-template-columns: repeat(2, 342px); }
    /*
     * Each tile is told which column it is in.
     *
     * Auto-placement will not do it: with tiles of two different row spans the
     * cursor skips cells it cannot fit, so the sixth tile is not necessarily
     * in the second column — and a checkerboard written with `nth-child` then
     * describes a layout the browser did not build. With the column fixed,
     * each column packs down its own tiles and index and position agree.
     */
    .explore-tile:nth-child(2n + 1) { grid-column: 1; }
    .explore-tile:nth-child(2n) { grid-column: 2; }
    /*
     * `:nth-child(n)` rather than the bare class: this has to undo the
     * previous breakpoint's tall tiles, and a class selector loses to the
     * `:nth-child` that made them tall. Same specificity, later in the file,
     * so it wins — and then the rules below make the right ones tall again.
     */
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(4n + 2),
    .explore-tile:nth-child(4n + 3) { height: 433px; grid-row: span 449; }
}

@media (min-width: 1090px) {
    .explore-grid { grid-template-columns: repeat(3, 342px); }
    .explore-tile:nth-child(3n + 1) { grid-column: 1; }
    .explore-tile:nth-child(3n + 2) { grid-column: 2; }
    .explore-tile:nth-child(3n) { grid-column: 3; }
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(even) { height: 433px; grid-row: span 449; }
}

@media (min-width: 1440px) {
    .explore-grid { grid-template-columns: repeat(4, 342px); }
    .explore-tile:nth-child(4n + 1) { grid-column: 1; }
    .explore-tile:nth-child(4n + 2) { grid-column: 2; }
    .explore-tile:nth-child(4n + 3) { grid-column: 3; }
    .explore-tile:nth-child(4n) { grid-column: 4; }
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(8n + 2),
    .explore-tile:nth-child(8n + 4),
    .explore-tile:nth-child(8n + 5),
    .explore-tile:nth-child(8n + 7) { height: 433px; grid-row: span 449; }
}
.explore-tile img { width: 100%; height: 100%; object-fit: cover; }

/*
 * A dark veil at rest, lifted under the cursor: the tile somebody is pointing
 * at is the one in full colour. It sits above the photograph and below the
 * words, which keep their own gradient — the label has to stay readable at
 * both ends of the fade, not only at one.
 */
.explore-tile::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: #000; opacity: .3;
    transition: opacity .25s ease;
}
.explore-tile:hover::before,
.explore-tile:focus-visible::before { opacity: 0; }

/* The words sit on somebody's photograph, so they carry their own backing. */
.explore-body {
    position: absolute; inset: auto 0 0 0; z-index: 2; display: block;
    padding: 3rem 1rem 1rem; text-align: center;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .7));
}
.explore-label { display: block; font-weight: 500; font-size: 20px; line-height: 23px; }
.explore-count { display: block; margin-top: .15rem; font-size: .85rem; line-height: 21px; opacity: .9; }

/* No photograph anywhere in that category: a tint rather than an empty box. */
.explore-tint-0 { background: #2f4858; }
.explore-tint-1 { background: #33658a; }
.explore-tint-2 { background: #86bbd8; }
.explore-tint-3 { background: #758e4f; }
.explore-tint-4 { background: #b56576; }
.explore-tint-5 { background: #6d597a; }

@media (max-width: 640px) {
    /* One column, and shorter: a 433px tile is most of a phone screen. */
    .explore-tile:nth-child(n) { height: 260px; grid-row: span 276; }
    .explore-tile:nth-child(even) { height: 320px; grid-row: span 336; }
}

/* --------------------------------------------------------------------------
   Valuation band: the invitation over a photograph
   -------------------------------------------------------------------------- */

/*
 * This page IS this band: a photograph the width of the screen, the invitation
 * over it, and the form in a card beside it.
 *
 * Its own rules rather than the hero's, though it looks like one. A hero is
 * words centred on a picture; this is two columns on one, and the card decides
 * how tall the band is — the hero's own min-height would either crop the card
 * or leave a field below the fold.
 */
.section-valuation {
    position: relative;
    color: #fff;
    background-image: var(--valuation-image, none);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-dark);
    padding-block: var(--section-gap);
}

/* The same scrim the hero uses, for the same reason: an agency will upload
   something bright and something dark in the same week. */
.section-valuation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(9 14 24 / .55) 0%, rgb(9 14 24 / .35) 45%, rgb(9 14 24 / .7) 100%);
}
.section-valuation > * { position: relative; z-index: 1; }

/*
 * Centred against the card rather than aligned to its top: the words are three
 * lines and the form is fifteen, and the two columns read as one band only
 * when the short one sits in the middle of the tall one.
 */
.valuation-split { align-items: center; }

/*
 * Both columns of words stop at the same 595px, in PIXELS rather than in `ch`:
 * a measure in characters moves with the font size, so the heading and the
 * paragraph under it wrapped at two different widths — and at two more again
 * on the other theme, whose heading is 40px where this one is 44. One number,
 * one edge.
 */
.valuation-intro h2 {
    color: inherit;
    font-weight: 500; font-size: 44px; line-height: 52px;
    margin: 0 0 1.2rem;
    max-width: 595px;
    text-shadow: 0 2px 24px rgb(0 0 0 / .35);
}
.valuation-intro .rich-text { font-size: 16px; line-height: 26px; max-width: 595px; }
.valuation-intro .rich-text p { margin: 0 0 1rem; }
.valuation-intro .rich-text p:last-child { margin-bottom: 0; }

/*
 * The card is the contact page's shell — one definition of "a white card with
 * a form in it", so the two pages cannot drift — with the room this band gives
 * it and a submit that reads as the end of a form rather than as a link.
 */
.valuation-card { padding: 2rem; }
.valuation-card .btn-block {
    margin-top: .6rem;
    text-transform: uppercase;
    font-weight: 500; font-size: 14px; line-height: 14px; letter-spacing: .04em;
}

@media (max-width: 899px) {
    /* Stacked, the words come first and the card follows: on a phone the band
       is read before it is filled in. */
    .valuation-intro h2 { font-size: 32px; line-height: 39px; max-width: none; }
}

/* --------------------------------------------------------------------------
   No rule under a section's heading
   -------------------------------------------------------------------------- */

/*
 * No rule under a section's heading, said HERE and not only in minimal.css:
 * this theme is the one that drew the 56px underline, and while any theme file
 * declares it an identical selector in the base loses the tie and the line
 * stays on. Kept after the declaration went, because it is what a theme adding
 * one back would be measured against — and it is asserted in SiteConfigTest.
 *
 * The underline also carried the space beneath the heading — its own
 * `margin: gap-sm auto gap-lg` — so the heading carries that space itself, or
 * the section closes up around it.
 */
.section > .wrap > h2::after { content: none; }
/* var(--gap), which is the 1.5rem asked for: the underline's old
   `margin-bottom` was gap-lg, and a heading carrying 2.5rem of air on its own
   read as a section that had lost something under it. */
.section > .wrap > h2 { margin-bottom: var(--gap); }