/* Homepage DRC — stiluri scopate sub .drc-home.
   Headerul si footerul NU sunt aici: vin de la tema, ca pe tot restul site-ului.
   Generat din <style>-ul template-ului standalone (conversie 2026-08-05). */
.drc-home *{box-sizing:border-box;margin:0;padding:0}
.drc-home{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
.drc-home img{max-width:100%;display:block}
.drc-home a{color:inherit;text-decoration:none}
.drc-home .serif{font-family:'Playfair Display',Georgia,serif}
.drc-home .wrap{width:100%;max-width:560px;margin:0 auto;padding:0 22px}
.drc-home .mi-top{display:block;padding:13px 22px;font-weight:700;font-size:13.5px;letter-spacing:.02em;color:var(--deep)}
.drc-home .caret-btn{background:none;border:none;padding:12px 20px;cursor:pointer;line-height:0}
.drc-home .hero{padding:30px 0 34px;text-align:center}
.drc-home .hero h1{font-weight:700;color:var(--teal);font-size:30px;line-height:1.12;letter-spacing:.01em}
.drc-home .hero .role{color:var(--green-d);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
.drc-home .hero .spec{color:var(--muted);font-size:14.5px;margin-top:4px}
.drc-home .photo-fig{position:relative;max-width:340px;margin:24px auto 0;border-radius:16px 16px 0 0;overflow:hidden}
.drc-home .photo-fig>img{width:100%;display:block}
.drc-home .photo-curve{position:absolute;left:-1px;right:-1px;bottom:-1px;width:calc(100% + 2px);height:64px;display:block}
.drc-home .photo-curve .fill{fill:var(--cream)}
.drc-home .photo-curve .line{fill:none;stroke:var(--green);stroke-width:3}
.drc-home .quote{position:relative;margin:26px auto 0;max-width:400px;padding:6px 8px}
.drc-home .quote .mk{font-family:'Playfair Display',serif;color:var(--green);font-size:52px;line-height:0;display:block;height:22px}
.drc-home .quote .mk.c{margin-top:12px}
.drc-home .quote p{font-family:'Playfair Display',serif;font-style:italic;color:var(--teal);font-size:21px;line-height:1.5;margin:6px 0}
.drc-home .cta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;background:var(--deep);color:#fff;font-weight:800;letter-spacing:.02em;padding:15px 26px;border-radius:40px;font-size:15px;box-shadow:0 12px 26px -12px rgba(3,75,87,.7)}
.drc-home .cta svg{width:18px;height:18px;stroke:#fff}
.drc-home .sec{padding:34px 0}
.drc-home .sec-head{text-align:center;margin-bottom:24px}
.drc-home .sec-head h2{font-weight:700;color:var(--teal);font-size:26px;line-height:1.18}
.drc-home .sec-head .sub{color:var(--green-d);font-weight:700;font-size:19px;margin-top:2px;font-family:'Playfair Display',serif}
.drc-home .leaf{width:26px;height:14px;margin:12px auto 0;opacity:.6}
.drc-home .pillar{display:flex;gap:16px;padding:18px 0;border-top:1px solid #ece7de}
.drc-home .pillar:first-of-type{border-top:none}
.drc-home .pill-ic{flex:0 0 56px;width:56px;height:56px}
.drc-home .pill-ic img{width:56px;height:56px;display:block}
.drc-home .pillar h3{color:var(--teal);font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.drc-home .pillar p{color:var(--ink);font-size:14.5px}
.drc-home .exp{background:linear-gradient(180deg,#f3efe7,#faf7f2)}
.drc-home .pill-title{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--deep);color:#fff;border-radius:40px;padding:13px 22px;max-width:420px;margin:0 auto 22px;font-weight:800;letter-spacing:.09em;font-size:15px}
.drc-home .pill-title svg{width:22px;height:22px;stroke:#bfe3d8;fill:none}
.drc-home .chk{display:flex;gap:13px;align-items:flex-start;padding:12px 2px;border-top:1px solid #e6e0d6}
.drc-home .chk:first-of-type{border-top:none}
.drc-home .chk .ck{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1.8px solid var(--green);display:flex;align-items:center;justify-content:center;margin-top:1px}
.drc-home .chk .ck svg{width:14px;height:14px;stroke:var(--green-d);stroke-width:2.6;fill:none}
.drc-home .chk p{font-size:14.5px;color:var(--ink)}
.drc-home .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 8px}
.drc-home .ther{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .15s ease}
.drc-home .ther img{width:66px;height:66px;display:block;transition:transform .15s ease}
.drc-home .ther span{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--deep);text-transform:uppercase;line-height:1.25;transition:color .15s ease}
.drc-home .ther:hover img{transform:translateY(-4px) scale(1.05)}
.drc-home .ther:hover span{color:var(--green-d)}
/* ---- Terapia personalizata a durerii — banda proprie sub hero ----
   Gradient teal->verde: se desprinde de hero (aproape negru) fara sa continue
   masa intunecata, si de sectiunile crem de dedesubt. */
.drc-home .pain-band{
  background:linear-gradient(118deg,#0b5560 0%,#0d5a63 42%,#3f8b7c 100%);
  color:#fff;padding:38px 0;position:relative;overflow:hidden;
}
.drc-home .pain-band::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,transparent,#8fccbe,transparent);
}
.drc-home .pain-in{display:flex;flex-direction:column;gap:20px}
.drc-home .pain-kicker{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#a9dcce;margin-bottom:10px;
}
.drc-home .pain-band h2{font-size:27px;line-height:1.16;color:#fff;margin:0 0 14px}
.drc-home .pain-band p{font-size:15.5px;line-height:1.65;color:#e2f1ec;margin-top:10px}
.drc-home .pain-band p.b{font-weight:800;color:#fff}
.drc-home .pain-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.drc-home .pain-band .pb{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--deep);text-decoration:none;
  font-weight:800;font-size:15px;padding:15px 28px;border-radius:44px;
  transition:transform .18s ease,box-shadow .18s ease;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
}
/* tema forteaza a[href^="tel:"]{color:inherit !important} → butonul ar mosteni
   albul benzii si textul ar disparea pe fundal alb. */
.drc-home a[href^="tel:"].pb{color:var(--deep) !important}
.drc-home .pain-band .pb svg{width:18px;height:18px;stroke:var(--deep);fill:none}
.drc-home .pain-band .pb:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(0,0,0,.55)}
.drc-home .pain-band .pb.ghost{background:transparent;color:#fff;border:1.8px solid rgba(255,255,255,.6);box-shadow:none}
.drc-home .pain-band .pb.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.drc-home .pain-ic{display:none}
@media(min-width:640px){
  .drc-home .grid{grid-template-columns:1fr 1fr 1fr}
  .drc-home .hero h1{font-size:36px}
}
@media(min-width:980px){
  .drc-home .wrap{max-width:1240px;padding:0 44px}
  .drc-home .mi-top{padding:10px 13px;font-size:13.5px;white-space:nowrap;display:flex;align-items:center;gap:7px;cursor:pointer}
  .drc-home .mi-top:hover{color:var(--teal)}
  .drc-home .caret-btn{display:none}
  .drc-home .sec{padding:70px 0}
  .drc-home .sec-head{margin-bottom:38px}
  .drc-home .sec-head h2{font-size:36px}
  .drc-home .sec-head .sub{font-size:23px}
  .drc-home .hero{position:relative;padding:0;min-height:680px;display:flex;align-items:center;
    background:
      linear-gradient(270deg, rgba(4,32,39,.92) 0%, rgba(4,32,39,.86) 24%, rgba(4,32,39,.55) 34%, rgba(4,32,39,.14) 41%, rgba(4,32,39,0) 47%),
      url('https://dev.seoclub.ro/doctor/wp-content/uploads/2026/05/dr-rasvan-constantinescu.jpg') center 22%/cover no-repeat;}
  .drc-home .hero .wrap{display:block;text-align:left;position:relative;z-index:2}
  .drc-home .photo-fig{display:none}
  .drc-home .h-top, .drc-home .h-quote{max-width:520px;margin-left:auto;margin-right:0}
  .drc-home .h-quote{margin-top:22px}
  .drc-home .hero h1{font-size:56px;line-height:1.06;color:#fff}
  .drc-home .hero .role{font-size:16px;margin-top:16px;color:#bfe3d8}
  .drc-home .hero .spec{font-size:17px;color:#e7f2ef}
  .drc-home .quote{margin:0 0 0 auto;max-width:520px;padding:0 0 0 20px;border-left:3px solid var(--green)}
  .drc-home .quote .mk{display:none}
  .drc-home .quote .mk.c{display:none}
  .drc-home .quote p{font-size:26px;line-height:1.45;margin:8px 0 0;color:#fff}
  .drc-home .cta{margin-top:30px;font-size:16px;padding:17px 30px}
  .drc-home .hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,transparent,var(--green),transparent);z-index:3}
  .drc-home .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
  .drc-home .pillar{flex-direction:column;text-align:center;align-items:center;border-top:none;padding:0;gap:16px}
  .drc-home .pillar h3{font-size:16px}
  .drc-home .pillar p{font-size:15px}
  .drc-home .exp .wrap{max-width:1000px}
  .drc-home .checks{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .drc-home .checks .chk{border-top:none;padding:14px 0}
  .drc-home .chk p{font-size:15.5px}
  .drc-home .grid{grid-template-columns:repeat(5,1fr);gap:40px 24px;max-width:1080px;margin:0 auto}
  .drc-home .ther img{width:74px;height:74px}
  .drc-home .ther span{font-size:12.5px}
  .drc-home .pain-band{padding:60px 0}
  .drc-home .pain-in{
    flex-direction:row;align-items:center;gap:48px;
    max-width:1180px;
  }
  .drc-home .pain-txt{flex:1 1 auto;max-width:800px}
  .drc-home .pain-band h2{font-size:40px}
  .drc-home .pain-band p{font-size:17px}
  .drc-home .pain-ic{display:block;flex:0 0 190px}
  .drc-home .pain-ic svg{
    width:190px;height:190px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:.9;
  }
}
@media(min-width:1200px){
  .drc-home .hero h1{font-size:58px}
}

/* Pagina iese pe toata latimea, peste marginea de 30px pe care tema o pune
   continutului (`btWidePageMargin30`). Ramane doar aici, nu pe restul site-ului. */
.drc-home{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}

/* Tema are `a[href^="tel:"]{color:inherit !important}`, iar butoanele de
   telefon din pagina asta au culoare proprie. E singurul loc unde folosesc
   !important: raspunde exact unui !important al temei, nu unei specificitati. */
.drc-home a[href^="tel:"].cta{color:#fff !important}

/* Tema pune ghilimele decorative pe orice <blockquote> (::before/::after).
   Citatul din hero are deja bara verde, deci le scoatem. */
.drc-home .quote::before,
.drc-home .quote::after{content:none}
.drc-home .quote{background:none;quotes:none}

/* Hero: blocul de text se lipeste de marginea DREAPTA a ecranului, nu de
   containerul centrat de 1240px — altfel ramane o fasie goala in dreapta si
   textul cade peste chipul doctorului. Randurile raman aliniate la stanga. */
@media(min-width:980px){
  .drc-home .hero .wrap{max-width:none;padding-left:44px;padding-right:52px}
  .drc-home .h-top, .drc-home .h-quote, .drc-home .quote{max-width:500px}
}
@media(min-width:1600px){
  .drc-home .hero .wrap{padding-right:6vw}
}

/* --------------------------------------------------------------------------
   HERO — ecrane medii (laptop mic, tableta in modul peisaj, ~980–1400px)
   Blocul de text avea latime fixa (500px), deci pe un ecran ingust incepea
   la ~548px si cadea peste chipul doctorului. Aici latimea si corpul de
   litera se scaleaza cu ecranul, iar voalul teal se ingroasa spre dreapta,
   ca textul sa ramana lizibil fara sa acopere fata.
   Verificat la 1024, 1100, 1280 si 1440px.
   -------------------------------------------------------------------------- */
@media(min-width:980px){
  .drc-home .h-top,
  .drc-home .h-quote,
  .drc-home .quote{max-width:min(500px, 34vw)}

  .drc-home .hero h1{font-size:clamp(34px, 3.6vw, 58px)}
  .drc-home .hero .role{font-size:clamp(13px, 1.1vw, 16px)}
  .drc-home .hero .spec{font-size:clamp(14px, 1.2vw, 17px)}
  .drc-home .quote p{font-size:clamp(18px, 1.85vw, 26px)}
  .drc-home .cta{font-size:clamp(14px, 1.1vw, 16px)}
}
/* Sub 1400px chipul e mai aproape de centru, deci voalul incepe mai devreme. */
@media(min-width:980px) and (max-width:1399px){
  .drc-home .hero{
    background:
      linear-gradient(270deg, rgba(4,32,39,.94) 0%, rgba(4,32,39,.88) 26%, rgba(4,32,39,.6) 35%, rgba(4,32,39,.16) 42%, rgba(4,32,39,0) 47%),
      url('https://dev.seoclub.ro/doctor/wp-content/uploads/2026/05/dr-rasvan-constantinescu.jpg') 62% 22%/cover no-repeat;
    min-height:600px;
  }
  .drc-home .hero .wrap{padding-right:34px}
}


/* --------------------------------------------------------------------------
   HERO — lizibilitate fara a intuneca fotografia
   Doctorul a cerut sa-i ramana chipul luminos, deci voalul se opreste la
   dreapta lui. Ca textul alb sa ramana citibil si acolo unde trece peste
   zone deschise, contrastul il da o umbra pe litera, nu un strat mai gros
   de culoare peste poza.
   -------------------------------------------------------------------------- */
@media(min-width:980px){
  .drc-home .hero h1,
  .drc-home .hero .role,
  .drc-home .hero .spec,
  .drc-home .hero .quote p{
    text-shadow:0 2px 20px rgba(2,20,26,.85), 0 1px 4px rgba(2,20,26,.65);
  }
  .drc-home .hero .cta{box-shadow:0 10px 30px -10px rgba(2,20,26,.7)}
}

/* --------------------------------------------------------------------------
   HERO — butonul „Programează consultația"
   Statea lipit sub citat. Il coboram, ii dam mai mult aer si il aliniem la
   DREAPTA coloanei — pe aceeasi verticala cu marginea din dreapta a textului
   de deasupra. Randurile de text raman aliniate la stanga.
   -------------------------------------------------------------------------- */
@media(min-width:980px){
  .drc-home .hero .cta{
    display:flex;
    width:fit-content;
    margin:52px 0 0 auto;
    padding:18px 36px;
    letter-spacing:.03em;
  }
}
@media(min-width:1400px){
  .drc-home .hero .cta{margin-top:60px}
}

/* --------------------------------------------------------------------------
   HERO — butonul aliniat la ULTIMA LITERA din dreapta, nu la marginea cutiei
   Textul e aliniat la stanga, deci marginea lui din dreapta e zimtata: fara
   ajutor, butonul se poate alinia doar la cutia de 500px, care se termina cu
   26–51px mai la dreapta decat cel mai lung rand.
   Solutia: citatul are acum o rupere de rand explicita (<br> in sablon), deci
   `width:max-content` face cutia exact cat cel mai lung rand. Butonul, fiind
   in aceeasi cutie si impins la dreapta, ajunge fix sub ultima litera.
   Plafonul `max-width` ramane, ca sa nu iasa din ecran la latimi mici.
   -------------------------------------------------------------------------- */
@media(min-width:980px){
  .drc-home .h-quote{
    width:max-content;
    max-width:min(500px, 34vw);
    /* Cutia se strange pe cel mai lung rand, DAR ramane ancorata la stanga
       exact unde incepe titlul — altfel citatul s-ar muta si el spre dreapta.
       Marginea procentuala se calculeaza fata de latimea parintelui, deci
       marginea stanga cade pe aceeasi verticala cu a blocului de titlu. */
    margin-left:calc(100% - min(500px, 34vw));
    margin-right:0;
  }
}
