/* ==========================================================================
   COMPONENTE — butoane si carduri (sectiunea 3)

   Principiu: o clasa de baza per componenta, conform sectiunii 3, plus
   modificatori care reproduc EXACT variantele din referinta. Nimic nu este
   normalizat: fiecare varianta isi pastreaza dimensiunea si teserea proprii.
   Valorile care variaza sunt expuse ca proprietati custom, ca modificatorul
   sa suprascrie doar ce difera.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1  BUTON PRINCIPAL (solid)
   Fundal verde, doua colturi tesite in diagonala (stanga-sus, dreapta-jos).
   Baza = varianta canonica din hero: 15px, padding 19px 30px, tesire 14px.
   -------------------------------------------------------------------------- */
.btn-primary {
  --btn-fs: 15px;
  --btn-pad: 19px 30px;
  --btn-tesire: 14px;
  --btn-bg: var(--verde-profund);
  --btn-bg-hover: var(--verde-hover);
  --btn-color: var(--ivory);
  --btn-weight: 600;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: var(--btn-fs);
  font-weight: var(--btn-weight);
  line-height: normal;      /* ca in referinta; NU 1 — altfel butoanele scad cu 3px */
  padding: var(--btn-pad);
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 0;
  cursor: pointer;
  text-align: left;
  clip-path: polygon(var(--btn-tesire) 0, 100% 0,
                     100% calc(100% - var(--btn-tesire)),
                     calc(100% - var(--btn-tesire)) 100%,
                     0 100%, 0 var(--btn-tesire));
  transition: background .18s ease, transform .18s ease;
}
.btn-primary:hover { background: var(--btn-bg-hover); transform: translateY(-2px); }

/* Variante de dimensiune — valorile sunt cele din referinta, per instanta. */
.btn-primary--header   { --btn-fs: 13.5px; --btn-pad: 15px 24px; gap: 9px;
                         white-space: nowrap; flex-shrink: 0; }                 /* header, 48.5px */
.btn-primary--header:hover { transform: translateY(-1px); }                     /* -1px, nu -2px */
.btn-primary--compact  { --btn-fs: 15px;   --btn-pad: 17px 26px; }              /* 52px */
.btn-primary--sectiune { --btn-fs: 15px;   --btn-pad: 18px 28px; }              /* 54px */
.btn-primary--mic      { --btn-fs: 14.5px; --btn-pad: 17px 24px; }              /* 50px */
.btn-primary--contact  { --btn-fs: 14.5px; --btn-pad: 17px 24px; min-height: 54px; justify-content: center; }
.btn-primary--bara     { --btn-fs: 14px;   --btn-pad: 0 14px; --btn-tesire: 13px;
                         min-height: 52px; justify-content: center; }           /* bara fixa mobila */
/* CTA in subsolul unui card: pe toata latimea, lipit de baza. In referinta
   acest buton NU se ridica la hover — doar fundalul se schimba. */
.btn-primary--card     { --btn-fs: 14.5px; --btn-pad: 17px 24px;
                         margin-top: auto; display: flex; justify-content: center; gap: 9px;
                         transition: background .18s ease; }
.btn-primary--card:hover { transform: none; }

/* 3.3  BUTON AURIU — doar CTA final pe fundal inchis. Aceeasi tesire. */
/* Butonul auriu pastreaza translateY(-2px) de la .btn-primary. */
.btn-gold {
  --btn-bg: var(--auriu-deschis);
  /* Hover-ul DESCHIDE culoarea (sectiunea 3.3) — singurul buton cu acest
     comportament, fiindca sta pe fundal inchis. */
  --btn-bg-hover: var(--auriu-hover);
  --btn-color: var(--verde-profund);
  --btn-weight: 700;
  --btn-fs: 14.5px;
  --btn-pad: 18px 28px;
}

/* --------------------------------------------------------------------------
   3.2  BUTON SECUNDAR (rama intrerupta)
   Fara fundal. Rama e desenata din patru gradienti, cu colturile lipsa.
   La hover rama SE INCHIDE — fundalul NU se schimba, culoarea nu se schimba.
   Baza = varianta canonica: 15px, padding 19px 32px, retragere 30px / 28px.
   -------------------------------------------------------------------------- */
.btn-ghost {
  --gh-fs: 15px;
  --gh-pad: 19px 32px;
  --gh-x: 30px;             /* retragerea liniilor orizontale */
  --gh-y: 28px;             /* retragerea liniilor verticale */
  --gh-color: var(--verde-profund);
  --gh-bord: var(--bord-buton);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: var(--gh-fs);
  font-weight: 600;
  line-height: normal;      /* ca in referinta */
  padding: var(--gh-pad);
  color: var(--gh-color);
  background-color: transparent;
  background-image:
    linear-gradient(var(--gh-bord), var(--gh-bord)),
    linear-gradient(var(--gh-bord), var(--gh-bord)),
    linear-gradient(var(--gh-bord), var(--gh-bord)),
    linear-gradient(var(--gh-bord), var(--gh-bord));
  background-repeat: no-repeat;
  background-position: center top, center bottom, left center, right center;
  background-size:
    calc(100% - var(--gh-x)) 1px,
    calc(100% - var(--gh-x)) 1px,
    1px calc(100% - var(--gh-y)),
    1px calc(100% - var(--gh-y));
  border: 0;
  cursor: pointer;
  transition: background-size .24s ease;
}
.btn-ghost:hover {
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  color: var(--gh-color);   /* explicit: culoarea NU se schimba */
}

/* Variante de dimensiune */
.btn-ghost--30      { --gh-fs: 15px;   --gh-pad: 18px 30px; }
.btn-ghost--28      { --gh-fs: 15px;   --gh-pad: 17px 28px; --gh-y: 26px; }
.btn-ghost--mic     { --gh-fs: 14.5px; --gh-pad: 17px 26px; --gh-y: 26px; }
.btn-ghost--contact { --gh-fs: 14.5px; --gh-pad: 17px 24px; min-height: 54px; justify-content: center; }
.btn-ghost--bara    { --gh-fs: 14px;   --gh-pad: 0 12px; --gh-x: 28px; --gh-y: 26px;
                      min-height: 52px; justify-content: center; }

.btn-ghost--card    { --gh-fs: 14.5px; --gh-pad: 17px 26px; --gh-y: 26px;
                      margin-top: auto; display: flex; justify-content: center; gap: 9px; }

/* Variante de tonalitate */
.btn-ghost--pe-inchis { --gh-fs: 14.5px; --gh-pad: 18px 28px; --gh-y: 26px;
                        --gh-color: #F4F2EC; --gh-bord: rgba(244,242,236,0.5); }
.btn-ghost--roz       { --gh-color: #4A2B29; --gh-bord: rgba(140,75,73,0.5); }

/* --------------------------------------------------------------------------
   3.4  CARD CU RAMA INTRERUPTA
   Cardurile NU au border. Rama se construieste din doua pseudo-elemente,
   pe un container position: relative. Colturile lipsa sunt intentionate.
   Fara border-radius, niciodata.
   -------------------------------------------------------------------------- */
.card {
  --card-bord: var(--bord-card);
  position: relative;
  background: var(--alb);
  padding: 34px 32px 32px;
  color: var(--carbune);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before {
  content: ''; position: absolute;
  left: 24px; right: 24px; top: 0; bottom: 0;
  border-top: 1px solid var(--card-bord);
  border-bottom: 1px solid var(--card-bord);
  pointer-events: none;
}
.card::after {
  content: ''; position: absolute;
  top: 24px; bottom: 24px; left: 0; right: 0;
  border-left: 1px solid var(--card-bord);
  border-right: 1px solid var(--card-bord);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -30px rgba(23,62,54,0.42);
  color: var(--carbune);      /* explicit: culoarea nu se schimba la hover */
}

/* Cardurile de servicii nu au hover in referinta — nu se ridica si nu capata
   umbra. Modificatorul anuleaza starea, nu o adauga altundeva. */
.card--fara-hover { transition: none; }
.card--fara-hover:hover { transform: none; box-shadow: none; }

/* Cardul „CEL MAI ALES" — aceeasi rama, alta culoare. */
.card--ales { --card-bord: rgba(154,123,72,0.85); }

/* Insigna „CEL MAI ALES" — peste rama, in coltul din dreapta sus. */
.card__insigna {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: var(--auriu); color: var(--alb);
  font-size: 10.5px; letter-spacing: 0.14em; font-weight: 700;
  padding: 7px 13px;
}

/* Cardul de directie: padding 9px, imaginea in interior, ca rama sa
   incadreze cardul intreg, inclusiv fotografia. */
.card--directie { padding: 9px; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   3.5  ACORDEON FAQ
   `<details>`/`<summary>` nativ, fara JavaScript. Folosit pe prima pagina si
   pe cele 7 pagini de specializare, cu aceleasi valori.
   -------------------------------------------------------------------------- */
.faq__item { border-top: 1px solid color-mix(in srgb, var(--carbune) 14%, transparent); }
.faq__item--ultim { border-bottom: 1px solid color-mix(in srgb, var(--carbune) 14%, transparent); }
.faq__intrebare {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0;
  font-size: clamp(16.5px, 1.6vw, 18.5px); font-weight: 500;
  color: var(--verde-profund);
}
/* flex-shrink: 0 este obligatoriu — altfel semnul se turteste la
   intrebarile lungi pe ecran ingust. */
.om-faq-plus {
  font-size: 22px; color: var(--auriu); line-height: 1;
  flex-shrink: 0; transition: transform .2s ease;
}
.faq__raspuns {
  font-size: 15.5px; line-height: var(--lh-paragraf);
  color: var(--text-mediu); margin: 0 0 24px; max-width: 68ch;
}