/* ==========================================================================
   URSUS — elrendezés: mérték, szalagok, függőleges ritmus
   FONTOS: a szekció-osztályok CSAK padding-block-ot állítanak, soha nem
   `padding` rövidítést. Ha rövidítést használnánk, kinullázná a .u-wrap
   oldalsó paddingjét ott, ahol a két osztály egy elemen ül — a tartalom
   a képernyő széléhez érne.
   ========================================================================== */

.u-wrap{
  width:100%;
  max-width:var(--u-max);
  margin-inline:auto;
  padding-inline:var(--u-gut);
}
.u-wrap--narrow{max-width:820px}

/* Szalagok: a világos/sötét váltakozás adja az oldal ritmusát */
.u-band--dark{background:var(--u-ink);color:var(--u-tx-d)}
.u-band--dark2{background:var(--u-ink-2);color:var(--u-tx-d)}
.u-band--paper{background:var(--u-paper);color:var(--u-tx-l)}
.u-band--paper2{background:var(--u-paper-2);color:var(--u-tx-l)}
.u-band--dark + .u-band--dark{border-top:1px solid var(--u-line-d)}

/* Függőleges ritmus */
.u-sec{padding-block:48px}
.u-sec--sm{padding-block:32px}
.u-sec--lg{padding-block:56px}
@media (min-width:600px){
  .u-sec{padding-block:64px}
  .u-sec--sm{padding-block:44px}
  .u-sec--lg{padding-block:76px}
}
@media (min-width:900px){
  .u-sec{padding-block:88px}
  .u-sec--sm{padding-block:56px}
  .u-sec--lg{padding-block:104px}
}

/* Szekció-fejléc: mobilon egymás alatt, 900px felett szemben */
.u-sechead{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.u-sechead__cta{align-self:flex-start}
@media (min-width:900px){
  .u-sechead{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:38px}
}

/* Vízszintesen görgethető sáv mobilon, ráccsá alakul nagyobb kijelzőn.
   A negatív margó a kijelző széléig viszi a sávot — a .u-wrap paddingjét
   ellensúlyozza, ezért a jobb szélen sem lóg ki. */
.u-scroller{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--u-gut) * -1);
  padding-inline:var(--u-gut);
  padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.u-scroller > *{scroll-snap-align:start}
@media (min-width:600px){ .u-scroller{grid-auto-columns:46%} }
@media (min-width:900px){
  .u-scroller{
    grid-auto-flow:row;grid-auto-columns:auto;
    overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0;
  }
  .u-scroller--3{grid-template-columns:repeat(3,1fr);gap:18px}
  .u-scroller--4{grid-template-columns:repeat(4,1fr);gap:14px}
}

/* Rácsok */
.u-grid{display:grid;gap:12px}
@media (min-width:600px){ .u-grid{gap:16px} }
.u-grid--2{grid-template-columns:repeat(2,1fr)}
.u-grid--cats{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .u-grid--cats{grid-template-columns:repeat(4,1fr);gap:18px} }
.u-grid--products{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .u-grid--products{grid-template-columns:repeat(3,1fr);gap:20px} }

/* Két hasáb: mobilon egymás alatt */
.u-split{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:900px){ .u-split{grid-template-columns:1fr 1fr;gap:64px;align-items:center} }