/* ==========================================================================
   Sekcja: Oferta - naglowek podstrony

   CALA podstrona stoi na JEDNEJ osi pionowej. Kontener .wrap ma 12 kolumn,
   a szyna to poczatek kolumny 7 - czyli dokladnie polowa kolumny tresci
   (przy 1440: 56 + 664 = 720 px, a wiec takze optyczny srodek ekranu).
   Nic na tej stronie nie startuje poza kolumna 1 albo kolumna 7:

     wiersz etykiet   OFERTA (1-6)          |  SALON OPTYCZNY (7-12)
     H1               1-12
     akapit                                 |  7-12
     spis uslug       01-04 (1-6)           |  05-07 (7-12)

   Poprzednia wersja miala akapit dosuniety do prawej przez margin-inline-start:
   auto - ladnie sie konczyl, ale zaczynal sie w przypadkowym miejscu (807 px),
   wiec oko nie mialo czego szukac. Teraz akapit zaczyna sie na szynie, a to,
   ze pod H1 zostaje pusty trojkat, jest skutkiem siatki, nie wyjatkiem od niej.

   Dlatego tez ta sekcja NIE uzywa .marked: pionowa etykieta zjada 3.5rem z
   lewej i przesunelaby cala siatke intro wzgledem listy uslug nizej. Rodzina
   naglowkow podstron (o-nas-hero, oprawy-i-marki-hero) tez jej nie uzywa.
   ========================================================================== */

.oferta-intro {
  /* Prawy oddech kolumny tekstowej - ta sama wartosc wraca w liscie uslug
     i w bloku domykajacym, wiec wszystkie akapity strony koncza sie rowno. */
  --oferta-pad: clamp(1.5rem, 3.4vw, 3.5rem);

  /* Header jest fixed i przezroczysty nad pierwsza sekcja - oddajemy mu oddech. */
  padding-block: clamp(7rem, 5.5rem + 5vw, 10.5rem) clamp(3.5rem, 6vw, 6rem);
}

/* --- Wiersz etykiet ----------------------------------------------------- */
/* Ponizej 1024 dwie rozstrzelone wersalki jedna pod druga czytaja sie jak
   pomylka skladu. Zostaje ta, ktora niesie tresc. */
.oferta-intro__tag--a { display: none; }

.oferta-intro__tag--b { display: block; }

/* --- H1 ----------------------------------------------------------------- */
/* Druga linia ("Twojego wzroku.", 15 znakow w Zodiaku) jest gardlem skali.
   Przy 1440 stopien zatrzymuje sie na 104 px i zostaje ok. 40% zapasu w
   wierszu; przy 390 schodzi do 37 px i miesci sie w gutterze mobilnym. */
.oferta-intro__h {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font: 300 clamp(2.35rem, 7.4vw, 6.5rem)/0.98 var(--sans);
  letter-spacing: -0.028em;
}

.oferta-intro__h .line { display: block; }
.oferta-intro__h .serif { font-family: var(--serif); font-weight: 300; }

/* --- Akapit ------------------------------------------------------------- */
.oferta-intro__p {
  margin-top: clamp(1.75rem, 3.4vw, 3rem);
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.86rem + 0.36vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

/* --- Spis uslug --------------------------------------------------------- */
.oferta-intro__index {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--hairline);
}

.oferta-intro__index-h {
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  color: var(--purple);
  letter-spacing: 0.24em;
}

/* Siedem pozycji w dwoch kolumnach: 01-04 po lewej, 05-07 po prawej.
   grid-auto-flow: column trzyma kolejnosc czytania w pionie, a nie w poziomie. */
.oferta-intro__nav { display: grid; }

@media (min-width: 768px) {
  .oferta-intro__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 0;
  }

  /* Kolumny stykaja sie krawedziami (column-gap: 0), zeby druga zaczynala sie
     dokladnie na szynie. Przerwe robi MARGINES pierwszej czworki, nie padding:
     hairline siedzi na krawedzi boxa, wiec przy paddingu obie kolumny sklejaly
     sie w jedna ciagla kreske przez cala szerokosc i spis czytal sie jak jedna
     lista z dziwnie odsunietymi arrowami. Margines urywa kreske przed szyna. */
  .oferta-intro__nav > li:nth-child(-n+4) a { margin-inline-end: var(--oferta-pad); }
}

.oferta-intro__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(0.7rem, 1.3vw, 0.95rem);
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur) var(--ease);
}

/* Stala szerokosc i cyfry tabelaryczne: w Zodiaku "01" i "07" maja rozna
   szerokosc, wiec bez tego tytuly uslug rozjezdzaly sie o kilka pikseli. */
.oferta-intro__n {
  flex: none;
  width: 1.75rem;
  font: 300 0.8rem/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.oferta-intro__nt {
  flex: 1;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.075rem);
  line-height: 1.35;
}

.oferta-intro__nav svg {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  align-self: center;
  color: var(--muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (hover: hover) {
  .oferta-intro__nav a:hover { color: var(--purple); }
  .oferta-intro__nav a:hover .oferta-intro__n,
  .oferta-intro__nav a:hover svg { color: var(--purple); }
  .oferta-intro__nav a:hover svg { transform: translateY(3px); }
}

.oferta-intro__nav a:focus-visible { outline-offset: -2px; }

/* --- Siatka desktopowa -------------------------------------------------- */
@media (min-width: 1024px) {
  .oferta-intro__in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    align-items: end;
  }

  .oferta-intro__tag--a {
    display: block;
    grid-column: 1 / 7;
    grid-row: 1;
    padding-inline-end: var(--oferta-pad);
  }

  .oferta-intro__tag--b {
    grid-column: 7 / -1;
    grid-row: 1;
  }

  .oferta-intro__h    { grid-column: 1 / -1; grid-row: 2; }
  .oferta-intro__p    { grid-column: 7 / -1; grid-row: 3; padding-inline-end: var(--oferta-pad); }
  .oferta-intro__index { grid-column: 1 / -1; grid-row: 4; }
}