/* ==========================================================================
   Anna Jaworowska — Strona główna: reguły specyficzne dla TEJ podstrony.
   Wymaga: tokens.css, components.css, layout.css (nagłówek/nawigacja/stopka
   przeniesione do layout.css — wspólne dla wszystkich podstron).
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.aj-hero {
  position: relative; overflow: hidden;
  /* wypełnij pierwszy ekran, żeby kolejna (jasna) sekcja nie wystawała u dołu */
  min-height: calc(100vh - 85px);
  min-height: calc(100svh - 85px);
  display: flex; flex-direction: column; justify-content: center;
}
.aj-hero__media {
  position: absolute; inset: 0; z-index: 0; background: var(--aj-bg-dark);
  background-image: url('../media/hero-fire-poster.jpg');
  background-size: cover; background-position: center 55%;
}
.aj-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
/* Przyciemnienie wideo — te same warstwy gradientów co wcześniej pod zdjęciem,
   teraz jako nakładka nad <video>. */
.aj-hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,14,13,.42) 0%, rgba(15,14,13,.6) 45%, var(--aj-bg-dark) 96%),
    linear-gradient(100deg, rgba(18,16,14,.62) 0%, rgba(26,23,18,.3) 55%, rgba(16,15,13,.55) 100%);
}
.aj-hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(192,160,98,.05) 0 2px, transparent 2px 64px);
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .aj-hero__video { display: none; } }
.aj-hero__note {
  position: absolute; left: var(--aj-s-3); bottom: var(--aj-s-3); z-index: 1; max-width: 320px;
  padding: var(--aj-s-1) var(--aj-s-2); background: rgba(15,14,13,.7); color: var(--aj-on-dark-muted);
  font: 400 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .04em;
}
.aj-hero__content { position: relative; z-index: 1; padding-block: var(--aj-s-7) var(--aj-s-6); }
.aj-hero__tags { display: flex; flex-wrap: wrap; gap: var(--aj-s-1) var(--aj-s-3); margin-bottom: var(--aj-s-3); }
.aj-hero__tags span { font: 500 var(--aj-fs-eyebrow)/1 var(--aj-font-body); letter-spacing: var(--aj-ls-eyebrow); text-transform: uppercase; color: var(--aj-gold); }
.aj-hero h1 { font-size: var(--aj-fs-display); line-height: var(--aj-lh-display); color: var(--aj-on-dark); max-width: 22ch; }
.aj-hero h1 em { color: var(--aj-gold); }
.aj-hero__lead { margin-top: var(--aj-s-3); max-width: 46ch; font-size: var(--aj-fs-body-lg); color: var(--aj-on-dark-body); }
.aj-hero__actions { margin-top: var(--aj-s-4); }

/* --- Bio dwukolumnowo ------------------------------------------------------ */
.aj-bio { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--aj-s-5); align-items: start; }
.aj-bio__figure { position: sticky; top: calc(var(--aj-s-4) + 64px); }
.aj-bio__caption { margin-top: var(--aj-s-2); padding-top: var(--aj-s-2); border-top: 1px solid var(--aj-line-gold); }
.aj-bio__caption b { display: block; font: 400 var(--aj-fs-h3)/1.2 var(--aj-font-display); color: var(--aj-ink); }
.aj-bio__caption span { font-size: var(--aj-fs-small); color: var(--aj-ink-muted); }

/* --- Siatki jawne (4 kolumny — bez sieroty) ------------------------------- */
.aj-grid--4 { display: grid; gap: var(--aj-s-3); grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.aj-grid--3 { display: grid; gap: var(--aj-s-3); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.aj-grid--steps { display: grid; gap: var(--aj-s-4); grid-template-columns: repeat(3, 1fr); }

/* Siatka wyróżnionych ofert (te same karty .aj-offer co na Oferta/Nieruchomości) */
.offers-grid { display: grid; gap: var(--aj-s-3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .offers-grid { grid-template-columns: 1fr; } }

/* Kafel artykułu — karta oszczędna, bez listy */
.aj-article { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.aj-article .aj-slot { transition: box-shadow var(--aj-dur) var(--aj-ease); }
.aj-article .aj-slot img { transition: transform .5s var(--aj-ease); }
.aj-article__meta { margin-top: var(--aj-s-2); font: 500 var(--aj-fs-eyebrow)/1.2 var(--aj-font-body); letter-spacing: var(--aj-ls-eyebrow); text-transform: uppercase; color: var(--aj-gold-ink); }
.aj-article__title { margin-top: var(--aj-s-1); font-size: var(--aj-fs-h3); color: var(--aj-ink); transition: color var(--aj-dur) var(--aj-ease); }
.aj-article:hover .aj-slot img { transform: scale(1.04); }
.aj-article:hover .aj-slot { box-shadow: var(--aj-shadow-hover); }
.aj-article:hover .aj-article__title { color: var(--aj-gold-ink); }
.aj-article:focus-visible .aj-article__title { color: var(--aj-gold-ink); }

/* --- Opinie Google (widget Trustindex) ----------------------------------- */
.aj-reviews {
  max-width: 980px;      /* mieści domyślne 3 karty widgetu (poniżej — auto-zwężanie) */
  margin: var(--aj-s-4) auto 0;
}
/* Widget renderuje własny motyw jasny — na ciemnym pasie sekcji dajemy mu
   oddech i wyrównujemy do środka. Nie nadpisujemy wnętrza widgetu. */
.aj-reviews .ti-widget { margin: 0 auto !important; }
.aj-reviews .ti-widget * { box-sizing: border-box; }
.aj-reviews a { color: inherit; }
/* Nagłówek widgetu (logo Google + ocena) i „Zobacz wszystkie opinie" bywają
   jasnoszare — na ciemnym tle wymuszamy czytelny kolor. */
.aj-reviews .ti-header .ti-name,
.aj-reviews .ti-header .ti-rating-text,
.aj-reviews .ti-footer,
.aj-reviews .ti-footer a { color: var(--aj-on-dark-body) !important; }

/* --- Breakpointy 390 / 768 / 1280 ------------------------------------------ */
@media (max-width: 1279px) {
  .aj-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .aj-bio { grid-template-columns: 1fr; }
  .aj-bio__figure { position: static; max-width: 320px; }
}
@media (max-width: 767px) {
  .aj-hero__content { padding-block: var(--aj-s-6) var(--aj-s-5); }
  .aj-grid--4 { grid-template-columns: 1fr; }
  .aj-grid--3, .aj-grid--steps { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
  .aj-hero h1 { max-width: 100%; }
}