/* ==========================================================================
   Podstrona Aktualnosci - "Reszta dzieje sie na profilu salonu".

   Dwie roboty naraz:
   1. niesie JEDYNE wezwanie na Facebooka na tej podstronie (wczesniej ten sam
      link stal w trzech sekcjach pod rzad),
   2. daje stronie jej jedyny duzy material wizualny - poza miniaturami kart
      na szynie nie bylo tu ani jednej fotografii.

   Kompozycja: pionowa etykieta przy hairline, pod nia szeroki kadr uciekajacy
   do prawej krawedzi ekranu, a pod kadrem stopka - mieszany naglowek po lewej,
   akcja po prawej, wszystko domkniete hairlinem.

   Fiolet ma tu dokladnie jedno wystapienie: pigulka CTA. To jest ta pojedyncza
   mocna akcja, wiec nic obok niej nie moze konkurowac kolorem.
   ========================================================================== */

/* Wspolna miara ucieczki w prawo, uzywana przez kadr i hairline stopki.
   Mobile: tylko padding .wrap. Desktop: dodatkowo polowa marginesu, ktory
   .wrap zostawia powyzej 1440px. */
.aktprofil { --aktprofil-bleed: var(--gutter); }

.aktprofil__in { row-gap: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 1024px) {
  /* Kreska prowadzi wzdluz calej sekcji (height:100% z .marked), a slowo ma
     stac u gory. W vertical-rl osia glowna flexa jest pion, wiec ustawiamy je
     przed obrotem na dole - rotate(180deg) wynosi je na gore. */
  .aktprofil .marked > .label {
    display: flex;
    justify-content: flex-end;
  }

  .aktprofil { --aktprofil-bleed: calc(var(--gutter) + max(0px, (100vw - var(--measure)) / 2)); }
}

/* --- Kadr ---------------------------------------------------------------- */
/* Lewa krawedz zostaje na siatce (rowno z naglowkiem sekcji), prawa wychodzi
   poza ekran. Kadr rosnie tylko w jedna strone, wiec zlamanie kolumny czyta
   sie jako decyzja, a nie jako blad wyrownania. */
.aktprofil__figure { margin-right: calc(-1 * var(--aktprofil-bleed)); }

/* Zrodlo ma 1584x672 (~21:9), wiec .media--band trafia w proporcje bez
   przycinania. Ponizej 768px .media--band spada do 4:3 - wtedy cover przycina
   boki, a nie glowy, dlatego okno zostaje wysrodkowane. */
.aktprofil__media img { object-position: 50% 42%; }

/* --- Stopka sekcji ------------------------------------------------------- */
/* Hairline startuje z tej samej krawedzi ekranu co kadr, wiec pod wypuszczonym
   zdjeciem nie zostaje schodek. Ujemny margines wypuszcza sama kreske, padding
   o te sama miare wciaga tresc z powrotem na siatke. */
.aktprofil__foot {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  margin-right: calc(-1 * var(--aktprofil-bleed));
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-right: var(--aktprofil-bleed);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 900px) {
  .aktprofil__foot {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.aktprofil__h {
  max-width: 15ch;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.aktprofil__h .line { display: block; }

/* --- Akcja --------------------------------------------------------------- */
.aktprofil__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.aktprofil__p {
  max-width: 40ch;
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.0125rem);
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.aktprofil__btn {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
}
.aktprofil__btn svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--dur) var(--ease);
}
.aktprofil__btn:hover svg { transform: translateX(3px); }

.aktprofil__handle {
  margin-top: clamp(0.9rem, 1.8vw, 1.2rem);
  letter-spacing: 0.14em;
}