/* /guides/ and every /guides/<slug>/ page only (guides.py and _food_guide.py → layout(extra_head=…)); never bundled into site.css.
   Our line-art icons (64-unit viewBox, 2-unit stroke, currentColor) replace the CSS-drawn book / glyph art of the hub cards and
   give each guide hero an emblem. The site.css rules of .gd-feature-art (:before book, span glyph) are switched off here. */

/* ---- tints: one per guide, the icon itself is always gold */
.gd-art-books{--gd-glow:#ad823b52;background:radial-gradient(circle at 50% 44%,var(--gd-glow),transparent 62%),linear-gradient(135deg,#2a2a25,#11181d);border-color:#8a6d2e66}
.gd-art-bag{--gd-glow:#88b5a340;background:radial-gradient(circle at 50% 44%,var(--gd-glow),transparent 62%),linear-gradient(135deg,#243a3c,#121a21);border-color:#75aaa35e}
.gd-art-food{--gd-glow:#e0b25b40;background:radial-gradient(circle at 50% 44%,var(--gd-glow),transparent 62%),linear-gradient(135deg,#3a392b,#161c1f);border-color:#b6a06866}
.gd-art-pets{--gd-glow:#9bb86f3a;background:radial-gradient(circle at 50% 44%,var(--gd-glow),transparent 62%),linear-gradient(135deg,#29321f,#11191c);border-color:#93ad6a5e}
.gd-art-hub{--gd-glow:#e0b25b3a;background:radial-gradient(circle at 50% 44%,var(--gd-glow),transparent 62%),linear-gradient(135deg,#232c3a,#12171f);border-color:#8a6d2e80}

/* ---- hub cards: the art box holds one SVG */
.gd-feature-art:before{content:none}
.gd-feature-art{min-height:0;height:148px;align-self:start;border-width:1px;border-style:solid;box-shadow:inset 0 0 0 1px #0e111680,inset 0 0 40px #0009}
.gd-feature-art>svg{width:92px;height:92px;color:var(--accent-2);stroke-width:1.75;filter:drop-shadow(0 0 7px #f0d28a4d);transition:transform .25s,filter .25s}
.gd-feature{position:relative;grid-template-columns:148px minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px;border-radius:12px;
  background:linear-gradient(180deg,#1b2230f2,#151a23f2);transition:border-color .2s,transform .2s}
.gd-feature-copy strong{font-size:1.4rem;text-wrap:balance}   /* two-line titles split evenly, no word alone on the second line */
.gd-feature-meta{text-wrap:pretty}
@media (hover:hover){   /* :hover only where a pointer really hovers; the lift and the zoom only without reduced motion */
  .gd-feature:hover .gd-feature-art>svg{filter:drop-shadow(0 0 11px #f0d28a73)}
  .gd-feature:hover .gd-feature-copy strong{color:var(--accent-2)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .gd-feature:hover{transform:translateY(-2px)}
  .gd-feature:hover .gd-feature-art>svg{transform:scale(1.05)}
}
.gd-feature:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* two cards a row from 900 px: four guides are one screen, not four full-width strips */
@media (min-width:900px){
  .gd-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .gd-catalog>.gd-section-head{grid-column:1/-1;margin-bottom:0}
  .gd-feature{grid-template-columns:132px minmax(0,1fr);align-items:start;padding:14px 44px 14px 14px}
  .gd-feature-art{height:132px}
  .gd-feature-art>svg{width:84px;height:84px}
  .gd-feature-copy{padding-top:4px}
  .gd-feature-copy strong{font-size:1.28rem}
  .gd-arrow{position:absolute;top:14px;right:16px}
}
@media (max-width:640px){
  .gd-feature{grid-template-columns:76px minmax(0,1fr);gap:14px;padding:12px}
  .gd-feature-art{height:76px;min-height:0}
  .gd-feature-art>svg{width:52px;height:52px;stroke-width:2.1}
  .gd-feature-copy strong{font-size:1.18rem}
  .gd-catalog{gap:10px}
  .gd-emblem{width:52px;height:52px}
  .gd-emblem>svg{width:34px;height:34px;stroke-width:2.5}
}
@media (max-width:380px){.gd-feature{grid-template-columns:60px minmax(0,1fr)}.gd-feature-art{display:grid;height:60px}.gd-feature-art>svg{width:42px;height:42px;stroke-width:2.4}}
@media (prefers-reduced-motion:reduce){.gd-feature,.gd-feature-art>svg{transition:none}}

/* ---- hero emblem: a seal above the eyebrow below 1000 px; from 1000 px a medallion on the right of the hub and article heroes,
   where the decorative ring was, and beside the eyebrow in the food hero (which has its own aside on the right) */
.gd-emblem{display:grid;place-items:center;width:60px;height:60px;border-width:1px;border-style:solid;border-radius:50%;color:var(--accent-2);
  box-shadow:inset 0 0 0 3px #0e111699,inset 0 0 0 4px #e0b25b1f,0 8px 20px #0007}
.gd-emblem>svg{width:40px;height:40px;stroke-width:2.2;filter:drop-shadow(0 0 6px #f0d28a4d)}
@media (min-width:1000px){
  .gd-hero--emblem{padding-right:clamp(250px,24vw,330px)}
  .gd-hero--emblem:after{right:clamp(20px,5vw,60px);bottom:50%;width:230px;height:230px;transform:translateY(50%);box-shadow:0 0 0 22px #e0b25b08,0 0 0 50px #e0b25b05}
  .gd-hero--emblem>.gd-emblem{position:absolute;top:50%;right:clamp(35px,calc(5vw + 15px),75px);width:200px;height:200px;transform:translateY(-50%)}
  .gd-hero--emblem>.gd-emblem>svg{width:124px;height:124px;stroke-width:1.5;filter:drop-shadow(0 0 12px #f0d28a59)}
  /* food hero: the seal sits beside the eyebrow, so the hero is no taller than the «Как пользоваться» aside next to it */
  .gf-hero-main{grid-template-columns:auto minmax(0,1fr);column-gap:14px}
  .gf-hero-main>*{grid-column:1/-1}
  .gf-hero-main>.gd-emblem{grid-column:1;width:48px;height:48px}
  .gf-hero-main>.gd-emblem>svg{width:32px;height:32px}
  .gf-hero-main>.gd-emblem+.eyebrow{grid-column:2;align-self:center;margin:0}
}
/* below 1000 px the medallion is a small seal: the site ring behind the hero buttons goes too */
@media (max-width:999px){.gd-hero--emblem:after{content:none}}