/* Taste Lab: professional layout (layered on main.css) */
:root{
  --tl-bg:#242943; --tl-bg2:#2c3252; --tl-surface:#323a5e; --tl-line:rgba(255,255,255,.12);
  --tl-text:#f2f3f8; --tl-muted:#b9bdd3; --tl-accent:#e3a857; --tl-mint:#8ee9a8; --tl-cyan:#9bf6ff;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.tl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Hero ---------- */
#banner.tl-hero{
  min-height:68vh;height:auto!important;max-height:none!important;padding:0!important;
  display:flex;align-items:center;justify-content:center;text-align:center;position:relative;
  background:#151827 url("../../images/recipes/soups/shulyum-lamb-soup.webp") center 45%/cover no-repeat!important;
}
#banner.tl-hero:before{content:"";display:block!important;position:absolute;inset:0;opacity:1!important;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,24,39,.78) 0%,rgba(21,24,39,.55) 45%,rgba(36,41,67,.96) 100%)}
#banner.tl-hero:after{display:none!important}
#banner.tl-hero>.inner{position:relative;z-index:1;width:100%;max-width:52rem;padding:7rem 1.5rem 5rem!important;transform:none!important;opacity:1!important}
.tl-eyebrow{display:inline-block;color:var(--tl-accent);font-size:.78rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;margin-bottom:1.1rem}
.tl-hero h1{color:#fff;font-size:2.7rem;line-height:1.2;letter-spacing:.08em;margin:0 0 1.1rem;text-transform:uppercase}
.tl-hero h1:after,.tl-hero h1:before{display:none!important}
.tl-lead{color:#e7e9f4;font-size:1.2rem;line-height:1.7;letter-spacing:0;text-transform:none;max-width:38rem;margin:0 auto 2rem}
.tl-hero-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.tl-btn{display:inline-flex;align-items:center;justify-content:center;height:3.1rem;line-height:1;padding:0 1.7rem;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.tl-btn:hover{transform:translateY(-2px)}
.tl-btn-primary{background:var(--tl-accent);color:#1b1e33!important;box-shadow:0 6px 20px rgba(227,168,87,.35)}
.tl-btn-primary:hover{background:#efb96b}
.tl-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.55);background:rgba(21,24,39,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tl-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.tl-hero-count{margin:2rem 0 0;color:var(--tl-muted);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}

/* ---------- Main + sticky toolbar ---------- */
#main{background:var(--tl-bg);padding-top:0}
.tl-toolbar{position:sticky;top:var(--tl-hdr,3.5rem);z-index:900;background:rgba(36,41,67,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--tl-line)}
.tl-toolbar-inner{max-width:76rem;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap}
.tl-toolbar .filter-buttons{margin:0;justify-content:flex-start;gap:.5rem;flex-wrap:wrap}
.tl-toolbar .filter-btn{height:2.4rem;line-height:1;padding:0 1.05rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.12em;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;box-shadow:none}
.tl-toolbar .filter-btn:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.tl-toolbar .filter-btn.active{background:var(--tl-accent);border-color:var(--tl-accent);color:#1b1e33}
.tl-tools{display:flex;align-items:center;gap:1rem}
.tl-search input{width:17rem;max-width:100%;height:2.4rem;padding:0 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:.9rem;letter-spacing:0;box-shadow:none}
.tl-search input::placeholder{color:#a9aec6}
.tl-search input:focus{border-color:var(--tl-accent);outline:none;background:rgba(255,255,255,.1)}
.tl-count{color:var(--tl-muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.filter-btn:focus-visible,.tl-btn:focus-visible,.tl-search input:focus-visible{outline:3px solid var(--tl-cyan);outline-offset:2px}

/* ---------- Recipe cards ---------- */
#one.inner{max-width:76rem!important;margin:0 auto;padding:2.5rem 1.5rem 5rem!important;display:grid!important;gap:2.2rem}
.recipe-section,.recipe-section.reverse{
  display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;gap:0;padding:0!important;
  background:var(--tl-surface);border:1px solid var(--tl-line)!important;border-radius:20px;overflow:clip;
  box-shadow:0 14px 40px rgba(0,0,0,.35);scroll-margin-top:calc(var(--tl-hdr,3.5rem) + 5.5rem);flex-direction:row;
}
.recipe-section.tl-nomatch{display:none!important}
.recipe-section.recipe-hidden{display:none!important}

.recipe-image-container{flex:none!important;width:auto!important;height:auto!important;border-radius:0!important;overflow:visible!important;background:var(--tl-surface);position:relative}
.recipe-image-container img{position:sticky;top:calc(var(--tl-hdr,3.5rem) + 5rem);width:100%;height:min(34rem,calc(100vh - 11rem));min-height:22rem;object-fit:cover;display:block;cursor:zoom-in;transform:none!important;transition:filter .3s}
.recipe-image-container img:hover{filter:brightness(1.08)}

.recipe-text-container{flex:none!important;min-width:0;padding:2.2rem 2.4rem 2.4rem}
.tl-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.tl-chip,.recipe-text-container .calorie-tag{display:inline-flex;align-items:center;margin:0!important;padding:.32rem .8rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.tl-chip{background:rgba(227,168,87,.16);color:#f2c17a}
.recipe-text-container .calorie-tag{background:rgba(142,233,168,.14);color:var(--tl-mint)}
.recipe-text-container h3{font-size:1.75rem;line-height:1.25;letter-spacing:.02em;text-transform:none;margin:0 0 1.4rem;color:#fff}

/* numbered steps (built by taste-lab-pro.js) */
.tl-steps{list-style:none;margin:0 0 1.6rem;padding:0;counter-reset:none}
.tl-steps li{display:grid;grid-template-columns:2rem 1fr;gap:.9rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.09)}
.tl-steps li:first-child{border-top:0;padding-top:0}
.tl-num{width:2rem;height:2rem;border-radius:50%;background:rgba(227,168,87,.18);color:var(--tl-accent);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;margin-top:.1rem}
.tl-steps strong{display:block;color:#fff;font-size:.95rem;letter-spacing:.02em;margin-bottom:.15rem}
.tl-steps p{margin:0;color:#d7daea;font-size:1rem;line-height:1.65;letter-spacing:0;text-transform:none}

.recipe-text-container p:not(.tl-steps p){line-height:1.7}

/* action buttons */
.recipe-text-container .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .4rem;padding:0;list-style:none}
.recipe-text-container .actions li{padding:0!important}
.recipe-text-container .actions .button{display:inline-flex!important;align-items:center;justify-content:center;height:2.6rem;line-height:1;padding:0 1.2rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.1em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;transition:background .2s,box-shadow .2s}
.recipe-text-container .actions .button:hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px #fff}

/* ingredients */
.ingredients-content{margin-top:1.2rem!important;padding:1.2rem 1.4rem!important;background:rgba(0,0,0,.18)!important;border:1px solid var(--tl-line);border-left:4px solid var(--tl-accent)!important;border-radius:12px!important}
.ingredients-content .table-wrapper{overflow:visible;margin:0}
.ingredients-content table,.ingredients-content tbody{display:block;width:100%;border:0;background:transparent}
.ingredients-content tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
.ingredients-content tr{display:block;border:0!important;background:transparent!important}
.ingredients-content td{display:block;padding:.45rem 0!important;border:0!important}
.ingredients-content label{text-transform:none!important;letter-spacing:0!important;font-size:.95rem!important;line-height:1.45;color:#eceef8}

/* deep-link highlight */
.recipe-section.tl-flash{animation:tl-flash 2.2s ease-out}
@keyframes tl-flash{0%,40%{box-shadow:0 0 0 3px var(--tl-accent),0 14px 40px rgba(0,0,0,.35)}100%{box-shadow:0 14px 40px rgba(0,0,0,.35)}}

.tl-empty{text-align:center;color:var(--tl-muted);font-size:1.05rem;padding:3rem 0;letter-spacing:0;text-transform:none}

/* footer spacing */
#footer{border-top:1px solid var(--tl-line)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .recipe-section,.recipe-section.reverse{grid-template-columns:1fr}
  .recipe-image-container img{position:static;height:auto;aspect-ratio:4/3;min-height:0;max-height:26rem}
  .recipe-text-container{padding:1.8rem 1.6rem 2rem}
}
@media (max-width:736px){
  #banner.tl-hero{min-height:60vh}
  #banner.tl-hero>.inner{padding:6rem 1.25rem 3.5rem!important}
  .tl-hero h1{font-size:1.75rem;letter-spacing:.05em}
  .tl-lead{font-size:1.05rem}
  .tl-btn{width:100%;max-width:20rem}
  .tl-toolbar{position:static}
  .tl-toolbar-inner{padding:.7rem 1rem;flex-direction:column;align-items:stretch}
  .tl-toolbar .filter-buttons{flex-wrap:wrap;overflow:visible;gap:.45rem;padding-bottom:.2rem}
  .tl-toolbar .filter-btn{flex:0 0 auto;height:2.2rem;padding:0 .85rem;font-size:.66rem;letter-spacing:.09em}
  .tl-tools{justify-content:space-between}
  .tl-search{flex:1}.tl-search input{width:100%}
  #one.inner{padding:1.5rem 1rem 3.5rem!important;gap:1.6rem}
  .recipe-section,.recipe-section.reverse{border-radius:16px}
  .recipe-text-container h3{font-size:1.4rem}
  .ingredients-content tbody{grid-template-columns:1fr}
}

/* ---------- Toolbar: search box stays on the right on tablets and desktops ----------
   The category buttons wrap onto a second line inside their own column when they don't fit,
   so the search box and the counter never drop below them. */
@media (min-width:737px){
  .tl-toolbar-inner{flex-wrap:nowrap}
  .tl-toolbar .filter-buttons{flex:1 1 auto;min-width:0;flex-wrap:wrap}
  .tl-toolbar .filter-btn{flex:0 0 auto;padding:0 .9rem;letter-spacing:.1em}
  .tl-tools{flex:0 0 auto}
  .tl-search input{width:clamp(10rem,18vw,15rem)}
}
@media (min-width:737px) and (max-width:1200px){
  .tl-toolbar .filter-btn{padding:0 .75rem;letter-spacing:.08em}
  .tl-toolbar-inner{gap:1rem}
}

/* Image viewer: fill the screen instead of staying at the original small size */
#zoomed-active{width:90vw!important;height:86vh!important;object-fit:contain;box-shadow:none!important;background:transparent;filter:drop-shadow(0 0 30px rgba(0,0,0,.7))}

/* Seven categories (Sauces and Drinks added): keep the buttons on one row on wide screens
   by tightening them a little and stacking the live count under the search box. */
@media (min-width:1201px){
  .tl-toolbar .filter-buttons{gap:.4rem}
  .tl-toolbar .filter-btn{padding:0 .8rem;letter-spacing:.07em}
  .tl-toolbar-inner{gap:1rem}
  .tl-search input{width:13rem}
  .tl-tools{flex-direction:column;align-items:flex-end;gap:.3rem}
  .tl-count{font-size:.66rem;letter-spacing:.1em}
}