/* ==========================================================================
   Construct Family brochure: components added 2026-10 (gallery, home
   "Lucrări realizate" section, Google reviews block, trust strip, CTA band,
   WhatsApp button, footer legal line, product CTA box, click-to-load map). Loaded after style.css on every public
   page via cf_site_css(). Tokens follow the existing brochure palette.
   ========================================================================== */

:root {
    --cf-accent: #dc2751;        /* brochure accent, white text 4.72:1 */
    --cf-accent-dark: #b51d42;
    --cf-ink: #1b1b1b;
    --cf-text: #4f4f4f;
    --cf-muted: #666;
    --cf-line: #e2e2e6;
    --cf-soft: #f0f0f3;
    --cf-dark: #141414;
    --cf-wa: #25d366;            /* WhatsApp green, used with dark ink text */
    --cf-wa-ink: #0b3d1f;
    --cf-star: #f2a600;
    --cf-radius: 4px;
    --cf-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --cf-body: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- Metric-matched fallback fonts --------------------------------------
   Google Fonts load with display=swap; until Hind/Poppins arrive the text is
   drawn in Arial/Roboto, which is wider or narrower, so paragraphs re-wrapped
   when the web font swapped in and pushed content down (CLS up to 0.25 in
   Lighthouse on the home hero and the gallery header). These faces resize the
   local fallback to the web font's average advance and vertical metrics
   (computed with fontTools from the served files, 2026-10-07). */
@font-face { font-family: 'Hind Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 96.8%; ascent-override: 109%; descent-override: 56.4%; line-gap-override: 0%; }
@font-face { font-family: 'Hind Fallback R'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 96.3%; ascent-override: 109.6%; descent-override: 56.7%; line-gap-override: 0%; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 110%; ascent-override: 95.5%; descent-override: 31.8%; line-gap-override: 9.1%; }
@font-face { font-family: 'Poppins Fallback R'; font-weight: 900; src: local('Roboto Black'), local('Roboto-Black'); size-adjust: 115.5%; ascent-override: 90.9%; descent-override: 30.3%; line-gap-override: 8.7%; }
body, p,
.header .caption p,
.cf-gal-hero__lead { font-family: 'Hind', 'Hind Fallback', 'Hind Fallback R', sans-serif; }
h1, h2, h3, h4, h5, h6,
.header .caption h1,
.section-padding h2 { font-family: 'Poppins', 'Poppins Fallback', 'Poppins Fallback R', sans-serif; }

.cf-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* --- Home hero: CSS scroll-snap slider (replaces owl.carousel) ---------- */
.cf-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.cf-hero__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.cf-hero__track::-webkit-scrollbar { display: none; }
.cf-hero__track:focus { outline: none; }
.cf-hero__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-size: cover;
    background-position: center;
    background-color: #1b1b1b;
}
.cf-hero__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5vh;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.cf-hero__dot {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.cf-hero__dot::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    transition: background-color .2s ease, transform .2s ease;
}
.cf-hero__dot.is-active::before { background: var(--cf-accent); transform: scale(1.2); }
.cf-hero__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 8px;
    border: 2px solid var(--cf-accent);
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.cf-hero__arrow:hover { background: var(--cf-accent); }
.cf-hero__dot:focus-visible,
.cf-hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cf-hero__track { scroll-behavior: auto; } }

/* --- Eyebrow (the template uses <h6> above every section title, which breaks
   the heading order; new components use this paragraph instead) ---------- */
.cf-eyebrow {
    display: inline-block;
    margin: 0 0 5px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
    line-height: 1.4;
    color: var(--cf-accent-dark);   /* 5.9:1 on #f0f0f3, the template red is 4.1:1 */
}
.cf-cta-band .cf-eyebrow { font-size: 20px; color: #ffb3c4; }

/* --- Buttons ------------------------------------------------------------- */
.cf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 80px;
    border: 2px solid transparent;
    font-family: var(--cf-head);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cf-button:focus-visible,
.cf-chip:focus-visible,
.cf-job:focus-visible,
.cf-wa-float:focus-visible,
.cf-rating-line:focus-visible {
    outline: 3px solid var(--cf-accent);
    outline-offset: 3px;
}
.cf-button i { font-size: 18px; }
.cf-button--accent { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
.cf-button--accent:hover { background: var(--cf-accent-dark); border-color: var(--cf-accent-dark); color: #fff; }
.cf-button--wa { background: var(--cf-wa); border-color: var(--cf-wa); color: var(--cf-wa-ink); }
.cf-button--wa:hover { background: #1fb457; border-color: #1fb457; color: var(--cf-wa-ink); }
.cf-button--ghost-dark { background: transparent; border-color: var(--cf-ink); color: var(--cf-ink); }
.cf-button--ghost-dark:hover { background: var(--cf-ink); color: #fff; }
.cf-button--ghost-light { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.cf-button--ghost-light:hover { background: #fff; color: var(--cf-ink); }
.cf-button--block { display: flex; width: 100%; }

/* --- Stars and the compact rating line ---------------------------------- */
.cf-stars {
    --cf-stars: 0%;
    position: relative;
    display: inline-block;
    width: 5.5em;
    height: 1.1em;
    vertical-align: -0.15em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfcfd4' d='M12 2.5l2.9 6.2 6.6.7-5 4.5 1.4 6.6L12 17.2l-5.9 3.3 1.4-6.6-5-4.5 6.6-.7z'/%3E%3C/svg%3E") repeat-x left center / 1.1em 1.1em;
}
.cf-stars::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--cf-stars);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2a600' d='M12 2.5l2.9 6.2 6.6.7-5 4.5 1.4 6.6L12 17.2l-5.9 3.3 1.4-6.6-5-4.5 6.6-.7z'/%3E%3C/svg%3E") repeat-x left center / 1.1em 1.1em;
}
.cf-rating-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    color: inherit;
    text-decoration: none;
}
a.cf-rating-line:hover .cf-rating-line__count { text-decoration: underline; }
.cf-rating-line strong { font-weight: 700; }

/* --- Trust strip under the home hero ------------------------------------ */
.cf-trust {
    background: var(--cf-dark);
    color: #e6e6e6;
    font-family: var(--cf-body);
    font-size: 15px;
}
.cf-trust__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
}
.cf-trust__list li { display: flex; align-items: center; gap: 8px; }
.cf-trust__list i { color: var(--cf-accent); }
.cf-trust a { color: #fff; }
.cf-trust a:hover { color: #fff; text-decoration: underline; }

/* --- Google reviews block ------------------------------------------------ */
.cf-reviews { background: #fff; }
.cf-reviews.bg-gry { background: var(--cf-soft); }
.cf-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 32px;
    max-width: 860px;
    margin: 0 auto 40px;
    padding: 24px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}
.cf-reviews__score { display: flex; align-items: baseline; gap: 6px; }
.cf-reviews__value { font-family: var(--cf-head); font-weight: 900; font-size: 56px; line-height: 1; color: var(--cf-ink); }
.cf-reviews__of { font-family: var(--cf-head); font-weight: 600; color: var(--cf-muted); }
.cf-reviews__meta .cf-stars { font-size: 22px; }
.cf-reviews__meta p { margin: 4px 0 0; line-height: 1.4; }
.cf-reviews__count { color: var(--cf-ink); font-weight: 600; }
.cf-reviews__date { font-size: 14px; color: var(--cf-muted); }
.cf-reviews__sub {
    text-align: center;
    font-family: var(--cf-head);
    font-weight: 600;
    color: var(--cf-ink);
    margin-bottom: 16px;
}
.cf-reviews__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cf-review figure {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
}
/* reset the template's red blockquote card (style.css "blockquote") */
.cf-review blockquote {
    margin: 8px 0 16px;
    padding: 0;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cf-text);
    overflow: visible;
}
.cf-review blockquote::before { content: none; }
.cf-review blockquote p { margin: 0; max-width: none; color: var(--cf-text); font-size: 16px; line-height: 1.6; }
.cf-review blockquote p::before { content: "„"; }
.cf-review blockquote p::after { content: "”"; }
.cf-review__more { font-size: 14px; color: var(--cf-accent-dark); text-decoration: underline; margin-bottom: 12px; }
.cf-review figcaption { display: flex; align-items: center; gap: 12px; }
.cf-review__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cf-ink);
    color: #fff;
    font-family: var(--cf-head);
    font-weight: 700;
    font-size: 15px;
}
.cf-review__who { display: flex; flex-direction: column; line-height: 1.35; }
.cf-review__name { font-family: var(--cf-head); font-weight: 700; color: var(--cf-ink); }
.cf-review__meta { font-size: 14px; color: var(--cf-muted); }
.cf-reviews__note {
    max-width: 860px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cf-muted);
}
@media (max-width: 991px) {
    .cf-reviews__list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .cf-review { scroll-snap-align: start; }
}
@media (min-width: 576px) and (max-width: 991px) {
    .cf-reviews__list { grid-auto-columns: 46%; }
}

/* --- CTA band (replaces the hand-copied lets-talk sections) ------------- */
.cf-cta-band { background-size: cover; background-position: center; }
.cf-cta-band .cf-cta-band__title {
    font-size: 75px;
    color: #fff;
    line-height: 1em;
    font-weight: 900;
    margin-bottom: 15px;
}
.cf-cta-band .cf-cta-band__title span {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    opacity: .85;
}
.cf-cta-band .cf-cta-band__lead { max-width: 640px; margin: 0 auto 28px; }
.cf-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.cf-cta-band__actions .btn-1,
.cf-cta-band__actions .btn-5 { margin: 0; }
.cf-cta-band__actions .cf-button { padding: 18px 34px; font-size: 16px; font-weight: 900; }
@media (max-width: 767px) {
    .cf-cta-band .cf-cta-band__title { font-size: 48px; }
    .cf-cta-band__actions a { width: 100%; }
}

/* --- Floating WhatsApp button ------------------------------------------- */
.cf-wa-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 20px 0 16px;
    border-radius: 28px;
    background: var(--cf-wa);
    color: var(--cf-wa-ink);
    font-family: var(--cf-head);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    text-decoration: none;
    animation: cf-wa-in .4s ease-out .8s both;
}
.cf-wa-float i { font-size: 28px; line-height: 1; }
.cf-wa-float:hover { color: var(--cf-wa-ink); background: #1fb457; }
@keyframes cf-wa-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) {
    .cf-wa-float { width: 56px; padding: 0; justify-content: center; }
    .cf-wa-float__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
}
@media (prefers-reduced-motion: reduce) { .cf-wa-float { animation: none; } }
/* keep the back-to-top circle clear of the WhatsApp button */
.progress-wrap { bottom: 90px !important; }

/* --- Footer additions ---------------------------------------------------- */
.footer .top .cf-foot-brand {
    font-family: var(--cf-head);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2em;
    color: #fff;
    margin-bottom: 15px;
}
.footer .top .cf-foot-brand span { color: var(--cf-accent); }
.footer .top h2.cf-foot-h { font-size: 24px; line-height: 1.25em; color: #fff; margin-bottom: 15px; }
.footer .top .cf-foot-wa { margin-top: 6px; }
.footer .top .cf-foot-wa a { color: #fff; }
.footer .top .cf-foot-wa a:hover { color: var(--cf-wa); }
.footer .top .cf-foot-rating { margin-top: 18px; color: #ddd; }
.footer .top .cf-foot-rating a { color: #fff; }
.footer .cf-foot-legal { display: block; text-align: right; }
.footer .cf-foot-legal p { margin-bottom: 0; line-height: 1.8; }
.footer .cf-foot-legal p a { line-height: 1.8; }
@media (max-width: 991px) { .footer .cf-foot-legal { text-align: left; margin-top: 12px; } }

/* --- Product page CTA box ------------------------------------------------ */
.cf-product-cta {
    margin-bottom: 30px;
    padding: 24px;
    border-radius: var(--cf-radius);
    background: var(--cf-ink);
    color: #ddd;
}
.cf-product-cta h2.cf-product-cta__title {
    font-size: 22px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 8px;
}
.cf-product-cta p { color: #ccc; margin-bottom: 16px; }
.cf-product-cta__buttons { display: grid; gap: 10px; }
.cf-product-cta__links { margin: 16px 0 0; padding: 0; list-style: none; }
.cf-product-cta__links li { margin: 0; padding: 0; }
.cf-product-cta__links li::before,
.cf-product-cta__links li::after { content: none; }
.cf-product-cta__links li + li { margin-top: 8px; }
.cf-product-cta__links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cf-product-cta__links a:hover { color: #fff; text-decoration-color: var(--cf-accent); }
.cf-product-cta--inline { margin: 0 0 30px; padding: 18px; }
.cf-product-cta--side { margin-top: 30px; }
@media (min-width: 992px) {
    /* keep the quote box in view while the long description scrolls */
    .services-single .sidebar-side > .sidebar { height: 100%; }
    .cf-product-cta--side { position: sticky; top: 120px; }
}
@media (min-width: 576px) { .cf-product-cta--inline .cf-product-cta__buttons { grid-template-columns: 1fr 1fr; } }

/* --- Contact: click-to-load map ----------------------------------------- */
.cf-map__facade {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 40px 16px;
    background-color: #e9eaee;
    background-image:
        linear-gradient(rgba(27,27,27,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,27,27,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    text-align: center;
}
.cf-map__card {
    max-width: 520px;
    padding: 28px 24px;
    border-radius: var(--cf-radius);
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.cf-map__card h2 { font-size: 22px; margin-bottom: 8px; }
.cf-map__card p { margin-bottom: 16px; }
.cf-map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cf-map__note { margin: 16px 0 0 !important; font-size: 13px; line-height: 1.5; color: var(--cf-muted); }
.cf-map iframe { display: block; width: 100%; height: 500px; border: 0; }

/* --- Gallery page -------------------------------------------------------- */
.cf-gal-hero {
    position: relative;
    padding: 150px 0 48px;
    background: radial-gradient(ellipse at 80% 0%, rgba(220,39,81,.22), transparent 55%), var(--cf-dark);
    color: #ddd;
}
.cf-gal-hero h1 {
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    max-width: 900px;
    margin-bottom: 16px;
}
.cf-gal-hero__lead { max-width: 760px; color: #d4d4d4; font-size: 17px; margin-bottom: 20px; }
.cf-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-family: var(--cf-head); font-size: 14px; font-weight: 600; }
.cf-crumbs li { color: #bbb; }
.cf-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--cf-accent); }
.cf-crumbs a { color: #fff; }
.cf-crumbs a:hover { color: #fff; text-decoration: underline; }
.cf-gal-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: #e6e6e6;
}
.cf-gal-hero__trust li { display: flex; align-items: center; gap: 8px; }
.cf-gal-hero__trust i { color: var(--cf-accent); }
.cf-gal-hero__trust a { color: #fff; }

.cf-preview-banner {
    margin: 0;
    padding: 12px 16px;
    background: #fff4cc;
    color: #4a3b00;
    border-bottom: 2px solid #e0b100;
    font-weight: 600;
    text-align: center;
}

.cf-gal { padding: 48px 0 90px; background: var(--cf-soft); }
.cf-gal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid #c9c9cf;
    border-radius: 999px;
    background: #fff;
    color: var(--cf-ink);
    font-family: var(--cf-head);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.cf-chip span { color: var(--cf-muted); font-weight: 500; }
.cf-chip:hover { border-color: var(--cf-ink); color: var(--cf-ink); }
.cf-chip.is-active { background: var(--cf-ink); border-color: var(--cf-ink); color: #fff; }
.cf-chip.is-active span { color: #ccc; }
.cf-gal__heading { font-size: 24px !important; margin-bottom: 20px !important; }
.cf-gal__heading small { font-family: var(--cf-body); font-size: 16px; font-weight: 400; color: var(--cf-muted); }
@media (max-width: 575px) { .cf-gal__heading small { display: block; margin-top: 4px; } }

.cf-gal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 576px) { .cf-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cf-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cf-job {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--cf-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    color: var(--cf-ink);
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
}
.cf-job:hover { color: var(--cf-ink); box-shadow: 0 10px 28px rgba(0,0,0,.14); transform: translateY(-2px); }
.cf-job__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.cf-job__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.cf-job:hover .cf-job__media img { transform: scale(1.03); }
.cf-job__count {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20,20,20,.82);
    color: #fff;
    font-family: var(--cf-head);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.cf-job__body { padding: 16px 18px 20px; }
.cf-job__title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 0 6px !important; color: var(--cf-ink); }
.cf-job__product { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cf-text); }
.cf-job__meta { margin: 6px 0 0; font-size: 14px; color: var(--cf-muted); }

.cf-gal-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 28px 24px;
    border-radius: var(--cf-radius);
    background: var(--cf-ink);
    color: #ddd;
}
.cf-gal-cta h3 { color: #fff; font-size: 22px; }
.cf-gal-cta p { color: #ccc; }
.cf-gal-cta .cf-button + .cf-button { margin-top: 10px; }
.cf-gal__privacy { margin: 28px 0 0; font-size: 14px; color: var(--cf-muted); }

/* single job (no-JS fallback and shareable view) */
.cf-job-detail { padding: 48px 0 90px; background: var(--cf-soft); }
.cf-job-detail__back { display: inline-block; margin-bottom: 20px; font-family: var(--cf-head); font-weight: 600; color: var(--cf-ink); text-decoration: underline; }
.cf-job-detail__photos { display: grid; gap: 28px; max-width: 1110px; }
.cf-job-detail figure { margin: 0; background: #fff; border-radius: var(--cf-radius); overflow: hidden; }
.cf-job-detail figure img { display: block; width: 100%; height: auto; }
.cf-job-detail figcaption { padding: 12px 16px; font-size: 15px; color: var(--cf-text); }
.cf-job-detail__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Home: "Lucrări realizate" (index.php) -------------------------------
   Wide screens: 4-column grid of 4:3 cells, the first tile 2x2, the second
   two cells tall (row height follows the grid width through container query
   units, with a fixed fallback). 768-991 px: the same in 3 columns. Up to
   767 px (phones, landscape phones, small tablets): a swipeable strip of
   square cards, at most 320 px wide, that bleeds past the container padding
   (to the screen edges on phones). The 3-column grid is not used below 768:
   its small tiles drop to about 164x123 and the caption covers the photo.
   Every tile has a fixed size before its lazy image arrives (no layout shift). */
.cf-home-gal { background: var(--cf-soft); }
.cf-home-gal__lead {
    max-width: 640px;
    margin: 6px auto 0;
    color: var(--cf-text);
    font-size: 17px;
    line-height: 1.6;
}
.cf-home-gal__wrap { container-type: inline-size; }
.cf-home-gal__grid {
    --cf-gap: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
    grid-auto-rows: calc((100cqw - 3 * var(--cf-gap)) / 4 * .75);
    grid-auto-flow: dense;
    gap: var(--cf-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cf-home-gal__item { position: relative; min-width: 0; margin: 0; padding: 0; }
.cf-home-gal__item::before,
.cf-home-gal__item::after { content: none; }
.cf-home-gal__item--feature { grid-column: span 2; grid-row: span 2; }
.cf-home-gal__item--tall { grid-row: span 2; }
.cf-home-gal__tile {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--cf-radius);
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    color: #fff;
    text-decoration: none;
    transition: box-shadow .25s ease;
}
.cf-home-gal__tile:hover { color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.cf-home-gal__tile:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 3px; }
.cf-home-gal__tile picture,
.cf-home-gal__tile img { display: block; width: 100%; height: 100%; }
.cf-home-gal__tile img {
    object-fit: cover;
    object-position: var(--cf-pos, 50% 50%);
    transition: transform .6s ease;
}
.cf-home-gal__tile:hover img,
.cf-home-gal__tile:focus-visible img { transform: scale(1.04); }
.cf-home-gal__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 36px 14px 12px;
    background: linear-gradient(to top, rgba(12,12,12,.86), rgba(12,12,12,.6) 55%, rgba(12,12,12,0));
}
.cf-home-gal__cat {
    font-family: var(--cf-head);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffc4d2;
}
.cf-home-gal__text {
    font-family: var(--cf-head);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}
.cf-home-gal__item--tall .cf-home-gal__text { font-size: 15px; }
.cf-home-gal__item--feature .cf-home-gal__cap { padding: 72px 24px 20px; }
.cf-home-gal__item--feature .cf-home-gal__cat { font-size: 13px; }
.cf-home-gal__item--feature .cf-home-gal__text { font-size: 21px; font-weight: 700; }
.cf-home-gal__count {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20,20,20,.82);
    color: #fff;
    font-family: var(--cf-head);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.cf-home-gal__zoom {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cf-accent);
    color: #fff;
    font-size: 15px;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease;
}
.cf-home-gal__tile:hover .cf-home-gal__zoom,
.cf-home-gal__tile:focus-visible .cf-home-gal__zoom { opacity: 1; transform: none; }
.cf-home-gal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}
.cf-home-gal__total { font-weight: 500; }
@media (max-width: 991px) {
    .cf-home-gal__grid {
        --cf-gap: 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 160px;
        grid-auto-rows: calc((100cqw - 2 * var(--cf-gap)) / 3 * .75);
    }
    .cf-home-gal__item--feature .cf-home-gal__text { font-size: 18px; }
    .cf-home-gal__item--feature .cf-home-gal__cap { padding: 56px 18px 16px; }
}
@media (max-width: 767px) {
    .cf-home-gal__lead { font-size: 16px; }
    .cf-home-gal__wrap { margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); }
    .cf-home-gal__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cf-home-gal__grid::-webkit-scrollbar { display: none; }
    .cf-home-gal__item {
        flex: 0 0 80%;
        flex: 0 0 min(80%, 320px);
        aspect-ratio: 1 / 1;
        scroll-snap-align: start;
    }
    .cf-home-gal__cap,
    .cf-home-gal__item--feature .cf-home-gal__cap { padding: 44px 16px 14px; }
    .cf-home-gal__cat,
    .cf-home-gal__item--feature .cf-home-gal__cat { font-size: 12px; }
    .cf-home-gal__text,
    .cf-home-gal__item--tall .cf-home-gal__text,
    .cf-home-gal__item--feature .cf-home-gal__text { font-size: 16px; font-weight: 600; }
}
@media (max-width: 575px) {
    .cf-home-gal__actions { margin-top: 28px; }
    .cf-home-gal__actions .cf-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-home-gal__tile img,
    .cf-home-gal__zoom { transition: none; }
    .cf-home-gal__tile:hover img,
    .cf-home-gal__tile:focus-visible img { transform: none; }
}

/* --- Articles: links to the shop guides (articol.php, articole.php) ------ */
.cf-see-also {
    margin-top: 40px;
    padding: 24px;
    border-left: 3px solid var(--cf-accent);
    border-radius: var(--cf-radius);
    background: var(--cf-soft);
}
.section-padding h2.cf-see-also__title { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.cf-see-also__list { margin: 0; padding: 0; list-style: none; }
.cf-see-also__list li { margin: 0; padding: 0; }
.cf-see-also__list li::before,
.cf-see-also__list li::after { content: none; }
.cf-see-also__list li + li { margin-top: 8px; }
.cf-see-also__list a {
    color: var(--cf-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--cf-accent);
    text-underline-offset: 3px;
}
.cf-see-also__list a:hover { color: var(--cf-accent-dark); }
.cf-more-guides { margin: 8px 0 0; color: var(--cf-text); }
.cf-more-guides a { color: var(--cf-accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* style.css animates every img (transition: all .5s); keep PhotoSwipe's zoom crisp */
.pswp img { transition: none; }

/* PhotoSwipe caption with the quote CTA */
.pswp__cf-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 16px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.6) 70%, transparent);
    color: #f2f2f2;
    font-family: var(--cf-body);
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    pointer-events: auto;
}
.pswp__cf-caption strong { display: block; font-family: var(--cf-head); font-size: 16px; color: #fff; margin-bottom: 2px; }
.pswp__cf-caption p { margin: 0 0 10px; color: #e0e0e0; font-size: 15px; }
.pswp__cf-caption .cf-pswp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pswp__cf-caption .cf-button { min-height: 44px; padding: 8px 18px; font-size: 14px; }

@media (max-width: 767px) {
    .cf-gal-hero { padding: 120px 0 36px; }
    .cf-gal-hero h1 { font-size: 30px; }
    .cf-gal-hero__lead { font-size: 16px; }
    /* one item per line: the row wrapped differently before and after the web
       fonts loaded and pushed the grid down (CLS 0.16 in Lighthouse) */
    .cf-gal-hero__trust { flex-direction: column; gap: 6px; }
    .cf-gal-hero__trust li { min-height: 26px; }
    .cf-reviews__value { font-size: 44px; }
    .cf-map__facade { min-height: 360px; }
}