/* AI Lady · ajanlom.css — Ajánlom aloldal.
   Cél: a főoldal / automatizalj oldal igényes, szerkesztőségi dizájnja.
   Cormorant serif címek, arany kiemelés, meleg krém kártyák arany szegéllyel. */

/* ── Helyi márkatokenek (önállóan, base.css-től függetlenül is működik) ── */
.ailady-view-ajanlom{
  --al-gold:#C4922A;
  --al-gold2:#D9A94A;
  --al-gold-dark:#A6781D;
  --al-ink:#2A2017;
  --al-ink2:#3A2E22;
  --al-muted:#8A7B66;
  --al-cream:#F5EFE6;
  --al-surface:#FBF7F0;
  --al-warm:#F0EBE3;
  --al-line:#E4D9C7;
  --al-gold-bd:rgba(196,146,42,.30);
  --al-gold-lt:rgba(196,146,42,.10);
  --al-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --al-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --al-shadow:0 2px 4px rgba(42,32,23,.04), 0 12px 28px rgba(42,32,23,.07);
  --al-shadow-hover:0 8px 16px rgba(42,32,23,.08), 0 22px 48px rgba(42,32,23,.14);
}

.site-header{ position:sticky; top:0; z-index:50; background:rgba(245,239,230,.9); backdrop-filter:saturate(140%) blur(8px); }

/* ───────────────────────── HERO ───────────────────────── */
.ailady-view-ajanlom .hero-intro{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:var(--wp--preset--spacing--60);
  align-items:center;
}
/* Eyebrow arany, vízszintes vonallal — mint az automatizalj oldalon */
.ailady-view-ajanlom .hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--al-gold) !important;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.ailady-view-ajanlom .hero-eyebrow::before{
  content:""; width:30px; height:1px; background:var(--al-gold); display:inline-block;
}
.ailady-view-ajanlom .hero-text h1{
  font-family:var(--al-serif);
  font-weight:700;
  line-height:1.06;
  color:var(--al-ink);
  letter-spacing:-.01em;
}
.ailady-view-ajanlom .hero-text h1 em{
  color:var(--al-gold); font-style:italic;
}
.ailady-view-ajanlom .hero-portrait img{
  border-radius:16px;
  box-shadow:0 18px 50px rgba(184,135,42,.18);
  border:2px solid var(--al-gold-bd);
  aspect-ratio:4 / 5; object-fit:cover; object-position:center 18%;
  width:100%; max-width:420px;
}
.ailady-view-ajanlom .hero-disclosure{
  border-left:3px solid var(--al-gold);
  padding-left:var(--wp--preset--spacing--20);
  color:var(--al-muted);
}

/* ─────────────────── KATEGÓRIA SZEKCIÓ ─────────────────── */
/* Halk váltakozó háttér ad ritmust az oldalnak (mint a mintán) */
.ailady-view-ajanlom .tool-category{ text-align:center; background:var(--al-cream); }
.ailady-view-ajanlom .tool-category:nth-of-type(even){ background:var(--al-warm); }

.ailady-view-ajanlom .category-head{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
/* Kategória eyebrow: arany, vonallal */
.ailady-view-ajanlom .category-label{
  display:inline-flex; align-items:center; gap:12px;
  text-transform:uppercase; letter-spacing:.18em; font-weight:700;
  color:var(--al-gold) !important; font-size:.72rem;
}
.ailady-view-ajanlom .category-label::before{
  content:""; width:28px; height:1px; background:var(--al-gold); display:inline-block;
}
/* Kategória cím: nagy Cormorant serif */
.ailady-view-ajanlom .category-title{
  font-family:var(--al-serif);
  font-weight:600;
  color:var(--al-ink);
  line-height:1.12;
  letter-spacing:-.01em;
}
.ailady-view-ajanlom .category-title em{ color:var(--al-gold); font-style:italic; }
.ailady-view-ajanlom .category-head .category-rule{ display:none; }
.ailady-view-ajanlom .category-head::after{
  content:""; display:block; width:52px; height:2px; border-radius:2px;
  background:var(--al-gold); opacity:.75; margin:10px auto 0;
}

/* ───────────────────────── KÁRTYARÁCS ───────────────────────── */
/* Egységes, középre fogott rács — több kártyánál is, egynél is szép */
.ailady-view-ajanlom .tool-grid,
.ailady-view-ajanlom .tool-grid.tool-grid--2{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 360px));
  justify-content:center;
  gap:var(--wp--preset--spacing--40);
  margin-top:8px;
}
/* Egy kártya esetén középre, kellemes szélességgel */
.ailady-view-ajanlom .tool-grid:not(.tool-grid--2){
  grid-template-columns:minmax(0, 560px);
}

/* ───────────────────────── ESZKÖZ KÁRTYA ───────────────────────── */
.ailady-view-ajanlom .tool-card{
  height:100%;
  text-align:left;
  background:var(--al-surface) !important;
  border:1px solid var(--al-gold-bd) !important;
  border-radius:16px !important;
  box-shadow:var(--al-shadow);
  transition:transform .28s ease, box-shadow .28s ease;
}
.ailady-view-ajanlom .tool-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--al-shadow-hover);
}
/* Logó: egységes magasság, balra igazítva */
.ailady-view-ajanlom .tool-card .tool-logo{ margin-bottom:var(--wp--preset--spacing--20); }
.ailady-view-ajanlom .tool-card .tool-logo img{
  height:32px; width:auto; display:block;
}
/* Kártyacím (“Azért szeretem…”): serif, ink */
.ailady-view-ajanlom .tool-card .tool-love{
  font-family:var(--al-serif);
  font-weight:600;
  color:var(--al-ink);
  line-height:1.2;
  letter-spacing:-.005em;
}
/* Törzsszöveg */
.ailady-view-ajanlom .tool-card p:not(.block-label):not(.category-label){
  color:var(--al-ink2);
  line-height:1.75;
  font-weight:400;
}
/* Kis arany címkék (“Mire használom”, “Kinek ajánlom”) */
.ailady-view-ajanlom .tool-card .block-label{
  text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  color:var(--al-gold-dark) !important;
}
/* CTA gomb lent, arany pill — mint a mintán */
.ailady-view-ajanlom .tool-card .tool-cta{ margin-top:auto; }
.ailady-view-ajanlom .wp-element-button{
  border-radius:999px !important;
  background:linear-gradient(135deg, var(--al-gold), var(--al-gold2)) !important;
  color:#fff8ee !important;
  border:none !important;
  font-family:var(--al-sans);
  font-weight:600; letter-spacing:.03em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ailady-view-ajanlom .wp-element-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(184,135,42,.30);
}

/* ───────────────────────── RESZPONZÍV ───────────────────────── */
@media (max-width:1024px){
  .ailady-view-ajanlom .hero-intro{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--40); }
  .ailady-view-ajanlom .hero-intro .hero-portrait{ order:-1; }
  .ailady-view-ajanlom .hero-intro .hero-portrait img{ margin:0 auto; }
}
@media (max-width:600px){
  .ailady-view-ajanlom .tool-grid,
  .ailady-view-ajanlom .tool-grid.tool-grid--2,
  .ailady-view-ajanlom .tool-grid:not(.tool-grid--2){ grid-template-columns:minmax(0, 360px); }
  .ailady-view-ajanlom .has-huge-font-size{ font-size:2.2rem; }
  .ailady-view-ajanlom .has-xxx-large-font-size{ font-size:1.8rem; }
  .ailady-view-ajanlom .tool-card .tool-love{ font-size:1.2rem; }
}