/* =========================================================
   Paletă & setup
   ========================================================= */
:root{
  --paper:#ffffff;
  --ink:#0f1820;
  --muted:#5f7483;
  --line:#e7edf2;
  --accent:#ff7a1a;
  --accent-2:#2db6c7;
  --shadow: 0 14px 40px rgba(0,0,0,.15);
  --radius: 18px;
  --container: min(1180px, 92vw);

  --h1: clamp(2.1rem, 2.5vw + 1.4rem, 3.4rem);
  --h2: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
  --h3: clamp(1.15rem, .8vw + .9rem, 1.35rem);
  --p: clamp(1rem, .35vw + .9rem, 1.12rem);

  --header-h: 70px;
  --footer-logo: 64px;

  --logo-base-h: 60px;
  --logo-scale: 3.2;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:#f7fafc;
  line-height:1.7;
  padding-top: var(--header-h);
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
.container{ width: var(--container); margin: 0 auto }

/* =========================================================
   Butoane
   ========================================================= */
.btn{
  display:inline-block; font-weight:700; letter-spacing:.2px;
  padding:.9rem 1.2rem; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), #ff9d55);
  color:#111; box-shadow: var(--shadow);
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.03) }
.btn.small{ padding:.6rem .9rem; font-size:.95rem }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 9999;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.hdr{ height:100%; display:flex; align-items:center; gap: 16px; }
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:700 }
.logo img{ width:40px; height:40px }
.primary-nav{ margin-left:auto; position:relative; display:flex; align-items:center }
.primary-nav ul{ list-style:none; display:flex; align-items:center; gap:1rem }
.primary-nav li a{
  display:flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px;
  border-radius:10px; color:#0d1a22; white-space:nowrap;
}
.primary-nav li a:hover,
.primary-nav li a.active{ background:#f1f6fa }

/* burger */
#nav-toggle{ display:none }
.hamburger{ display:none; cursor:pointer; padding:.3rem .2rem; border-radius:8px; margin-left:.4rem }
.hamburger span{
  display:block; width:26px; height:2px; background:#0d1a22; margin:6px 0;
  transition:.3s;
}

/* =========================================================
   SUBHERO
   ========================================================= */
.subhero{
  position:relative; background-size:cover; background-position:center;
  min-height:420px; display:flex; align-items:center;
}
.subhero .scrim{ position:absolute; inset:0; background:rgba(0,0,0,.45) }
.subhero .container{ position:relative; z-index:2; text-align:center; color:#fff }
.subhero h1{ font-size: var(--h1); text-shadow:0 6px 20px rgba(0,0,0,.6) }
.subhero .lead{ max-width:900px; margin:10px auto 0; text-shadow:0 4px 16px rgba(0,0,0,.6) }

/* =========================================================
   SERVICII
   ========================================================= */
.section{ padding: clamp(48px, 6vw, 90px) 0 }
.svc{ margin-top:60px; }

/* Desktop: 3 sus + 2 centrate jos (6 coloane, fiecare card span 2) */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:28px;
  justify-content:center;
}
.svc-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  min-height:260px;
  background-size:cover;
  background-position:center;
  display:flex; align-items:flex-end;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  grid-column: span 2;                  /* card = 2 coloane */
}
/* ultimele 2 carduri centrate perfect sub primele 3 */
.svc-card:nth-child(4){ grid-column: 2 / span 2; }  /* col 2-3 */
.svc-card:nth-child(5){ grid-column: 4 / span 2; }  /* col 4-5 */

.svc-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.svc-card .content{
  position:relative; z-index:2; padding:20px; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.svc-card h2{ font-size:1.3rem; margin-bottom:.5rem; color:#fff }
.svc-card p{ color:#eef3f6; margin-bottom:.6rem; line-height:1.6 }

/* Liste */
.svc-card ul{
  list-style: disc outside;
  padding-left: 1.4rem;
  margin:.6rem 0 0;
}
.svc-card ul li{
  margin:.25rem 0;
  line-height:1.55;
}

/* hover */
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.25) }
.svc-card:hover .overlay{ background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.8)) }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:40px; background:#fff; border-top:1px solid var(--line); color:var(--ink) }
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:22px;
  padding:26px 0;
  grid-template-areas: "brand dept contact";
}
.foot-brand   { grid-area: brand; }
.foot-dept    { grid-area: dept; }
.foot-contact { grid-area: contact; }
.foot-brand img{ width: var(--footer-logo); height: var(--footer-logo); margin-bottom:.5rem }

.site-footer .legal{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin: 0 auto;
}

/* Footer: social + WhatsApp */
.social{ list-style:none; display:flex; gap:10px; margin:10px 0 0; padding:0; }
.icon-btn{ display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.icon{ width:18px; height:18px; fill:#0f1820; opacity:.85 }
.icon-btn:hover .icon{ opacity:1 }
.dept-list{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.dept-list a{ text-decoration:none; }
.dept-list .wa{ display:inline-grid; place-items:center; margin-left:.4rem; width:26px; height:26px; border-radius:6px; background:#25D3661a; border:1px solid #25D36655; vertical-align:middle; }
.wa-icon{ width:15px; height:15px; fill:#25D366; }

/* =========================================================
   LOGO mai mare fără să crească headerul
   ========================================================= */
.site-header{ height: var(--header-h) !important; overflow: visible; }
.container.hdr{ gap: clamp(28px, 8vw, 220px) !important; }
.logo img{
  height: var(--logo-base-h) !important;
  width: auto !important;
  transform: scale(var(--logo-scale));
  transform-origin: left center;
  display: block;
}

/* =========================================================
   Media Queries
   ========================================================= */
/* Tabletă (≤1024px) */
@media (max-width: 1024px){
  .hamburger{ display:block }
  .primary-nav ul{
    position:absolute; right:0; top: calc(var(--header-h));
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:10px; box-shadow: var(--shadow);
    flex-direction:column; gap:.25rem; display:none; min-width: 220px;
  }
  #nav-toggle:checked ~ ul{ display:flex }
  #nav-toggle:checked + .hamburger span:nth-child(1){ transform: translateY(8px) rotate(45deg) }
  #nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0 }
  #nav-toggle:checked + .hamburger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg) }

  .subhero{ min-height:360px }

  .svc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card{ grid-column: auto / span 1; }
  .svc-card:nth-child(4),
  .svc-card:nth-child(5){ grid-column:auto / span 1; }

  :root{ --footer-logo: 60px; }
  .site-footer{ margin-top: 48px; }
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "dept  contact";
    gap: 20px 24px;
  }
}

/* Telefon / phablet (≤768px) */
@media (max-width: 768px){
  .subhero{ min-height:320px }
  .section{ padding: 48px 0 }
  .svc-grid{ grid-template-columns: 1fr; gap:22px }
  .svc-card{ min-height:240px; grid-column:auto / span 1; }
  .svc-card h2{ font-size:1.2rem }
  .svc-card p, .svc-card ul{ font-size:.98rem }

  :root{ --footer-logo: 56px; }
  .footer-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "dept"
      "contact";
    gap: 16px;
    text-align: center;
  }
  .foot-brand img{ margin: 0 auto .5rem; }
  .foot-dept ul{
    justify-items: center; text-align: left; width: max-content; margin: 0 auto;
  }
  .social{ justify-content: center; margin-top: 8px; }
}

/* Telefon mic (≤480px) */
@media (max-width: 480px){
  .subhero{ min-height:280px }
  .svc-card{ min-height:220px; border-radius:16px }
  .svc-card .content{ padding:16px }
  .svc-card h2{ font-size:1.1rem }
  .svc-card p, .svc-card ul{ font-size:.95rem }

  .site-footer .legal{ font-size: .95rem; }
  :root{
    --logo-scale: 3;
    --logo-base-h: 44px;
    --footer-logo: 90px;
  }
}

/* 1280+: scalare logo */
@media (min-width: 1280px){
  :root{ --logo-scale: 3.6; }
}

/* 400px: padding legal */
@media (max-width: 400px){
  .footer-grid{ padding: 20px 0; }
  .legal{ font-size: .95rem; }
}
/* ===== Patch: grilă fixă 3×2 pentru 6 carduri ===== */
.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 coloane egale pe desktop */
  gap: 28px;
}

/* fiecare card ocupă o singură coloană; fără forțări speciale */
.svc-card{ grid-column: auto; }

/* anulăm poziționările făcute pentru cazul cu 5 carduri */
.svc-grid .svc-card:nth-child(4),
.svc-grid .svc-card:nth-child(5){
  grid-column: auto !important;
}

/* (tableta/mobil rămân ca înainte; dacă ai deja media-queries pentru 2/1 col, păstrează-le) */
@media (max-width: 1024px){
  .svc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .svc-grid{ grid-template-columns: 1fr; }
}
/* ===== FIX minimal: textul pornește de sus, fără să modifice cardul ===== */

/* cardul rămâne identic; doar schimbăm alinierea conținutului */
.svc-card{
  align-items: flex-start !important;        /* în loc de flex-end */
}

/* păstrăm paddingul standard, ca înainte */
.svc-card .content{
  padding-top: 20px !important;              /* ajustează 18–22px după gust */
  padding-right: 20px;
  padding-bottom: 18px;
  padding-left: 20px;
}

/* revenim la overlay-ul original (dacă a fost întărit) */
.svc-card .overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)) !important;
}

/* IMPORTANT: nu facem .svc-card .content display:flex; nu schimbăm min-height;
   nu atingem background-size: cover — astfel nu „taie” nimic din carduri. */
