/* =============================================================================
   Pagina publica a unei zone turistice — /{lang}/z/{slug}

   Textele despre zona se intercaleaza cu listele din marketplace. Sectiunile
   alterneaza fundal alb / fundal colorat, ca la restul paginilor publice.

   Fisierul NU are reset-uri globale (spre deosebire de provider-page.css), ca
   sa poata fi incarcat linistit peste stilurile de layout.
   ========================================================================== */

/* FONTURI — aceleasi ca pe pagina de categorie si pe home.

   Sectiunile de pe home (.home-about-title si celelalte din public.css)
   folosesc Manrope, nu --font-display, care e Playfair Display si apare doar in
   hero-ul vechi. Vezi blocurile pereche din category-page.css si guide-page.css.

   Aici Manrope sta pe .zone-wrapper, care imbraca tot continutul paginii, deci
   header-ul si footer-ul raman neatinse. */

.zone-wrapper {
    font-family: 'Manrope', var(--font-body);
    color: #1f2933;
}

.zone-hero-inner h1,
.zone-section-head h2,
.zone-guide-feature-body h2,
.zone-practical h2,
.zone-cta h2 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    letter-spacing: -.03em;
}

.zone-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.zone-section { padding: 80px 0; }
.zone-section--tinted { background: #f6faf8; }

.zone-section-head {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}
.zone-section-head h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #17252b;
}
.zone-section-head p {
    font-size: 16px;
    line-height: 1.7;
    color: #596570;
    margin: 0;
}

.zone-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    margin-bottom: 18px;
    border-radius: 30px;
    background: rgba(0, 153, 26, .10);
    color: #00991A;
    font-size: 13px;
    font-weight: 700;
}

/* =============================================================================
   HERO
   ========================================================================== */

.zone-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Zonele nu au imagine in baza de date; un degrade e preferabil unei
   fotografii alese la intamplare, care ar putea arata alt peisaj. */
.zone-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #17323a 0%, #1f5a4d 55%, #2b7a63 100%);
}
.zone-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.10), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.07), transparent 40%);
}

/* `width: 100%` nu e de prisos: .zone-hero e flex, iar fara latime elementul
   se strange la latimea continutului si `margin: 0 auto` il centreaza in
   pagina. Cu latime plina, textul incepe la aceeasi margine ca in restul
   sectiunilor — ca la paginile de categorie. */
.zone-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 70px 20px;
    color: #fff;
    text-align: left;
}

/* Breadcrumb-ul sta sus de tot in hero, ca la paginile de categorie. Blocul
   principal e centrat vertical (.zone-hero e flex cu align-items: center), asa
   ca banda de sus e pozitionata absolut — altfel ar fi coborat si ea la mijloc. */
.zone-hero-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding-top: 34px;
}
.zone-hero-topinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb-ul sta pe fundalul intunecat al hero-ului, deci are nevoie de
   culori proprii — cele globale sunt gandite pentru fundal deschis. */
.zone-breadcrumb {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .75);
}
.zone-breadcrumb a          { color: rgba(255, 255, 255, .75); }
.zone-breadcrumb a:hover    { color: #fff; }
.zone-breadcrumb-current,
.zone-breadcrumb .breadcrumb-current { color: #fff; }

/* Explicit, nu mostenit: temele pun culoare direct pe h1 */
.zone-hero-inner h1 {
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 18px;
    color: #fff;
}

.zone-hero-intro {
    max-width: 680px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 30px;
}

.zone-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.zone-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 32px;
    border-radius: 40px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s, background .25s;
}
.zone-btn--primary { background: #FF7F00; color: #fff; box-shadow: 0 10px 30px rgba(255,127,0,.32); }
.zone-btn--primary:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .16);}
.zone-btn--ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; }
.zone-btn--ghost:hover { background: rgba(255,255,255,.12); }

/* Pe fundal alb (chemarea la actiune de la final) */
.zone-cta .zone-btn--ghost { border-color: #cbd5e1; color: #17252b; }
.zone-cta .zone-btn--ghost:hover { background: #f1f5f9; }

/* =============================================================================
   DESPRE ZONA
   ========================================================================== */

.zone-about-grid {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 50px;
    /* Coloana din dreapta porneste de sus, nu centrata pe textul lung */
    align-items: start;
}

.zone-about-text {
    font-size: 16px;
    line-height: 1.85;
    color: #475467;
}

.zone-about-side {
    background: #f6faf8;
    border-radius: 22px;
    padding: 28px;
}
.zone-about-side h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #17252b;
}
.zone-about-side p {
    font-size: 14px;
    line-height: 1.7;
    color: #596570;
    margin: 0;
}

.zone-counties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e4ece8;
}
.zone-counties-label {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #17252b;
}
/* Judetele sunt acum legaturi catre pagina lor, nu doar etichete. Regula
   ramane aceeasi; se adauga doar ce tine de link. */
.zone-county {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #e4ece8;
    font-size: 13px;
    color: #475467;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.zone-county:hover {
    border-color: #00991A;
    color: #00991A;
    background: rgba(0, 153, 26, .06);
}

/* =============================================================================
   CARDURI — activitati, organizatori, ghiduri
   ========================================================================== */

.zone-cards {
--row-cols:3;
--row-gap:28px;
}

/* =============================================================================
   Caruselul de evenimente (zona si regiune)

   Derularea e nativa: overflow-x + scroll-snap, deci pe touch merge prin swipe
   si fara JS. Sagetile de sub lista vin din org-carousel.css si apar doar cand
   nu incap toate cardurile.
   ========================================================================== */

.zone-events-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Paddingul lasa loc umbrelor cardurilor, altfel `overflow-x: auto` le taie
       si pe verticala; marginea negativa il anuleaza in asezarea paginii. */
    padding: 14px 14px 20px;
    margin: -14px -14px 0;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Cat timp cardurile incap, stau centrate; cand nu, pornesc din stanga.
       `safe` evita capcana: un container centrat care depaseste latimea ar
       porni derulat la mijloc. */
    justify-content: safe center;
}
.zone-events-track::-webkit-scrollbar { display: none; }

/* Trei pe ecran pe desktop, ca la restul cardurilor din pagina. */
.zone-events-track > .zone-event-card {
    flex: 0 0 calc((100% - 2 * 28px) / 3);
    scroll-snap-align: start;
}

.zone-event-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
}
.zone-event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .11);
}

.zone-event-media {
    position: relative;
    display: block;
    height: 170px;
    background-size: cover;
    background-position: center;
}
.zone-event-media.is-empty {
    background: linear-gradient(135deg, #e8f0ee 0%, #d3e2dd 100%);
}

/* Poza imprumutata de la categorie: pictograma, nu fotografie. `contain` o
   tine intreaga, iar `max-height: 100%` o opreste la inaltimea cutiei. */
.zone-event-media.is-category {
    background-color: #eef3f1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-height: 100%;
}

/* Ziua si luna, peste imagine */
.zone-event-date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
    line-height: 1;
}
.zone-event-day {
    font-size: 20px;
    font-weight: 800;
    color: #17252b;
}
.zone-event-month {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #00991A;
}

.zone-event-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(255, 190, 0, .95);
    color: #3d2f00;
    font-size: 12px;
    font-weight: 700;
}

.zone-event-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.zone-event-when,
.zone-event-where {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #596570;
}
.zone-event-when i { color: #00991A; font-size: 11px; }
.zone-event-where i { color: #98a2b3; font-size: 11px; }

.zone-event-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 2px 0 0;
    color: #17252b;
}
.zone-event-body h3 a { color: inherit; text-decoration: none; }
.zone-event-body h3 a:hover { color: #0066AB; }

.zone-event-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #667085;
    margin: 0;
}

.zone-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
}
.zone-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .11);
}

.zone-card-media {
    position: relative;
    display: block;
    height: 190px;
    background-size: cover;
    background-position: center;
}
.zone-card-media.is-empty {
    background: linear-gradient(135deg, #e8f0ee 0%, #d3e2dd 100%);
}

.zone-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.zone-card-badge--verified { background: #00991A; }

.zone-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.zone-card-body h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: #17252b;
}
.zone-card-body h3 a { color: inherit; text-decoration: none; }
.zone-card-body h3 a:hover { color: #0066AB; }
.zone-card-body p {
    font-size: 14px;
    line-height: 1.65;
    color: #667085;
    margin: 0;
}

.zone-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: #596570;
}
.zone-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FFBE00;
    font-weight: 700;
}

.zone-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef2f4;
}
.zone-card-provider { font-size: 13px; color: #667085; }
.zone-card-price    { font-size: 15px; font-weight: 800; color: #17252b; white-space: nowrap; }

.zone-card-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: #0066AB;
    text-decoration: none;
}
.zone-card-link:hover { color: #004f85; }

/* =============================================================================
   CUNOSCUTA PENTRU / SPECIFIC LOCAL
   ========================================================================== */

.zone-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.zone-info-card {
    display: flex;
    gap: 18px;
    padding: 30px;
    background: #f6faf8;
    border-radius: 22px;
}
.zone-info-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
}
.zone-info-card h2,
.zone-info-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #17252b;
}
.zone-info-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #596570;
    margin: 0;
}

/* =============================================================================
   SEZONALITATE
   ========================================================================== */

.zone-seasons {
--row-cols:4;
--row-gap:22px;
}
.zone-season {
    padding: 28px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #eef2f4;
	text-align:center;
}
.zone-season-icon {
	font-size: 28px; 
	margin-bottom: 12px; 
}
.zone-season h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #17252b;
}
.zone-season p {
    font-size: 14px;
    line-height: 1.65;
    color: #667085;
    margin: 0;
}
.zone-season--spring { background: #f4fbf6; }
.zone-season--summer { background: #fffaf0; }
.zone-season--autumn { background: #fdf6f1; }
.zone-season--winter { background: #f3f8fd; }

/* =============================================================================
   INFORMATII PRACTICE + CHEMARE LA ACTIUNE
   ========================================================================== */

.zone-practical {
    display: flex;
    gap: 22px;
    padding: 38px;
    border-radius: 26px;
    background: #f6faf8;
    border: 1px solid #e4ece8;
}
.zone-practical-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
}
.zone-practical h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #17252b;
}
.zone-practical p {
    font-size: 15px;
    line-height: 1.75;
    color: #596570;
    margin: 0;
}

.zone-cta-section { padding-bottom: 90px; }
.zone-cta {
    text-align: center;
    padding: 54px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f6faf8, #eef6ff);
}
.zone-cta h2 {
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 700;
    margin: 0 0 12px;
    color: #17252b;
}
.zone-cta p {
    max-width: 620px;
    margin: 0 auto 26px;
    font-size: 16px;
    line-height: 1.7;
    color: #596570;
}
.zone-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* =============================================================================
   GHID UNIC — pe toata latimea, in locul listei

   O lista de un card arata a greseala: doua treimi de rand ramase goale. Cand
   zona are un singur ghid, cardul se intinde cat sectiunea, imaginea creste, iar
   antetul generic dispare — titlul devine chiar numele ghidului.
   ========================================================================== */

.zone-guide-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .09);
    transition: transform .3s, box-shadow .3s;
}
.zone-guide-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .12);
}

/* Inaltimea o da coloana cu text, imaginea o urmeaza — asa cele doua jumatati
   raman egale oricat de lung ar fi textul. */
.zone-guide-feature-media {
    display: block;
    min-height: 340px;
    background-size: cover;
    background-position: center;
}
.zone-guide-feature-media.is-empty {
    background: linear-gradient(135deg, #e8f0ee 0%, #d3e2dd 100%);
}

.zone-guide-feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 46px 50px;
}
.zone-guide-feature-body h2 {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.25;
    margin: 0 0 16px;
    color: #17252b;
}
.zone-guide-feature-body h2 a {
    color: inherit;
    text-decoration: none;
}
.zone-guide-feature-body h2 a:hover { color: #0066AB; }
.zone-guide-feature-body p {
    font-size: 16px;
    line-height: 1.75;
    color: #596570;
    margin: 0 0 26px;
}
/* `margin-top:auto` din .zone-card-link ar impinge linkul la baza coloanei,
   departe de text cand imaginea e mai inalta. */
.zone-guide-feature-body .zone-card-link { margin-top: 0; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
    .zone-cards       {
--row-cols:2;
--row-gap:28px;
}
    .zone-guide-feature      { grid-template-columns: 1fr; }
    .zone-guide-feature-media { min-height: 260px; }
    .zone-guide-feature-body  { padding: 34px 30px; }
    .zone-seasons     {
--row-cols:2;
--row-gap:22px;
}
    .zone-about-grid  { grid-template-columns: 1fr; gap: 32px; }

    .zone-events-track > .zone-event-card { flex-basis: calc((100% - 28px) / 2); }
}

@media (max-width: 600px) {
    .zone-section     { padding: 56px 0; }
    .zone-cards       {
--row-cols:1;
--row-gap:28px;
}
    .zone-seasons     {
--row-cols:1;
--row-gap:22px;
}

    /* Un singur card pe ecran; urmatorul incepe fix la marginea zonei vizibile,
       deci se ghiceste ca lista continua. */
    .zone-events-track > .zone-event-card { flex-basis: 100%; }
    .zone-info-grid   { grid-template-columns: 1fr; }

    .zone-hero        { min-height: 340px; }
    .zone-hero-inner  { padding: 54px 20px; }
    .zone-hero-actions .zone-btn { flex: 1 1 100%; justify-content: center; }

    .zone-practical   { flex-direction: column; padding: 26px; }
}