/* ============ OFERTA ============
   The one page on the site that is allowed to shout, and the only one where
   red is a FILL rather than a hairline — a price reduction is exactly the
   moment the restraint elsewhere buys you something. Everything else stays in
   the house register: near-black ground, Fraunces for the editorial voice,
   JetBrains Mono for anything numeric. */

/* ---------- the stage ----------
   This page is allowed a theatre the rest of the site is not. The backdrop is
   the lead offer's own photograph — no new asset, nothing that can 404 —
   pushed almost to black and MASKED rather than faded: two intersecting
   gradients in `mask-image`, which is the house technique for putting a
   photograph under text (mix-blend-mode would drain the reds this page is
   built on, and an overlay div would sit on top of the type). */
.ohero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(126px,17vh,196px) 0 clamp(34px,6vh,64px);
  border-bottom:1px solid var(--line)}
.ohero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,56px)}
/* ★ The filter has to survive a WHITE car. Tuned against the silver GLE, which
   is the brightest thing the lot can put here: at brightness(.32) its bonnet
   competed with the headline. A photograph that changes with the offers cannot
   be trusted to be dark, so the floor is set for the worst case and the scrim
   below carries the rest. */
.ohero__bg{position:absolute;inset:-8% -4% auto -4%;height:min(78vh,760px);z-index:0;
  background-size:cover;background-position:center 38%;
  filter:grayscale(.5) brightness(.2) contrast(1.1) saturate(.8);
  transform:scale(1.06);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 58%,transparent 97%),
    linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 58%,transparent 97%),
    linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:oheroDrift 26s var(--ease) infinite alternate}
@keyframes oheroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(0,-1.4%,0)}}
/* the reading scrim: heaviest where the type is, clearing towards the car. This
   is what keeps the headline legible whatever photograph lands behind it. */
.ohero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.86) 30%,rgba(10,10,10,.45) 62%,rgba(10,10,10,.25) 100%)}
/* a single accent hairline bleeding out of the left margin — the page's spine */
.ohero::after{content:"";position:absolute;left:0;top:clamp(126px,17vh,196px);width:clamp(28px,5vw,90px);height:1px;
  background:var(--accent);z-index:2;box-shadow:0 0 22px rgba(209,26,47,.55)}
.ohero__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:3px 3px}

/* --display (Cinzel), not --serif — the same formal register as the homepage
   welcome. Capitals only, so the px drops hard and the tracking carries it;
   Fraunces's tight -.03em would jam these capitals together. */
/* Held in proportion to the homepage headline, which was deliberately pulled
   back from a too-large pass — see the ★ note on `.ttl` in hero-garage.css
   before enlarging this one. Cinzel sets «OFERTAT AKTUALE» 1038px wide per
   100px at .08em (measured) and .ohero__in tops out at 1288px of content, so
   the 5.35rem ceiling sits it at ~70% of the column with room to spare. Held in
   step with the homepage headline, which came down a notch on final sign-off. */
.ohero__ttl{font-family:var(--display);font-weight:600;
  font-size:clamp(1.85rem,6vw,5.35rem);line-height:1.14;
  letter-spacing:.08em;margin:18px 0 0;text-shadow:0 12px 60px rgba(0,0,0,.75)}
/* ★ NOT italic. Cinzel has no italic cut and `font-synthesis:none` (base.css)
   correctly refuses to fake one, so `font-style:italic` here would render
   upright anyway and only mislead the next reader. «aktuale» separates by
   colour instead. Restore the italic if --display ever gains one. */
.ohero__ttl em{font-style:normal;color:var(--text-2)}
.ohero__sub{max-width:46ch;margin-top:20px;font-size:clamp(.98rem,1.5vw,1.14rem);color:var(--text-2)}
.ohero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* the stat line — mono, tabular, hairline-separated. Numbers, not adjectives. */
.ostats{display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,46px);margin-top:clamp(30px,5vh,52px);
  padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--line-2)}
.ostat{display:flex;flex-direction:column;gap:7px}
.ostat__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.ostat__v b{font-family:var(--mono);font-size:clamp(1.3rem,3.1vw,2rem);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text)}
.ostat--hot .ostat__v b{color:var(--accent);text-shadow:0 0 30px rgba(209,26,47,.45)}

@media (prefers-reduced-motion:reduce){
  .ohero__bg{animation:none}
}

.osec{max-width:var(--maxw);margin:0 auto;padding:clamp(34px,6vh,64px) clamp(20px,4vw,56px) clamp(40px,8vh,90px)}

/* the grid deliberately runs 2-up on desktop, not 3: an offer is an event, and
   three across turns events back into a catalogue */
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:clamp(18px,2.6vw,30px)}

/* ---------- the card ----------
   Same 2-up shape as the stock grid, deliberately NOT the same weight. A card
   here has to read as an event: the ground carries a red cast the rest of the
   site never uses, the price is the biggest thing on it, and the saving is
   said twice — once as a flag you can catch at a glance, once in words for
   somebody who has already stopped. */
.ocard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,var(--surface) 0%,#150a0d 100%);border:1px solid var(--line-2);
  transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s var(--ease)}
.ocard:hover{transform:translateY(-5px);border-color:rgba(209,26,47,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(209,26,47,.12)}
/* a hairline of accent along the top edge, drawn on from the left on hover */
.ocard::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;z-index:3;
  background:linear-gradient(90deg,var(--accent),rgba(209,26,47,0));
  transition:width .6s var(--ease-out)}
.ocard:hover::before{width:100%}

.ocard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);display:block}
.ocard__media img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s var(--ease),transform .8s var(--ease-out)}
.ocard__media img.ld{opacity:1}
.ocard:hover .ocard__media img{transform:scale(1.06)}
.ocard__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,10,.85) 2%,rgba(10,10,10,.25) 38%,transparent 62%)}

/* the saving, as a filled red flag — the single loudest thing on the site */
.ocard__save{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:.72rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent);
  padding:.58em .95em;border-radius:7px;box-shadow:0 4px 22px rgba(209,26,47,.5)}
/* campaigns carry no photograph, so their flag lives in the body instead */
.ocard__save--inline{position:static;align-self:flex-start}
.ocard__kind{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);background:rgba(8,8,8,.6);
  border:1px solid var(--line-2);padding:.45em .7em;border-radius:6px}

.ocard__body{display:flex;flex-direction:column;gap:11px;flex:1;padding:22px clamp(20px,2.2vw,26px) 22px}
/* editorial register, like the page's own headline — a promotion is not a row
   in a table */
.ocard__ttl{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.75rem);
  letter-spacing:-.015em;line-height:1.1}
.ocard__spec{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--text-3);
  display:flex;flex-wrap:wrap;gap:.4em 1em}
.ocard__text{font-size:.95rem;color:var(--text-2);white-space:pre-wrap}

.ocard__prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55em;margin-top:4px}
.ocard__old{font-family:var(--mono);font-size:1rem;color:var(--text-3);text-decoration:line-through}
.ocard__new{font-size:clamp(2rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);line-height:1}
/* the saving said in words as well as on the flag */
.ocard__drop{flex-basis:100%;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}

/* a campaign with no photo keeps the card's identity through a left accent rule
   rather than a grey hole where the picture would be */
.ocard--noimg{border-left:2px solid rgba(209,26,47,.55)}
.ocard--noimg .ocard__body{padding-top:26px;gap:13px}

.ocard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line)}
.ocard__ends{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ocard__ends.is-soon{color:var(--accent)}
.ocard__acts{display:flex;gap:8px;margin-left:auto}

/* empty state — the page still has a job when there is nothing on offer */
.oempty{border:1px dashed var(--line-2);border-radius:16px;padding:clamp(28px,6vw,56px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.oempty__t{font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.8rem)}
.oempty__s{max-width:52ch;color:var(--text-2)}
.oempty .btn{margin-top:10px}

.ofoot{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(60px,12vh,120px);
  border-top:1px solid var(--line);padding-top:clamp(40px,7vh,72px)}
.ofoot__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.1}
.ofoot__s{max-width:52ch;margin-top:14px;color:var(--text-2)}
.ofoot__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

@media (max-width:640px){
  .ohero__cta .btn,.ofoot__cta .btn{flex:1 1 100%;justify-content:center}
}