/* ==========================================================================
   Site design system — homepage + category archive pages
   Uses the same palette as the pillar-article design (comparison-articles.css)
   Scoped under .hd-home / .hd-cat-archive so it never touches other templates.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

.hd-home, .hd-cat-archive, .hd-static-page {
  --ink:#1a1d1a;
  --paper:#f7f4ee;
  --card:#fffdf9;
  --line:#e4ddd0;
  --muted:#6a6459;
  --accent:#e8552b;
  --accent-dark:#c8421e;
  --green:#1f7a4d;
  --gold:#b8852a;
  --shadow:0 1px 2px rgba(26,29,26,.06),0 8px 24px rgba(26,29,26,.07);
  --radius:14px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.hd-home *, .hd-cat-archive *, .hd-static-page *{ box-sizing:border-box; }
.hd-home h1, .hd-home h2, .hd-home h3,
.hd-cat-archive h1, .hd-cat-archive h2, .hd-cat-archive h3,
.hd-static-page h1, .hd-static-page h2, .hd-static-page h3{
  font-family:'Fraunces',Georgia,serif; line-height:1.12; letter-spacing:-.01em; margin:0;
}

/* Remove GP's default page chrome on these templates so the custom layout owns the page */
.hd-home .site-content, .hd-cat-archive .site-content, .hd-static-page .site-content{ padding-top:0!important; }
.hd-home .inside-article, .hd-cat-archive .inside-article, .hd-static-page .inside-article{ padding:0!important; }

/* GP zeroes the margin-bottom of whatever ends up being the last element in
   the content area (its own "last-child" reset beats a plain class
   selector), which was silently eating the bottom margin on .hd-trust, the
   last .hd-section-card, and .hd-pagination alike -- no gap before the
   footer on any of these templates. Padding on the stable wrapper sidesteps
   that reset entirely and works no matter which element ends up last. */
.hd-home .site-main, .hd-cat-archive .site-main, .hd-static-page .site-main{ padding-bottom:64px; }

/* GP's "Container Background" (#page/.site) paints a near-white (#fffdf9)
   1200px column behind everything, which showed as a pale strip around the
   rounded cards instead of the warm cream page background. */
.hd-home .site, .hd-cat-archive .site, .hd-static-page .site{ background:var(--paper); }

/* ---------- shared card used by homepage "latest" grid + category grid ---------- */
.hd-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.hd-pcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hd-pcard:hover{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(26,29,26,.08), 0 14px 30px rgba(26,29,26,.10); }
.hd-pcard-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#efe9db; }
.hd-pcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hd-pcard-cat{
  position:absolute; top:12px; left:12px;
  background:var(--ink); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:7px;
}
.hd-pcard-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.hd-pcard-body h3{ font-size:1.12rem; font-weight:600; }
.hd-pcard-body h3 a{ color:var(--ink); text-decoration:none; }
.hd-pcard-body h3 a:hover{ color:var(--accent); }
.hd-pcard-excerpt{ font-size:.9rem; color:var(--muted); margin:0; flex:1; }
.hd-pcard-meta{ font-size:.78rem; color:var(--muted); display:flex; gap:10px; align-items:center; }
.hd-pcard-cta{
  align-self:flex-start; margin-top:4px;
  font-size:.85rem; font-weight:700; color:var(--accent); text-decoration:none;
}
.hd-pcard-cta:hover{ color:var(--accent-dark); }

@media(max-width:900px){ .hd-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .hd-grid{ grid-template-columns:1fr; padding:0 16px; } }

/* ================= HOMEPAGE ================= */
/* Card container shared by hero / category-browse / trust strip so each
   section reads as a distinct, elevated block on the cream page background
   instead of bare text floating on it -- same family as .hd-pcard/.hd-cat-card.
   1200px matches the pillar-article "contained-content" width (see
   hd_site_design_body_class()) so these cards are never narrower than the
   article body/FAQ sections. */
.hd-hero{
  max-width:1200px; margin:28px auto 0; padding:64px 40px 56px;
  text-align:center;
  background:linear-gradient(180deg, #fffaf2 0%, var(--card) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hd-hero-eyebrow{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:14px;
}
.hd-hero h1{
  font-size:clamp(2.1rem, 5vw, 3.1rem); font-weight:600; max-width:920px; margin:0 auto 16px;
}
.hd-hero p{ font-size:1.08rem; color:var(--muted); max-width:760px; margin:0 auto; }

/* Card wrapper around a heading (.hd-section) + its grid -- used for the
   category-browse block on the homepage and both blocks on Top Produse. */
.hd-section-card{
  max-width:1200px; margin:28px auto 0; padding:8px 36px 40px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hd-section-card .hd-section{ max-width:none; padding:40px 0 8px; margin:0; }
.hd-section-card .hd-cat-grid{ max-width:none; padding:0; margin:0; }
.hd-section-card .hd-grid{ max-width:none; padding:0; margin:0; }
.hd-section-card .hd-pagination{ margin:32px 0 0; }

.hd-section{ max-width:1200px; margin:0 auto; padding:56px 20px 8px; }
.hd-section-head{ text-align:center; margin-bottom:30px; }
.hd-section-head .eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  font-weight:700; margin-bottom:10px;
}
.hd-section-head h2{ font-size:1.9rem; font-weight:600; margin-bottom:8px; }
.hd-section-head p{ color:var(--muted); font-size:1rem; max-width:560px; margin:0 auto; }

/* category pillar cards grid on homepage */
.hd-cat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:1200px; margin:0 auto 64px; padding:0 20px;
}
.hd-cat-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .15s ease, border-color .15s ease;
}
.hd-cat-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.hd-cat-icon{
  width:46px; height:46px; border-radius:11px; flex:0 0 auto;
  background:#f1ece2; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.hd-cat-card h3{ font-size:1.02rem; font-weight:600; margin-bottom:2px; }
.hd-cat-card span.count{ font-size:.8rem; color:var(--muted); }

.hd-trust{
  max-width:1200px; margin:28px auto 64px; padding:48px 20px;
  background:var(--ink); color:#fff;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hd-trust-inner{
  max-width:1160px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center; box-sizing:border-box;
}
.hd-trust-item h4{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; margin-bottom:6px; color:#fff; }
.hd-trust-item p{ font-size:.86rem; color:#cfcac0; margin:0; }

@media(max-width:900px){
  .hd-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .hd-trust-inner{ grid-template-columns:1fr; gap:22px; }
}
@media(max-width:600px){
  /* 18px matches .hd-inner's side padding in comparison-articles.css --
     without this these cards ran edge-to-edge on mobile (no outer gutter),
     unlike every article page. */
  .hd-hero{ margin:16px 18px 0; padding:44px 16px 40px; }
  .hd-section-card{ margin:16px 18px 0; padding:4px 18px 28px; }
  .hd-section-card .hd-section{ padding-top:28px; }
  .hd-trust{ margin:16px 18px 40px; padding:36px 16px; }
  .hd-cat-grid{ grid-template-columns:1fr; padding:0 18px; }
  .hd-grid{ padding:0 18px; }
  .hd-section{ padding:40px 18px 0; }
}

/* ================= CATEGORY ARCHIVE / STATIC PAGE HERO ================= */
.hd-cat-hero{
  max-width:1200px; margin:28px auto 0; padding:48px 40px 40px; text-align:center;
  background:linear-gradient(180deg, #fffaf2 0%, var(--card) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hd-cat-hero .eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  font-weight:700; margin-bottom:12px;
}
.hd-cat-hero h1{ font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:600; margin-bottom:10px; }
.hd-cat-hero p{ color:var(--muted); max-width:620px; margin:0 auto; font-size:1rem; }
.hd-cat-hero .count-pill{
  display:inline-block; margin-top:16px; font-size:.78rem; font-weight:700;
  color:var(--muted); background:var(--paper); border:1px solid var(--line);
  padding:5px 12px; border-radius:20px;
}

.hd-cat-archive .hd-grid{ padding-top:28px; padding-bottom:16px; }

.hd-pagination{
  display:flex; justify-content:center; gap:8px; margin:40px auto 64px;
}
.hd-pagination a, .hd-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  text-decoration:none; font-size:.86rem; font-weight:600;
}
.hd-pagination .current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hd-pagination a:hover{ border-color:var(--accent); color:var(--accent); }

/* ================= STATIC PAGES (Top Produse / Despre noi / Contact) ================= */
.hd-static-page .hd-page-wrap{
  max-width:760px; margin:0 auto; padding:48px 20px 80px;
}
.hd-static-page .hd-page-wrap h2{
  font-size:1.5rem; font-weight:600; margin:40px 0 14px;
}
.hd-static-page .hd-page-wrap h2:first-child{ margin-top:0; }
.hd-static-page .hd-page-wrap p{
  font-size:1.02rem; color:var(--ink); margin:0 0 16px; line-height:1.7;
}
.hd-static-page .hd-page-wrap > p:first-of-type{
  font-size:1.12rem; color:var(--muted);
}
.hd-static-page .hd-page-wrap a{
  color:var(--accent); font-weight:600; text-decoration:underline;
  text-decoration-color:rgba(232,85,43,.35); text-underline-offset:2px;
}
.hd-static-page .hd-page-wrap a:hover{ color:var(--accent-dark); }
.hd-static-page .hd-page-wrap a[href^="mailto:"]{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:4px 12px; text-decoration:none; box-shadow:var(--shadow);
}
.hd-static-page .hd-page-wrap a[href^="mailto:"]:hover{ border-color:var(--accent); color:var(--accent-dark); }
.hd-static-page .hd-page-wrap blockquote{
  margin:28px 0; padding:16px 20px; background:var(--card);
  border-left:4px solid var(--gold); border-radius:0 10px 10px 0;
}
.hd-static-page .hd-page-wrap blockquote p{ margin:0; font-size:.95rem; color:var(--muted); }
.hd-static-page .hd-page-wrap strong{ color:var(--ink); }

@media(max-width:600px){
  /* same 18px gutter standard as the homepage mobile fix above, so category
     archives and static pages (Top Produse, Despre noi, Contact) don't run
     edge-to-edge while the homepage cards do have a side margin. */
  .hd-cat-hero{ margin:16px 18px 0; padding:36px 16px 32px; }
  .hd-static-page .hd-page-wrap{ padding:36px 18px 56px; }
}