/* =========================================================
   MAISTIQO — Recipes directory + recipe page
   Liquid Glass edition · extends glass-landing.css
   ========================================================= */

/* ───────── directory hero ───────── */
.rx-hero{ position:relative; z-index:1; padding:140px 0 34px; }
.rx-hero .crumbs{ display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px; letter-spacing:0.08em; color:var(--ink-3); margin-bottom:18px; text-transform:uppercase; }
.rx-hero .crumbs a{ color:var(--ink-2); transition:color .2s; }
.rx-hero .crumbs a:hover{ color:#fff; }
.rx-hero h1{ font-size:clamp(38px,5.4vw,64px); font-weight:700; letter-spacing:-0.04em; color:#fff; margin-top:16px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.rx-count{ font-family:var(--ff-mono); font-size:0.42em; font-weight:600; letter-spacing:0; color:var(--em-300);
  background:rgba(47,212,149,0.13); border:1px solid rgba(125,230,181,0.28); padding:6px 14px; border-radius:var(--r-full);
  box-shadow:inset 0 1px 0 var(--spec); }
.rx-sub{ font-size:18px; color:var(--ink-2); margin-top:16px; max-width:52ch; line-height:1.55; text-wrap:pretty; }

/* tools row */
.rx-tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px; }
.rx-search{ display:flex; align-items:center; gap:10px; flex:1; min-width:230px; max-width:360px;
  background:var(--field); border:1px solid var(--hair); border-radius:var(--r-full); padding:12px 18px;
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--spec); transition:border-color .2s, background .2s; }
.rx-search:focus-within{ border-color:rgba(125,230,181,0.45); background:rgba(255,255,255,0.09); }
.rx-search svg{ flex:none; opacity:.65; }
.rx-search input{ flex:1; background:transparent; border:0; outline:0; color:#fff; font-family:var(--ff-body); font-size:15px; }
.rx-search input::placeholder{ color:var(--ink-3); }
.rx-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rx-chip{ font-family:var(--ff-display); font-weight:600; font-size:13.5px; letter-spacing:-0.01em;
  color:var(--ink-2); background:var(--field); border:1px solid var(--hair); border-radius:var(--r-full);
  padding:9px 16px; cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--spec); transition:all .2s; }
.rx-chip:hover{ color:#fff; background:rgba(255,255,255,0.11); }
.rx-chip.on{ color:#04261A; background:linear-gradient(160deg,var(--em-500),var(--em-600)); border-color:transparent;
  box-shadow:0 10px 26px -12px rgba(47,212,149,0.6), inset 0 1px 0 rgba(255,255,255,0.35); }

/* ───────── card grid ───────── */
.rx-grid-sec{ padding:26px 0 70px; }
.rx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .rx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rx-grid{ grid-template-columns:1fr; } }

.rx-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; border-radius:var(--r-lg); color:var(--ink);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease; }
.rx-card:hover{ transform:translateY(-5px); border-color:rgba(125,230,181,0.32); box-shadow:0 34px 70px -30px rgba(0,0,0,0.8), 0 18px 50px -24px rgba(0,135,90,0.35), inset 0 1px 0 var(--spec); }
.rx-card:hover .rx-img img{ transform:scale(1.05); }

.rx-img{ position:relative; aspect-ratio:16/10.5; overflow:hidden; background:rgba(255,255,255,0.04); }
.rx-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.rx-img image-slot{ position:absolute; inset:0; }
.rx-img::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(5,12,9,0.36), transparent 42%); }
.rx-tag{ position:absolute; z-index:2; top:12px; left:12px; font-family:var(--ff-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:#EAF2ED; background:rgba(8,14,11,0.6); border:1px solid var(--hair);
  border-radius:var(--r-full); padding:5px 11px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--spec); }
.rx-kcal{ position:absolute; z-index:2; top:12px; right:12px; font-family:var(--ff-display); font-weight:700; font-size:13px;
  letter-spacing:-0.01em; color:#04261A; background:linear-gradient(160deg,var(--em-300),var(--em-500));
  border-radius:var(--r-full); padding:6px 12px; box-shadow:0 8px 20px -8px rgba(47,212,149,0.7), inset 0 1px 0 rgba(255,255,255,0.45); }

.rx-body{ display:flex; flex-direction:column; gap:12px; padding:18px 20px 20px; }
.rx-title{ font-family:var(--ff-display); font-size:18.5px; font-weight:600; letter-spacing:-0.02em; color:#fff; line-height:1.25; text-wrap:pretty; }
.rx-meta{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-2); margin-top:auto; }
.rx-meta span{ display:inline-flex; align-items:center; gap:6px; }
.rx-meta svg{ flex:none; opacity:.75; }
.rx-meta .prot{ color:var(--m-protein); font-weight:600; }

.rx-empty{ display:none; text-align:center; padding:60px 24px; border-radius:var(--r-lg); }
.rx-empty.show{ display:block; }
.rx-empty .e1{ font-family:var(--ff-display); font-size:20px; font-weight:600; color:#fff; }
.rx-empty .e2{ font-size:14.5px; color:var(--ink-2); margin-top:8px; }

/* ───────── recipe detail ───────── */
.rd-hero{ position:relative; z-index:1; padding:130px 0 30px; }
.rd-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:28px; align-items:stretch; margin-top:22px; }
@media (max-width:920px){ .rd-grid{ grid-template-columns:1fr; } }

.rd-photo{ position:relative; overflow:hidden; padding:0; border-radius:var(--r-xl); min-height:380px; }
.rd-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rd-photo image-slot{ position:absolute; inset:0; }
.rd-photo::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(5,12,9,0.4), transparent 36%); }

.rd-panel{ padding:34px 34px 30px; border-radius:var(--r-xl); display:flex; flex-direction:column; }
@media (max-width:560px){ .rd-panel{ padding:26px 22px; } }
.rd-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rd-chip{ font-family:var(--ff-mono); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--em-300); background:rgba(47,212,149,0.12); border:1px solid rgba(125,230,181,0.26);
  border-radius:var(--r-full); padding:5px 12px; box-shadow:inset 0 1px 0 var(--spec); }
.rd-chip.alt{ color:var(--ink-2); background:var(--field); border-color:var(--hair); }
.rd-panel h1{ font-size:clamp(30px,3.6vw,44px); font-weight:700; letter-spacing:-0.035em; color:#fff; margin-top:18px; line-height:1.06; text-wrap:pretty; }
.rd-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:14.5px; color:var(--ink-2); }
.rd-meta span{ display:inline-flex; align-items:center; gap:7px; }
.rd-meta svg{ opacity:.75; flex:none; }
.rd-meta b{ color:#fff; font-weight:600; }

/* macro bars */
.rd-macros{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.rd-macros .mrow{ display:grid; grid-template-columns:112px 1fr 64px; align-items:center; gap:14px; }
.rd-macros .ml{ font-size:13.5px; font-weight:500; color:var(--ink-2); }
.rd-macros .mv{ font-family:var(--ff-mono); font-size:13px; font-weight:600; color:#fff; text-align:right; }
.rd-macros .mbar{ height:8px; border-radius:99px; background:rgba(255,255,255,0.09); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,0.35); }
.rd-macros .mfill{ height:100%; width:0; border-radius:inherit; transition:width 1.2s cubic-bezier(.2,.8,.2,1) .3s; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35); }
.rd-kcal-line{ display:flex; align-items:baseline; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--hair-2); }
.rd-kcal-line .kv{ font-family:var(--ff-display); font-weight:700; font-size:40px; letter-spacing:-0.03em; color:#fff; line-height:1; }
.rd-kcal-line .kl{ font-size:13.5px; color:var(--ink-2); }
.rd-cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px; }

/* ingredients + nutrition section */
.rd-sec{ padding:26px 0 60px; position:relative; z-index:1; }
.rd-cols{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:18px; align-items:start; }
@media (max-width:920px){ .rd-cols{ grid-template-columns:1fr; } }
.rd-card{ padding:30px; border-radius:var(--r-lg); }
@media (max-width:560px){ .rd-card{ padding:24px 20px; } }
.rd-card h2{ font-size:22px; font-weight:600; letter-spacing:-0.02em; color:#fff; display:flex; align-items:center; gap:11px; }
.rd-card h2 .hic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:rgba(47,212,149,0.14); border:1px solid rgba(125,230,181,0.22); box-shadow:inset 0 1px 0 var(--spec); }
.rd-card .hnote{ font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-left:auto; }

.ing-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
@media (max-width:640px){ .ing-list{ grid-template-columns:1fr; } }
.ing-list li{ display:flex; align-items:baseline; gap:12px; padding:11px 2px; border-bottom:1px solid var(--hair-2); font-size:15px; color:var(--ink); }
.ing-list .amt{ font-family:var(--ff-mono); font-size:12.5px; font-weight:600; color:var(--em-300); flex:none; min-width:52px; }
.ing-list .inm{ line-height:1.35; }

.nut-table{ margin-top:20px; display:flex; flex-direction:column; }
.nut-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 2px; border-bottom:1px solid var(--hair-2); }
.nut-row:last-child{ border-bottom:0; }
.nut-row .nl{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-2); }
.nut-row .dot{ width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 8px -1px currentColor; }
.nut-row .nv{ font-family:var(--ff-mono); font-size:14px; font-weight:600; color:#fff; }
.nut-row.total .nl{ color:#fff; font-weight:600; }
.nut-row.total .nv{ color:var(--em-300); font-size:16px; }

/* log CTA strip */
.rd-log{ margin-top:18px; padding:30px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(47,212,149,0.18), rgba(0,135,90,0.1));
  border:1px solid rgba(125,230,181,0.26);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%); }
.rd-log::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 20% 0%, rgba(125,230,181,0.24), transparent 60%); }
.rd-log h3{ position:relative; font-size:21px; font-weight:600; color:#fff; letter-spacing:-0.02em; }
.rd-log p{ position:relative; font-size:14.5px; color:rgba(234,242,237,0.78); margin-top:9px; line-height:1.55; text-wrap:pretty; }
.rd-log .btn{ position:relative; margin-top:20px; }

/* bottom cta reuse */
.rx-cta-sec{ padding:20px 0 70px; position:relative; z-index:1; }