/* 04 OFERTA / S6 (TOR C od 18.10; ROZBIÓRKA mkvision.studio S6 "Waar we goed in zijn").
   Pomiar referencji 1440x900 (tools/gen_cards/qa/rz/ref.json): sekcja 775 px, jasna; nagłówek 52 px z jednym słowem akcentu;
   etykieta 14 px szara; lista usług 22.75 px co ok. 46 px (linki, kreska przy hover); po prawej karta akcentu 612x372
   (kolumny 7-12), zdanie 37.5 px, dwie pigułki 43 px (pełna biała + obrys) z przewijanym napisem przy hover.
   Nasze: czerwona karta, ceny i ramy czasowe 1:1 z produkcji, modal kontaktowy produkcji. Spis .ix i podgląd .of-pv usunięte. */
.of{position:relative;padding:112px 0;background:var(--paper);color:var(--ink)}
.of-h{margin:0;font:700 clamp(34px,3.6vw,56px)/1.14 var(--f-text);letter-spacing:-.02em}
.of-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:56px}
.of-col{grid-column:1/span 6}
.of-lbl{margin:0 0 26px;font:700 14px/1.4 var(--f-text);color:#6B6B66}
.of-list{margin:0;padding:0;list-style:none}
.of-a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "m p";column-gap:24px;padding:8px 0;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.of-name{grid-area:n;font:700 clamp(18px,1.58vw,26px)/1.3 var(--f-text);letter-spacing:-.01em}
.of-ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .5s var(--e-out)}
.of-meta{grid-area:m;margin-top:2px;font:700 13px/1.4 var(--f-text);color:#6B6B66}
.of-price{grid-area:p;align-self:start;font:700 clamp(18px,1.58vw,26px)/1.3 var(--f-text);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .3s var(--e-out)}
.of-a:focus-visible .of-ul,.of-a:active .of-ul{background-size:100% 2px}@media (hover:hover) and (pointer:fine){.of-a:hover .of-ul{background-size:100% 2px}}
.of-a:focus-visible .of-price,.of-a:active .of-price{color:var(--red)}@media (hover:hover) and (pointer:fine){.of-a:hover .of-price{color:var(--red)}}
.of-a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px}
.of-nw{white-space:nowrap}
.of-note{margin:26px 0 0;font:700 14px/1.4 var(--f-text);color:#6B6B66}

.of-card{grid-column:7/-1;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:372px;margin-top:48px;padding:43px;border-radius:24px;background:var(--red);color:#fff}
.of-card-t{margin:0;max-width:15em;font:700 clamp(24px,2.6vw,38px)/1.36 var(--f-text);letter-spacing:-.015em}
.of-btns{display:flex;flex-wrap:wrap;gap:12px}
.of-b{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 24px;border:1px solid #fff;border-radius:999px;font:700 15px/1 var(--f-text);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out)}
.of-b--w{background:#fff;color:var(--ink)}
.of-b--o{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.of-b svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.of-b-r{display:grid;overflow:hidden;height:1.2em;line-height:1.2}
.of-b-r>span{grid-area:1/1;transition:transform .55s var(--e-out)}
.of-b-r>span+span{transform:translateY(110%)}
.of-b:focus-visible .of-b-r>span:first-child,.of-b:active .of-b-r>span:first-child{transform:translateY(-110%)}@media (hover:hover) and (pointer:fine){.of-b:hover .of-b-r>span:first-child{transform:translateY(-110%)}}
.of-b:focus-visible .of-b-r>span+span,.of-b:active .of-b-r>span+span{transform:none}@media (hover:hover) and (pointer:fine){.of-b:hover .of-b-r>span+span{transform:none}}
.of-b--w:focus-visible,.of-b--w:active{background:var(--ink);border-color:var(--ink);color:#fff}@media (hover:hover) and (pointer:fine){.of-b--w:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
.of-b--o:focus-visible,.of-b--o:active{background:#fff;border-color:#fff;color:var(--red)}@media (hover:hover) and (pointer:fine){.of-b--o:hover{background:#fff;border-color:#fff;color:var(--red)}}
.of-b:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* P1 (18.10, Rafał): karta = prostokąt na pełną wysokość cennika (etykieta + lista + notka), góra i dół równo z kolumną;
   tekst u góry, przyciski na dole (flex space-between). Notka mniejsza, cała kursywą, z gwiazdką w HTML. */
.of-card{align-self:stretch;min-height:0;margin-top:0}
.of-note{font-size:12.5px;font-style:normal}

/* R2-D (18.10, Rafał: "czerwony kwadrat ... zwęź go w szerokości"): siatka 6/6 -> 8/4. Karta 4 kolumny
   (1440: 652 -> ok. 427 px), zwolnione miejsce dostaje cennik; wysokość karty dalej = cennik (stretch).
   Przyciski w węższej karcie jeden pod drugim, tekst karty o stopień mniejszy, żeby nie robił wieży. */
.of-col{grid-column:1/span 8}
.of-card{grid-column:9/-1;padding:36px}
.of-card-t{font-size:clamp(22px,2.05vw,32px)}
.of-btns{flex-direction:column;align-items:flex-start}

/* R3-D (18.10, Rafał: "ceny przesuń trochę do lewej strony robiąc mniejszy odstęp od napisów"): komputer.
   Lista = siatka 2 kolumn (nazwa max-content | reszta 1fr), wiersze dziedziczą ją przez subgrid, więc kolumna nazw ma
   szerokość NAJDŁUŻSZEJ nazwy, a ceny stoją równo pod sobą 32 px za nią (wcześniej przy prawej krawędzi kolumny).
   Meta (opis pod nazwą) przechodzi pod cenę na całą szerokość i nie poszerza kolumny nazw. Wysokość wierszy bez zmian.
   Telefon (<1024) bez zmian: nazwa i cena w jednej linii przy krawędziach, meta pod spodem. */
@media (min-width:1024px){
  @supports (grid-template-columns:subgrid){
    .of-list{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:32px}
    .of-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
    .of-a{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:"n p" "m m";column-gap:normal}
    .of-price{justify-self:start}
  }
}
/* R4-C (19.10, Rafał: "cennik: przesuń ceny delikatnie w prawo"): odstęp kolumny cen od najdłuższej nazwy 32 -> 64 px.
   Kwoty dalej w jednej kolumnie, równo pod sobą (lewa krawędź kolumny, tabular-nums); karta, wysokość i telefon bez zmian. */
@media (min-width:1024px){
  @supports (grid-template-columns:subgrid){
    .of-list{column-gap:64px}
  }
}

/* R6-B (19.10, Rafał: "ceny przesuń w prawo ale zachowaj odstęp wyraźny od czerwonego boxa"): odstęp kolumny cen od
   najdłuższej nazwy 64 -> ok. 140 px na 1440 (proporcjonalnie do szerokości okna); kwoty dalej w jednej kolumnie, do lewej,
   tabular-nums, w jednej linii. Luz prawego brzegu najszerszej ceny do karty mierzony w qa-R6B (wymóg >= 72 px). */
@media (min-width:1024px){
  @supports (grid-template-columns:subgrid){
    .of-list{column-gap:clamp(130px,16.7vw,300px)} /* R7-B (19.10, Rafał: "przesuń jeszcze do prawej same ceny"): 140 -> ok. 240 px na 1440; luz do karty >= 150 px na 1920/1440/1280 (qa-R7B) */
  }
}

/* R8-B (19.10, Rafał: "cennik: przesuń jeszcze ceny w prawo"): odstęp kolumny cen od najdłuższej nazwy ok. 240 -> ok. 317 px
   na 1440 (liniowo: 1024 -> ok. 201, 1280 -> ok. 272, od ok. 1736 px okna stałe 400). Nazwy, karta i jej wymiary bez zmian;
   kwoty dalej w jednej kolumnie, do lewej, tabular-nums, w jednej linii. Luz najszerszej ceny do karty mierzony w qa-R8B
   (wymóg >= 120 px na 1920/1440/1280, >= 80 px na 1100/1024). Telefon (<1024) bez zmian. */
@media (min-width:1024px){
  @supports (grid-template-columns:subgrid){
    .of-list{column-gap:clamp(150px,calc(28vw - 86px),400px)}
  }
}

@media (max-width:1023px){
  .of{padding:80px 0}
  .of-h{font-size:clamp(30px,8vw,40px);line-height:1.18}
  .of-grid{display:block;margin-top:32px}
  .of-lbl{margin-bottom:12px}
  .of-a{padding:10px 0;column-gap:16px;grid-template-areas:"n p" "m m"}
  .of-name,.of-price{font-size:18px}
  .of-price{max-width:7.2em;white-space:normal;text-align:right} /* "wycena indywidualna" w 2 liniach; kwoty mają twarde spacje */
  .of-card{min-height:0;margin-top:40px;padding:28px 24px;gap:28px}
  .of-card-t{font-size:26px}
  .of-btns{flex-direction:column}
  .of-b{width:100%;justify-content:space-between;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .of-ul,.of-price,.of-b,.of-b-r>span{transition:none}
}