/*
 * Hlavička detailu služby.
 *
 * Načítava sa len na detaile služby (resources/views/public/service.blade.php),
 * do layoutu nepatrí — na ostatných stránkach by to bol mŕtvy súbor navyše.
 *
 * Farby sú tie isté, aké má zvyšok webu — navy #2D2E79, zlatá #E4BE6E,
 * modrý text #506EB5. Cieľom nie je nová paleta, ale menej hluku okolo nej.
 */

.service-hero { padding: 40px 0; }

/*
 * Tri stĺpce: text, karta s rozsahom a fotka. Fotka siaha po horný, pravý
 * a dolný okraj panela; karta má záporný pravý okraj, takže prekrýva ľavý
 * okraj fotky a spája obe polovice do jednej hlavičky.
 *
 * Keď služba nemá body, stĺpec karty má nulovú šírku a text
 * sa dotkne fotky sám — netreba na to zvláštny variant.
 */
.service-hero__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 38%;
    grid-template-areas: "text card media";
    align-items: center;
    min-height: 380px;
    border-radius: 32px;
    background: linear-gradient(105deg, #F8F9FC 0%, #F3F4FA 55%, #ECEEF8 100%);
    box-shadow: 0 12px 40px rgba(45, 46, 121, .06);
    overflow: hidden;
}

/* Bez fotky: text a karta, karta s bežným okrajom namiesto presahu. */
.service-hero__panel--plain {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text card";
}

.service-hero__text {
    grid-area: text;
    min-width: 0;
    padding: 64px 48px 64px 72px;
}

.service-hero__eyebrow {
    margin: 0 0 14px;
    font-family: 'Inter';
    font-weight: 800;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #E4BE6E;
}
.service-hero__title {
    margin: 0;
    font-size: 52px;
    line-height: 60px;
    font-weight: bold;
    color: #2D2E79;
}
.service-hero__lead {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: #506EB5;
    max-width: 560px;
}

/* Karta s bodmi — čo služba obsahuje, každý bod so zlatou fajkou v kruhu.
   Spodná hranica šírky drží kartu ako kartu aj pri troch krátkych slovách. */
.service-hero__card {
    grid-area: card;
    position: relative;
    z-index: 2;
    min-width: 260px;
    max-width: 340px;
    margin: 32px -56px 32px 0;
    padding: 28px 32px;
    list-style: none;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(45, 46, 121, .12);
}
.service-hero__panel--plain .service-hero__card { margin-right: 72px; }

.service-hero__card li {
    display: flex;
    align-items: center;
    gap: 14px;
}
.service-hero__card li + li { margin-top: 16px; }

/* Fajka ako dáta v CSS, nie <img>: je to ozdoba, nie obsah, a CSP pre
   obrázky `data:` povoľuje. Biela na zlatom kruhu — zlatá `chack.svg` by
   na ňom nebola vidieť. */
.service-hero__check {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E4BE6E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M2 7.5L7.68 13L20 2' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.service-hero__point {
    color: #2D2E79;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/* Fotka po okraj panela. Ľavý okraj je veľký eliptický oblúk — vodorovný
   polomer v bodoch, zvislý v percentách, aby sa oblúk pri vyššom paneli
   natiahol a nezlomil do rovnej čiary. */
.service-hero__media {
    grid-area: media;
    align-self: stretch;
    position: relative;
    margin: 0;
    min-height: 380px;
    overflow: hidden;
    border-top-left-radius: 160px 50%;
    border-bottom-left-radius: 160px 50%;
}
.service-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Užší desktop START */
/* Na tri stĺpce už nie je miesto — karta by stlačila nadpis na dve slová
   na riadok. Karta ide pod text, fotka ostáva vpravo cez celú výšku. */
@media (max-width: 1199px) {
    .service-hero__panel {
        grid-template-columns: minmax(0, 1fr) 36%;
        grid-template-areas: "text media" "card media";
        align-items: start;
    }
    .service-hero__panel--plain {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "text" "card";
    }

    .service-hero__text { padding: 56px 40px 24px 56px; }
    .service-hero__title { font-size: 42px; line-height: 50px; }

    .service-hero__card,
    .service-hero__panel--plain .service-hero__card {
        justify-self: start;
        margin: 0 40px 56px 56px;
    }
}
/* Užší desktop END */

/* Mobil START */
/* Fotka hore ako pás, bez oblúka — na úzkom displeji by z nej oblúk zjedol
   polovicu. Horné rohy jej zaobľuje panel (`overflow: hidden`). */
@media (max-width: 991px) {
    .service-hero { padding: 24px 0; }

    .service-hero__panel,
    .service-hero__panel--plain {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "text" "card";
        min-height: 0;
        border-radius: 24px;
    }
    .service-hero__panel--plain { grid-template-areas: "text" "card"; }

    .service-hero__media {
        min-height: 0;
        height: 220px;
        border-radius: 0;
    }

    .service-hero__text { padding: 32px 24px 24px; }
    .service-hero__title { font-size: 32px; line-height: 40px; }
    .service-hero__lead { font-size: 16px; line-height: 26px; }

    .service-hero__card,
    .service-hero__panel--plain .service-hero__card {
        justify-self: stretch;
        min-width: 0;
        max-width: none;
        margin: 0 24px 28px;
        padding: 22px 24px;
    }
}
/* Mobil END */