/* ---------------------------------------------------------------------------
   Podstrony kategorii ofert: /masaze-twarzy, /masaze-ciala, /kosmetologia,
   /warsztaty. Wszystkie cztery renderuje Components/Offers/OfferPageComponent.

   Podpięty globalnie w App.razor, a nie w <HeadContent> tych stron - przy
   enhanced navigation Blazora <link> wstawiony dynamicznie nie blokuje
   renderowania, więc przy przejściu z menu migała strona bez stylów. Wszystko
   zagnieżdżone pod .of, więc obecność arkusza na innych podstronach niczego
   nie zmienia.

   Paleta wspólna z home.css, about.css, contact.css, pricing.css i voucher.css.
   --------------------------------------------------------------------------- */

.of {
    --of-ink: #2c2c2c;
    --of-muted: #5f5750;
    --of-cream: #fbf8f5;
    --of-cream-dark: #f5efe8;
    --of-line: #e8dfd5;
    --of-brown: #5d4037;
    --of-brown-soft: #8d6e63;
    --of-gold: #b0894f;
    --of-gold-dark: #96712f;

    color: var(--of-ink);
    background: #fff;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.of * {
    box-sizing: border-box;
}

.of img {
    max-width: 100%;
}

.of h1,
.of h2,
.of p,
.of a {
    overflow-wrap: anywhere;
}

/* :where() zeruje specyficzność, żeby zwykła klasa potrafiła ten margines
   nadpisać - inaczej ".of p" wygrywa z samą klasą. */
.of :where(p) {
    margin: 0 0 1.1em;
}

.of :where(p):last-child {
    margin-bottom: 0;
}

/* MudPaper opakowujący @Body dokłada 2rem odstępu góra/dół. Zerujemy go, bo
   .of-section wnosi własny, większy oddech - inaczej odstępy się sumują. */
.mud-paper.responsive-main:has(> .of) {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- układ ---------------------------------------------------------------- */

.of-section {
    padding: 4rem 1.25rem;
}

.of-inner {
    max-width: 980px;
    margin: 0 auto;
}

.of-center {
    text-align: center;
}

/* --- typografia ----------------------------------------------------------- */

.of-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--of-gold-dark);
    margin: 0 0 0.9rem;
}

/* Tytuł podstrony. Wcześniej ten rozmiar niósł napis wpisany w zdjęcie hero;
   po jego usunięciu nagłówek stoi na jasnym tle, więc jest o stopień mniejszy
   (nie musi się przebijać przez fotografię) i w kolorze złota, jak reszta
   nagłówków sekcji na stronie. */
.of-h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 0.6rem;
    color: var(--of-gold-dark);
}

/* Nazwa usługi na kaflu. */
.of-h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    margin: 0 0 0.5rem;
    color: var(--of-ink);
}

.of-sub {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.05rem, 2.1vw, 1.25rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--of-brown-soft);
    margin: 0;
}

.of-rule {
    width: 68px;
    height: 2px;
    border: 0;
    background: var(--of-gold);
    margin: 1.5rem 0 0;
}

.of-rule--center {
    margin-left: auto;
    margin-right: auto;
}

/* --- lista usług ---------------------------------------------------------- */

.of-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* Kafel poziomy: zdjęcie po lewej, treść po prawej. Zdjęcie rozciąga się na
   wysokość kafla (stąd brak aspect-ratio), więc wysokość dyktuje tekst. */
.of-item {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--of-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.of-item:hover,
.of-item:focus-within {
    transform: translateY(-3px);
    border-color: var(--of-gold);
    box-shadow: 0 18px 38px rgba(93, 64, 55, .16);
}

.of-item-media {
    flex: 0 0 190px;
    overflow: hidden;
    background: var(--of-cream-dark);
}

.of-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.of-item:hover .of-item-media img {
    transform: scale(1.04);
}

.of-item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.6rem;
}

.of-item-body p {
    color: var(--of-muted);
    font-size: 0.9688rem;
    line-height: 1.65;
    margin: 0 0 1.15rem;
}

.of-item-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--of-gold-dark);
    text-decoration: none;
}

/* Klikalny cały kafel - jeden link w DOM-ie, pełny obszar dotyku na ekranie. */
.of-item-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
}

.of-item-link span {
    transition: transform .18s ease;
}

.of-item:hover .of-item-link span {
    transform: translateX(3px);
}

/* --- responsywność -------------------------------------------------------- */

@media (max-width: 780px) {
    .of-section {
        padding: 3rem 1.1rem;
    }

    .of-list {
        gap: 0.85rem;
        margin-top: 2rem;
    }

    /* Te same proporcje co kafle oferty na stronie głównej. */
    .of-item-media {
        flex: 0 0 108px;
    }

    .of-item-body {
        padding: 0.95rem 1.05rem;
    }

    .of-item-body .of-h2 {
        font-size: 1.1rem;
        margin-bottom: 0.35rem;
    }

    /* Zajawka skrócona do trzech linii - pełny opis jest na stronie usługi,
       a tutaj liczy się, żeby dało się przejrzeć całą kategorię. */
    .of-item-body p {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.65rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .of-item-link {
        font-size: 0.875rem;
    }
}

@media (max-width: 400px) {
    .of-section {
        padding: 2.5rem 0.9rem;
    }

    .of-item-media {
        flex: 0 0 92px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .of-item,
    .of-item-media img,
    .of-item-link span {
        transition: none;
    }

    .of-item:hover,
    .of-item:focus-within {
        transform: none;
    }

    .of-item:hover .of-item-media img,
    .of-item:hover .of-item-link span {
        transform: none;
    }
}