/* The Daily Grind hub (recipes.html). Layout breakpoints from the demo: useMobile(900) and
   phone = useMobile(560). Page colour is driven by daily-grind.js (body --cc-page-bg). */

/* Hero */
.cc-grind-hero{position:relative;z-index:1;padding:clamp(44px,5.5vw,84px) 24px clamp(34px,4vw,56px);text-align:center}
.cc-grind-hero__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,10.5vw,150px);line-height:.9;letter-spacing:-0.05em;text-transform:uppercase;color:#000;transition:color .35s ease;display:flex;flex-direction:column;align-items:center;gap:.02em}
.cc-grind-hero__line{display:flex;flex-wrap:wrap;justify-content:center;gap:.28em}

/* Filter tabs */
.cc-grind-tabs{display:flex;justify-content:center}
.cc-grind-tabs__row{display:flex}
.cc-grind-tabs--desk{margin-top:clamp(24px,3vw,44px)}
.cc-grind-tabs--mob{display:none;position:sticky;top:calc(var(--cc-ab,0px) + 56px);z-index:90;padding:8px 0 34px}
.cc-grind-tabs .cc-chip--tab{padding:11.5px 20px;font-size:16px;letter-spacing:2.4px}

/* Sections (transparent: the page colour shows through) */
.cc-grind-sec{position:relative;z-index:1;padding:clamp(60px,8vw,108px) 0;overflow:hidden;background:transparent}
.cc-grind-sec.is-hidden{display:none}
.cc-grind-sec__wrap{position:relative;z-index:2;width:min(1240px,100% - 96px);margin:0 auto}
.cc-grind-sec__title{margin:0 0 clamp(40px,5vw,68px);font-family:var(--font-display);font-weight:800;font-size:100px;line-height:.88;letter-spacing:-5px;text-transform:uppercase;text-align:center;text-wrap:balance}
.cc-grind-grid{display:grid;gap:20px}
.cc-grind-grid--recipes{grid-template-columns:repeat(3,1fr);gap:24px}
.cc-grind-grid--articles{grid-template-columns:repeat(2,1fr)}

@media (max-width:900px){
  .cc-grind-hero{padding:40px 16px 30px}
  .cc-grind-hero__title{font-size:68px}
  .cc-grind-tabs--desk{display:none}
  .cc-grind-tabs--mob{display:flex}
  .cc-grind-tabs .cc-chip--tab{padding:7px 10px;font-size:14px;letter-spacing:1.4px}
  .cc-grind-sec{padding:52px 0 60px}
  .cc-grind-sec__wrap{width:calc(100% - 32px)}
  .cc-grind-sec__title{margin:0 0 32px;font-size:clamp(32px,12vw,72px)}
  .cc-grind-grid--recipes{grid-template-columns:repeat(2,1fr);gap:18px}
  .cc-grind-grid--articles{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cc-grind-hero__title{font-size:46px}
  .cc-grind-grid--recipes{grid-template-columns:1fr}
}

/* Recipe popup (RecipePopup): overlay + rising dialog, body = template-parts/content/recipe-detail */
.cc-rpop{position:fixed;inset:0;z-index:500}
.cc-rpop__overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.cc-rpop__frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.cc-rpop__dialog{pointer-events:auto;position:relative;background:var(--cream);width:min(925px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:48px 40px;transform:translate3d(0,44px,0);transition:transform .5s var(--ease-expo);outline:none}
.cc-rpop.is-open .cc-rpop__dialog{transform:none}
.cc-rpop__close{position:absolute;top:20px;right:20px;z-index:2;background:var(--amber);color:#000;border:none;cursor:pointer;font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;padding:7px 10px;line-height:1}
.cc-rpop__loading{min-height:320px}
@media (max-width:900px){
  .cc-rpop__frame{padding:16px}
  .cc-rpop__dialog{width:100%;max-height:calc(100vh - 32px);padding:40px 16px}
  .cc-rpop__close{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){.cc-rpop__dialog{transition:none;transform:none}}
html.cc-rpop-lock{overflow:hidden}