/* =====================================================================
   STRONA GŁÓWNA — §5 KSIĘŻYC (T-185, makieta właścicielki)
   Arkusz sekcji. Wspólne tokeny, siatka, niebo, nagłówki i przyciski:
   strona-glowna.css.

   Ciąg nocy po ofercie: pasmo przezroczyste, pod nim wspólne niebo.
   Dwie karty (nów | pełnia) w złotej ramce z drugą linią wewnątrz
   i narożnikami z gwiazdką (gest .sg-orn); w karcie ilustracja fazy
   (inline SVG): nów — ciemna tarcza z przyrastającym sierpem, pełnia —
   świecąca tarcza z morzami i rozchodzącymi się kręgami. Ruch tylko
   w ilustracjach i bardzo wolny; przy prefers-reduced-motion stoją.
   Kontrast tekstu mierzony na zrzutach (logs/T-185-przebudowa/ksiezyc/).
   ===================================================================== */

.sg-ksiezyc {
    /* narożniki ramki: złoty kąt na ramce, wzmocniony kąt na wewnętrznej linii (10,5 px),
       gwiazdka między nimi — cztery położenia */
    --sg-ksiezyc-rog-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 27.5V.5h27'/%3E%3Cpath d='M10.5 22V10.5H22'/%3E%3C/g%3E%3Cpath d='M5.5 2.6l.75 2.15 2.15.75-2.15.75-.75 2.15-.75-2.15-2.15-.75 2.15-.75z' fill='%23e8c978'/%3E%3C/svg%3E");
    --sg-ksiezyc-rog-pg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(-1 0 0 1 28 0)'%3E%3Cg fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 27.5V.5h27'/%3E%3Cpath d='M10.5 22V10.5H22'/%3E%3C/g%3E%3Cpath d='M5.5 2.6l.75 2.15 2.15.75-2.15.75-.75 2.15-.75-2.15-2.15-.75 2.15-.75z' fill='%23e8c978'/%3E%3C/g%3E%3C/svg%3E");
    --sg-ksiezyc-rog-ld: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(1 0 0 -1 0 28)'%3E%3Cg fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 27.5V.5h27'/%3E%3Cpath d='M10.5 22V10.5H22'/%3E%3C/g%3E%3Cpath d='M5.5 2.6l.75 2.15 2.15.75-2.15.75-.75 2.15-.75-2.15-2.15-.75 2.15-.75z' fill='%23e8c978'/%3E%3C/g%3E%3C/svg%3E");
    --sg-ksiezyc-rog-pd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(-1 0 0 -1 28 28)'%3E%3Cg fill='none' stroke='%23c9a84c'%3E%3Cpath d='M.5 27.5V.5h27'/%3E%3Cpath d='M10.5 22V10.5H22'/%3E%3C/g%3E%3Cpath d='M5.5 2.6l.75 2.15 2.15.75-2.15.75-.75 2.15-.75-2.15-2.15-.75 2.15-.75z' fill='%23e8c978'/%3E%3C/g%3E%3C/svg%3E");
    /* szerokość ilustracji fazy */
    --sg-ksiezyc-ilu: clamp(7rem, 5.5rem + 3.8vw, 10rem);
}

/* zdanie H2 ma 52 znaki: od 640 px dwie linie jak w makiecie, nie trzy */
@media (min-width: 40em) {
    .sg-ksiezyc .sg-h2 { max-width: 28ch; }
}

/* ---------- karty: telefon jedna pod drugą, od 860 px obok siebie ---------- */

.sg-ksiezyc .sg-ksiezyc__karty {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sg-odstep);
}
@media (min-width: 53.75em) {
    .sg-ksiezyc .sg-ksiezyc__karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* karta: złota ramka, druga linia wewnątrz (outline z ujemnym odstępem),
   narożniki na krawędzi ramki (tło od border-box), półprzezroczysta noc —
   niebo prześwituje, ale tekst stoi na ciemnym */
.sg-ksiezyc .sg-faza {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    /* bok maks. 36 px: przy 1440/2048 zachęta (15 px) mieści się w jednym wierszu */
    padding: clamp(2rem, 1.4rem + 2vw, 2.875rem) clamp(1.5rem, 0.85rem + 2.4vw, 2.25rem) clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);
    border: 1px solid var(--sg-zloto-linia);
    outline: 1px solid rgba(201, 168, 76, 0.16);
    outline-offset: -11px;
    background:
        var(--sg-ksiezyc-rog-lg) left top / 28px 28px no-repeat border-box,
        var(--sg-ksiezyc-rog-pg) right top / 28px 28px no-repeat border-box,
        var(--sg-ksiezyc-rog-ld) left bottom / 28px 28px no-repeat border-box,
        var(--sg-ksiezyc-rog-pd) right bottom / 28px 28px no-repeat border-box,
        linear-gradient(180deg, rgba(26, 26, 51, 0.8) 0%, rgba(14, 14, 32, 0.72) 100%) border-box;
}

/* ---------- ilustracja fazy ---------- */

.sg-ksiezyc .sg-faza__ilustracja {
    display: block;
    flex: none;
    width: var(--sg-ksiezyc-ilu);
    height: var(--sg-ksiezyc-ilu);
    /* kropkowana orbita (r 62 z 140) staje na linii tekstu */
    /* jeden odstęp w obu stanach — tytuły kart (H3 albo hasło) stoją na jednej linii także w stanie mieszanym */
    margin: 0 0 clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem) calc(var(--sg-ksiezyc-ilu) * -0.0536);
    overflow: visible;
    color: var(--sg-zloto);
}
.sg-ksiezyc .sg-faza__orbita {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.45;
    stroke-width: 0.7;
    stroke-dasharray: 1 4;
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-ksiezyc-orbita 180s linear infinite;
}
.sg-ksiezyc .sg-faza__obrys {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.6;
    stroke-width: 0.8;
}
/* nów: cień zsuwa się w lewo i odsłania przyrastający sierp (prawa strona — księżyc przybywa) */
.sg-ksiezyc .sg-faza__cien { animation: sg-ksiezyc-przyrost 16s ease-in-out -6s infinite alternate; }

/* pełnia: kręgi rozchodzą się od tarczy, dwa naprzemiennie */
.sg-ksiezyc .sg-faza__krag {
    fill: none;
    stroke: var(--sg-zloto-jasne);
    stroke-width: 0.8;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-ksiezyc-krag 10s ease-out infinite;
}
.sg-ksiezyc .sg-faza__krag + .sg-faza__krag { animation-delay: -5s; }
/* morza w trzech odcieniach (Ocean Burz jaśniejszy niż Deszczów i Jasności), krawędzie
   zmiękczone filtrem; krater Tycho z promieniami */
.sg-ksiezyc .sg-faza__morza { fill: #8f7f5c; }
.sg-ksiezyc .sg-faza__kratery { fill: none; stroke: #8f7f5c; stroke-opacity: 0.45; stroke-width: 0.7; }
.sg-ksiezyc .sg-faza__promienie { fill: none; stroke: #fffaf0; stroke-opacity: 0.3; stroke-width: 0.45; stroke-linecap: round; }

@keyframes sg-ksiezyc-orbita { to { transform: rotate(360deg); } }
@keyframes sg-ksiezyc-przyrost {
    from { transform: translateX(-6px); }
    to { transform: translateX(-30px); }
}
@keyframes sg-ksiezyc-krag {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.32); opacity: 0; }
}

/* ---------- tekst karty ---------- */

.sg-ksiezyc .sg-faza__nazwa {
    margin: 0 0 0.3rem;
    font-family: var(--sg-font-naglowek);
    font-size: var(--sg-fs-h3);
    font-weight: 500;
    line-height: 1.12;
    color: var(--sg-papier);
    text-wrap: balance;
}
.sg-ksiezyc .sg-faza__data {
    margin: 0 0 clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    font-family: var(--sg-font-naglowek);
    font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--sg-zloto);
}
/* hasło: bez dat jest nagłówkiem karty; z datami schodzi pod linię, o stopień niżej */
.sg-ksiezyc .sg-faza__haslo {
    margin: 0 0 1rem;
    font-family: var(--sg-font-naglowek);
    font-size: clamp(1.75rem, 1.4rem + 1.15vw, 2.3rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.15;
    color: var(--sg-papier);
    text-wrap: balance;
}
.sg-ksiezyc .sg-faza__data + .sg-faza__haslo {
    align-self: stretch;
    padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    font-size: clamp(1.45rem, 1.28rem + 0.6vw, 1.75rem);
}
/* stan bez dat (wydarzenie minęło, właścicielka nie wpisała następnego): hasło jest
   pełnoprawnym nagłówkiem karty — prosty Cormorant w rozmiarze H3, zamknięty tą samą
   złotą linią co blok nazwy i daty */
.sg-ksiezyc .sg-faza--bez-daty .sg-faza__haslo {
    align-self: stretch;
    margin-bottom: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
    padding-bottom: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
    border-bottom: 1px solid rgba(201, 168, 76, 0.3);
    font-size: var(--sg-fs-h3);
    font-style: normal;
    line-height: 1.12;
}
.sg-ksiezyc .sg-faza__opis {
    margin: 0 0 0.75rem;
    font-size: var(--sg-fs-tekst);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(245, 237, 224, 0.84);
    text-wrap: pretty;
}
/* zachęta i przycisk zawsze na dole karty — obie karty kończą się na jednej linii */
.sg-ksiezyc .sg-faza__zacheta {
    margin: auto 0 1.25rem;
    padding-top: 1.25rem;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--sg-zloto);
    text-wrap: pretty;
}

/* ---------- 640–859 px: karta pozioma ----------
   Jedna karta na całą szerokość byłaby rozciągniętym telefonem (pusta prawa
   połowa, wiersze po 80 znaków). Ilustracja staje w lewej kolumnie, tekst
   w prawej; kolejność DOM bez zmian. */

@media (min-width: 40em) and (max-width: 53.74em) {
    .sg-ksiezyc .sg-faza {
        display: grid;
        grid-template-columns: var(--sg-ksiezyc-ilu) minmax(0, 1fr);
        column-gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
        align-content: start;
        justify-items: start;
    }
    .sg-ksiezyc .sg-faza > * { grid-column: 2; }
    .sg-ksiezyc .sg-faza > .sg-faza__ilustracja {
        grid-column: 1;
        grid-row: 1 / span 7;
        margin: 0;
    }
    .sg-ksiezyc .sg-faza__data + .sg-faza__haslo,
    .sg-ksiezyc .sg-faza--bez-daty .sg-faza__haslo { justify-self: stretch; }
    .sg-ksiezyc .sg-faza__zacheta { margin-top: 0.5rem; }
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    .sg-ksiezyc .sg-faza__orbita { animation: none; }
    .sg-ksiezyc .sg-faza__cien { animation: none; transform: translateX(-20px); }
    .sg-ksiezyc .sg-faza__krag { animation: none; opacity: 0.32; transform: scale(1.04); }
    .sg-ksiezyc .sg-faza__krag + .sg-faza__krag { opacity: 0.16; transform: scale(1.22); }
}