/* Pogoda na zywo na stronie glownej Aria Spain — karta + subtelna nakladka na hero (.section-search .wp-block-cover).
   Wszystko pointer-events:none, nic nie zaslania menu ani tekstow hero (inner-container ma z-index:1 i jest pozniej w DOM).
   Wylaczenie: klasa aria-pogoda-off na <html>. Kolory strony: --blue #4292DA, --gold #D2C196, --navy #1e2d4a. */
html.aria-pogoda-off .aria-pogoda { display: none !important; }

.aria-pogoda { position: absolute; pointer-events: none; box-sizing: border-box; }
.aria-pogoda *, .aria-pogoda *::before, .aria-pogoda *::after { box-sizing: border-box; }

/* ---------- nakladka na cale hero (warstwy wlaczane klasami na .wp-block-cover) ---------- */
.aria-pogoda-tlo { inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.aria-pogoda-tlo::before, .aria-pogoda-tlo::after, .aria-pogoda-tlo > i {
  content: ""; position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.4s ease;
}
/* noc: lekki granat */
.aria-pogoda-tlo::before { background: linear-gradient(180deg, rgba(14, 24, 58, .64) 0%, rgba(14, 24, 58, .34) 55%, rgba(20, 30, 64, .46) 100%); }
.ap-noc .aria-pogoda-tlo::before { opacity: 1; }
/* pochmurno / deszcz: chlodna, szaro-niebieska mgielka */
.aria-pogoda-tlo::after { background: linear-gradient(180deg, rgba(70, 86, 110, .30) 0%, rgba(70, 86, 110, .12) 60%, rgba(70, 86, 110, .22) 100%); }
.ap-zachmurzenie .aria-pogoda-tlo::after, .ap-deszcz .aria-pogoda-tlo::after, .ap-burza .aria-pogoda-tlo::after, .ap-mgla .aria-pogoda-tlo::after { opacity: 1; }
.ap-noc.ap-deszcz .aria-pogoda-tlo::after, .ap-noc.ap-burza .aria-pogoda-tlo::after { opacity: .55; }

/* gwiazdy (tylko gorna czesc nieba) */
.ap-gwiazdy {
  bottom: auto !important; height: 58%;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  background-image:
    radial-gradient(circle at 6% 18%, #fff 0, #fff 1.3px, rgba(255,255,255,.35) 2.2px, transparent 4.5px), radial-gradient(circle at 14% 42%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px),
    radial-gradient(circle at 23% 12%, #fff 0, #fff 1.4px, rgba(255,255,255,.35) 2.5px, transparent 5.0px), radial-gradient(circle at 31% 33%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px),
    radial-gradient(circle at 39% 8%, #fff 0, #fff 1.2px, rgba(255,255,255,.35) 2.1px, transparent 4.2px),  radial-gradient(circle at 46% 27%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px),
    radial-gradient(circle at 54% 15%, #fff 0, #fff 1.4px, rgba(255,255,255,.35) 2.5px, transparent 5.0px), radial-gradient(circle at 61% 38%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px),
    radial-gradient(circle at 68% 6%, #fff 0, #fff 1.1px, rgba(255,255,255,.35) 2.0px, transparent 3.9px),  radial-gradient(circle at 74% 24%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px),
    radial-gradient(circle at 81% 45%, #fff 0, #fff 1.4px, rgba(255,255,255,.35) 2.4px, transparent 4.8px), radial-gradient(circle at 88% 10%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.8px, transparent 3.6px),
    radial-gradient(circle at 94% 30%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px), radial-gradient(circle at 50% 50%, #fff 0, #fff 1.2px, rgba(255,255,255,.35) 2.1px, transparent 4.2px),
    radial-gradient(circle at 10% 60%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px), radial-gradient(circle at 85% 62%, #fff 0, #fff 1.0px, rgba(255,255,255,.35) 1.7px, transparent 3.4px);
  animation: ap-migot 5s ease-in-out infinite alternate;
}
.ap-noc.ap-pogodnie .ap-gwiazdy, .ap-noc.ap-lekkie-chmury .ap-gwiazdy { opacity: .9; }
.ap-noc.ap-chmury .ap-gwiazdy { opacity: .45; }
@keyframes ap-migot { from { filter: brightness(.75); } to { filter: brightness(1.15); } }

/* ksiezyc / slonce: miekka poswiata w prawym gornym rogu */
.ap-ksiezyc { background: radial-gradient(circle at 86% 16%, rgba(236, 240, 255, .55) 0, rgba(236, 240, 255, .18) 5%, rgba(200, 212, 240, .08) 12%, transparent 22%); }
.ap-noc.ap-pogodnie .ap-ksiezyc, .ap-noc.ap-lekkie-chmury .ap-ksiezyc { opacity: 1; }
.ap-slonce {
  background:
    radial-gradient(ellipse 42% 48% at 90% 4%, rgba(255, 238, 190, .78) 0, rgba(255, 224, 160, .30) 45%, transparent 74%),
    radial-gradient(circle at 72% 34%, rgba(255, 255, 255, .14) 0, transparent 7%),
    radial-gradient(circle at 63% 46%, rgba(255, 245, 220, .10) 0, transparent 5%),
    linear-gradient(200deg, rgba(255, 236, 200, .30) 0%, transparent 46%);
  animation: ap-promien 8s ease-in-out infinite alternate;
}
.ap-dzien.ap-pogodnie .ap-slonce { opacity: 1; }
.ap-dzien.ap-lekkie-chmury .ap-slonce { opacity: .6; }
@keyframes ap-promien { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.04); filter: brightness(1.08); } }

/* chmury / mgla: dryfujaca mgielka */
.ap-mgielka {
  left: -20% !important; right: -20% !important;
  background:
    radial-gradient(ellipse 34% 26% at 22% 18%, rgba(255, 255, 255, .34) 0, transparent 70%),
    radial-gradient(ellipse 40% 22% at 68% 30%, rgba(255, 255, 255, .28) 0, transparent 70%),
    radial-gradient(ellipse 30% 20% at 88% 12%, rgba(255, 255, 255, .22) 0, transparent 70%),
    radial-gradient(ellipse 46% 24% at 42% 62%, rgba(255, 255, 255, .14) 0, transparent 70%);
  animation: ap-dryf 46s ease-in-out infinite alternate;
}
.ap-lekkie-chmury .ap-mgielka { opacity: .55; }
.ap-chmury .ap-mgielka, .ap-zachmurzenie .ap-mgielka { opacity: .85; }
.ap-mgla .ap-mgielka { opacity: 1; background-color: rgba(255, 255, 255, .22); }
.ap-noc .ap-mgielka { filter: brightness(.6); }
@keyframes ap-dryf { from { transform: translateX(-5%); } to { transform: translateX(5%); } }

/* deszcz: dwie warstwy cienkich smug, przesuwane transformem (lekkie dla GPU), lekko ukosne */
.ap-krople { overflow: hidden; }
.ap-krople::before {
  content: ""; position: absolute; left: -12%; width: 124%; top: -640px; height: calc(100% + 700px);
  background:
    repeating-linear-gradient(to bottom, transparent 0 36px, rgba(255, 255, 255, .34) 36px 52px) 0 0 / 2.5px 52px,
    repeating-linear-gradient(to bottom, transparent 0 58px, rgba(255, 255, 255, .22) 58px 78px) 15px 20px / 3px 78px;
  transform: rotate(7deg); animation: ap-pada 1.3s linear infinite;
}
.ap-deszcz .ap-krople, .ap-burza .ap-krople { opacity: 1; }
.ap-mzawka .ap-krople { opacity: .45; }
@keyframes ap-pada { from { transform: rotate(7deg) translateY(0); } to { transform: rotate(7deg) translateY(624px); } }

/* burza: rzadki blysk */
.ap-blysk { background: rgba(255, 255, 255, 1); }
.ap-burza .ap-blysk { animation: ap-blysk 9s linear infinite; }
@keyframes ap-blysk { 0%, 100% { opacity: 0; } 54% { opacity: 0; } 55% { opacity: .5; } 56% { opacity: 0; } 58% { opacity: .3; } 59.5% { opacity: 0; } }

/* ---------- odczyt (jak herowx.js w Costa Dune: tekst na niebie, bez kafla) ---------- */
.aria-pogoda-odczyt.ap-pod-forbes { top: 96px; }   /* gdy pasek Forbes (fixed) zaslania gore zdjecia — po jego zamknieciu wraca na 28 px */
.aria-pogoda-odczyt {
  left: 28px; top: 28px; right: auto; z-index: 2; width: 300px; height: 56px; transform: scale(1.25); transform-origin: top left;   /* operator 23.10: +25 % (test) */   /* operator 23.10: lewy gorny rog, od gory tyle samo co od lewej */
  font-family: Poppins, "Open Sans", "Segoe UI", sans-serif; color: #fff; line-height: 1.15; text-align: left;
  text-shadow: 0 1px 3px rgba(10, 20, 40, .7), 0 0 18px rgba(10, 20, 40, .45);
}
.ap-wpis { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; transition: opacity .5s ease; }
.ap-wpis.is-on { opacity: 1; transition-delay: .55s; }   /* stary znika, DOPIERO potem pojawia sie nowy (bez nakladania) */
.ap-ikona { flex: 0 0 auto; width: 40px; height: 40px; color: #fff; filter: drop-shadow(0 1px 2px rgba(10, 20, 40, .55)); }
.ap-ikona svg { width: 100%; height: 100%; display: block; --ap-sun: #F5D77A; }
.ap-temp { font-family: Merriweather, Georgia, serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff;
  text-shadow: 0 2px 16px rgba(10, 20, 40, .55), 0 1px 2px rgba(10, 20, 40, .45); }   /* operator 23.10: szara temperatura ginela na niebie → biel jak tytul, stopien zloty */
.ap-temp i { font-style: normal; font-size: .55em; vertical-align: top; position: relative; top: .08em; color: #D2C196; }
.ap-txt { display: flex; flex-direction: column; gap: 2px; }
.ap-txt b { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D2C196; }
.ap-txt small { font-size: 11px; color: rgba(255, 255, 255, .88); }

@media (max-width: 781px) {
  .aria-pogoda-odczyt { right: auto; left: 12px; top: 10px; width: 230px; height: 40px; }
  .ap-wpis { right: auto; left: 0; gap: 7px; }
  .ap-ikona { width: 28px; height: 28px; }
  .ap-temp { font-size: 28px; }
  .ap-txt b { font-size: 10px; }
  .ap-txt small { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .aria-pogoda-tlo > i, .aria-pogoda-tlo > i::before, .ap-wpis { animation: none !important; transition: none !important; }
}

/* EFEKTY WYLACZONE (operator 23.10 ~07:10: „normalne zdjecie, niech nie zmienia sie ze wzgledu na pogode; zostaje odczyt po lewej u gory") */
.aria-pogoda-tlo { display: none !important; }

/* motyw: .baner-page .wp-block-cover span { background-color: rgba(0,0,0,.15) !important } (tlo covera) lapal spany odczytu na podstronach z coverem (Kontakt, Korzysci…) */
.baner-page .wp-block-cover .aria-pogoda-odczyt span { background-color: transparent !important; }