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

Manrope sta pe `.site-main`, nu pe `body`: header-ul si footer-ul sunt in afara
lui in layout.php si trebuie sa arate la fel pe toate paginile. Vezi blocul
pereche din category-page.css. */


.site-main{


font-family:'Manrope',var(--font-body);


}


.guide-hero h1,
.guide-section-title h2,
.guide-text-title h2,
.guide-final-box h2{


font-family:'Manrope',var(--font-body);


font-weight:700;


letter-spacing:-.03em;


}



.guide-hero{

height:650px;

position:relative;

display:flex;

align-items:flex-end;

/* Imaginea vine inline din sablon, din sectiunea hero a ghidului. Aici doar un
   fundal neutru pentru cazul in care ghidul n-are inca imagine — inainte era o
   adresa Unsplash ramasa din designul de proba, care incarca o imagine de pe alt
   site la fiecare afisare si ascundea ghidurile fara imagine proprie. */
background-color:#16252b;

background-size:cover;

background-position:center;

font-family:'Manrope',var(--font-body);

}



.guide-hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(0,0,0,.25)
);

}



.guide-hero-container{

position:relative;

z-index:2;

max-width:1200px;

width:100%;

margin:auto;

padding:70px 20px;

color:white;

}



/* Breadcrumb-ul sta sus de tot in hero, ca la paginile de categorie.
   .guide-hero e flex cu align-items: flex-end, deci continutul principal
   e lipit de baza; banda de sus e pozitionata absolut ca sa nu coboare
   si ea acolo. */
.guide-hero-top{
position:absolute;
top:0;
left:0;
right:0;
z-index:3;
padding-top:34px;
}

.guide-hero-topinner{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}


/* Varianta pe fundal alb, pentru ghidurile fara sectiune hero. Aici nava
   pastreaza culorile globale, potrivite fundalului deschis. */
.guide-breadcrumb-bar{
max-width:1200px;
margin:0 auto;
padding:26px 20px 0;
}


/* In hero, breadcrumb-ul sta pe imagine intunecata, deci are nevoie de culori
   proprii — cele globale sunt gandite pentru fundal deschis. */
.guide-breadcrumb{
margin-bottom:0;
color:rgba(255,255,255,.75);
}

.guide-breadcrumb a{
color:rgba(255,255,255,.75);
}

.guide-breadcrumb a:hover{
color:#fff;
}

.guide-breadcrumb .breadcrumb-current{
color:#fff;
}


.guide-hero-label{

display:inline-flex;

padding:8px 18px;

border-radius:30px;

background:
rgba(255,255,255,.15);

font-size:14px;

font-weight:700;

}



.guide-hero h1{

font-size:62px;

line-height:1.1;

margin:25px 0 20px;

/* 700 si -2px, ca .v6-hero h1 din pagina de categorie */
font-weight:700;

letter-spacing:-2px;

color:#fff;

}



.guide-hero p{

max-width:750px;

font-size:20px;

line-height:1.7;

color:white;

}



.guide-hero-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:30px;

}



.guide-hero-tags span{

padding:10px 20px;

border-radius:30px;

background:
rgba(255,255,255,.18);

font-size:14px;

font-weight:600;

}



@media(max-width:900px){

.guide-hero{

height:550px;

}


.guide-hero h1{

font-size:40px;

}


}



.guide-stats-section{

padding:90px 20px;

font-family:'Manrope',var(--font-body);

}



.guide-stats-container{

max-width:1200px;

margin:auto;

}



.guide-section-title{

text-align:center;

margin-bottom:50px;

}



.guide-section-title h2{

font-size:42px;

margin:0 0 15px;

color:#17252b;

}



.guide-section-title p{

color:#667085;

font-size:17px;

}



.guide-stats-grid{
--row-cols:4;
--row-gap:25px;
}



/* Cardurile repeta modelul celor de pe home (.home-value-card din public.css):
   card alb centrat, cu o linie colorata deasupra titlului. Inainte erau casete
   gri cu bara verde in stanga si cifra mare. */

.guide-stat-card{

padding:38px 30px;

border:1px solid rgba(16,34,24,.09);

border-radius:28px;

background:#fff;

box-shadow:
0 10px 35px rgba(16,34,24,.05);

text-align:center;

transition:transform .35s ease, box-shadow .35s ease;

}


.guide-stat-card:hover{

transform:translateY(-7px);

box-shadow:
0 25px 70px rgba(16,34,24,.08);

}



/* Linia isi schimba degradeul de la card la card. Home are trei culori si trei
   carduri; aici sunt patru pe rand, deci ciclul are si un al patrulea ton. */

.guide-stat-line{

width:48px;

height:4px;

margin:0 auto 27px;

border-radius:10px;

background:
linear-gradient(90deg,#73cd08,#00991a);

}


.guide-stat-card:nth-child(4n+2) .guide-stat-line{

background:
linear-gradient(90deg,#0066ab,#31a5df);

}


.guide-stat-card:nth-child(4n+3) .guide-stat-line{

background:
linear-gradient(90deg,#ff7f00,#ffbe00);

}


.guide-stat-card:nth-child(4n+4) .guide-stat-line{

background:
linear-gradient(90deg,#00bcd4,#0097a7);

}



.guide-stat-card strong{

display:block;

font-size:21px;

font-weight:700;

color:#102218;

margin:0 0 13px;

}



.guide-stat-card span{

display:block;

color:#59675f;

font-size:14px;

line-height:1.75;

}



@media(max-width:1100px){

.guide-stats-grid{
--row-cols:2;
--row-gap:25px;
}

}


@media(max-width:560px){

.guide-stats-grid{
--row-cols:1;
--row-gap:25px;
}

}




.guide-text-section{

padding:90px 20px;

background:#f8fbf9;

font-family:'Manrope',var(--font-body);

}



.guide-text-container{

max-width:900px;

margin:auto;

}



.guide-text-title{

text-align:center;

margin-bottom:45px;

}



.guide-text-title h2{

font-size:42px;

color:#17252b;

}



.guide-text-content p{

font-size:17px;

line-height:1.9;

color:#667085;

margin-bottom:25px;

}





.guide-cards-section{

padding:90px 20px;

font-family:'Manrope',var(--font-body);

}



.guide-cards-container{

max-width:1200px;

margin:auto;

}



.guide-cards-grid{

display:grid;

gap:25px;

}



/* 3-4 elemente */

.guide-cards-grid.grid{
--row-cols:3;
--row-gap:25px;
}



/* multe elemente */

.guide-cards-grid.list{

grid-template-columns:1fr;

}



.guide-card{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}



.guide-card h3{

font-size:25px;

margin:0 0 15px;

color:#17252b;

}



.guide-card p{

font-size:16px;

line-height:1.8;

color:#667085;

margin:0;

}
.guide-card .guide-card-details ul,
.guide-card .guide-card-details ul li{
	color:#667085;
	
}



@media(max-width:900px){


.guide-cards-grid.grid{
--row-cols:1;
--row-gap:25px;
}


}





.guide-marketplace-section{

padding:90px 20px;

font-family:'Manrope',var(--font-body);

background:#f8fbf9;

}



.guide-marketplace-container{

max-width:1200px;

margin:auto;

}



.guide-marketplace-grid{
--row-cols:3;
--row-gap:30px;
}



.guide-marketplace-card{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:

0 20px 50px rgba(0,0,0,.10);

}



.guide-marketplace-image{

height:240px;

background-size:cover;

background-position:center;

}



.guide-marketplace-content{

padding:30px;

}



.guide-marketplace-category{

font-size:13px;

font-weight:800;

color:#00991A;

text-transform:uppercase;

margin-bottom:12px;

}



.guide-marketplace-content h3{

font-size:25px;

margin:0 0 15px;

}



.guide-marketplace-content p{

margin:0;

}



.guide-marketplace-meta{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:20px;

}



.guide-marketplace-meta span{

background:#f3f8ff;

padding:8px 15px;

border-radius:30px;

font-size:13px;

color:#344054;

}



.guide-marketplace-button{

display:inline-flex;

margin-top:25px;

padding:13px 28px;

border-radius:30px;

background:#0066AB;

color:white;

font-weight:700;

text-decoration:none;

}



@media(max-width:900px){


.guide-marketplace-grid{
--row-cols:1;
--row-gap:30px;
}


}




.organizers-section{

padding:90px 20px;

font-family:'Manrope',var(--font-body);

}



.organizers-container{

max-width:1200px;

margin:auto;

}



.organizers-grid{
--row-cols:3;
--row-gap:30px;
}



.organizer-card{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}



.organizer-status{

font-size:13px;

font-weight:800;

color:#00991A;

margin-bottom:15px;

}



.organizer-card h3{

font-size:25px;

margin-bottom:15px;

}



.organizer-card p{

margin:0;

}



.organizer-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:20px;

}



.organizer-tags span{

background:#f3f8ff;

padding:8px 14px;

border-radius:20px;

font-size:13px;

}



@media(max-width:900px){

.organizers-grid{
--row-cols:1;
--row-gap:30px;
}

}




.guide-faq-section{

padding:90px 20px;

background:#f8fbf9;

font-family:'Manrope',var(--font-body);

}



.guide-faq-container{

max-width:900px;

margin:auto;

}



.guide-faq-item{

padding:30px 0;

border-bottom:1px solid #ddd;

}



.guide-faq-item h3{

font-size:22px;

margin:0 0 12px;

color:#0066AB;

}



.guide-faq-item p{

margin:0;

}





.guide-final-section{


padding:90px 20px;


background:


linear-gradient(
135deg,
#f5faf8,
#ffffff,
#f2f8ff
);


font-family:'Manrope',var(--font-body);


}





.guide-final-container{


max-width:1200px;


margin:auto;


}





.guide-final-box{


position:relative;


overflow:hidden;


text-align:center;


padding:75px 30px;


border-radius:35px;


background:


linear-gradient(
135deg,
#00991A,
#0066AB
);



box-shadow:


0 25px 60px rgba(0,102,171,.25);


color:white;


}




.guide-final-decoration{


position:absolute;


width:350px;


height:350px;


right:-120px;


top:-160px;


border-radius:50%;


background:


rgba(255,255,255,.12);


}




.guide-final-box:after{


content:"";


position:absolute;


width:250px;


height:250px;


left:-100px;


bottom:-120px;


border-radius:50%;


background:


rgba(255,255,255,.08);


}







.guide-final-box h2{


position:relative;


z-index:1;


font-size:44px;


margin:0 0 20px;


font-weight:800;


}





.guide-final-box p{


position:relative;


z-index:1;


font-size:18px;


max-width:700px;


margin:0 auto 35px;


line-height:1.7;


color:rgba(255,255,255,.9);


}





.guide-final-button{


position:relative;


z-index:1;


display:inline-flex;


padding:16px 38px;


border-radius:35px;


background:


linear-gradient(
135deg,
#FFBE00,
#FF7F00
);



color:white;


font-weight:700;


text-decoration:none;


box-shadow:


0 10px 30px rgba(255,127,0,.35);


transition:.3s, box-shadow .15s ease;


}





.guide-final-button:hover{
box-shadow:
0 15px 40px rgba(255,127,0,.45);
}





@media(max-width:900px){


.guide-final-box{


padding:55px 20px;


}



.guide-final-box h2{


font-size:32px;


}



.guide-final-box p{


font-size:16px;


}


}




/* =============================================================================
   BREAKPOINT MOBIL — lipsea complet din acest fisier.
   Pana acum singurul prag era max-width:900px, deci un telefon de 360px primea
   aceleasi dimensiuni ca o tableta: h1 de 62px si titluri de 42-44px, rupte pe
   3-4 randuri.
   ========================================================================== */
@media (max-width: 640px) {

    /* --- Titluri --- */
    .guide-hero h1            { font-size: 30px; line-height: 1.15; }
    .guide-hero p             { font-size: 15px; }
    .guide-section-title h2   { font-size: 24px; line-height: 1.25; }
    .guide-text-title h2      { font-size: 24px; line-height: 1.25; }
    .guide-final-box h2       { font-size: 24px; line-height: 1.25; }
    .guide-stat-card strong   { font-size: 26px; }

    /* --- Respiratie laterala: 20px in loc de 40-60px --- */
    .guide-stats-section,
    .guide-text-section,
    .guide-cards-section,
    .guide-marketplace-section,
    .organizers-section,
    .guide-faq-section,
    .guide-final-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Decoratia rotunda din CTA (.guide-final-decoration, 350px, right:-120px)
       nu are nevoie de nimic: .guide-final-box are deja position:relative +
       overflow:hidden, deci o taie. Instrumentul de masurare o raporteaza doar
       pentru ca getBoundingClientRect() nu stie de clipping-ul parintelui. */
}