/* ============================================================
   SÓVIDÉK PANZIÓ & VENDÉGHÁZ
   Joomla 6 + Helix Ultimate
   Modern székely / természetközeli design
   ============================================================ */


/* ============================================================
   1. MÁRKA SZÍNEK
   Erdő + só + fa + cserép + természet
   ============================================================ */

:root {

    /* Erdő */
    --sv-green: #29483b;
    --sv-green-dark: #1e362d;
    --sv-green-soft: #456555;

    /* Sóvidék / víz / ásvány */
    --sv-blue: #3f8290;
    --sv-blue-dark: #326c78;
    --sv-blue-light: #dcecef;

    /* Természetes világos tónusok */
    --sv-cream: #f7f3ea;
    --sv-cream-light: #fbf9f4;
    --sv-sand: #d8c4a5;
    --sv-sand-light: #eee4d5;

    /* Cserép / székely motívum / CTA */
    --sv-terracotta: #b85f43;
    --sv-terracotta-dark: #994a34;

    /* Szövegek */
    --sv-text: #26312d;
    --sv-text-soft: #53605a;
    --sv-muted: #718079;

    --sv-white: #ffffff;

    --sv-radius: 14px;
    --sv-radius-small: 8px;

    --sv-container: 1320px;
}


/* ============================================================
   2. HELIX FELSŐ SÁV TELJES ELREJTÉSE
   ============================================================ */

#sp-top-bar,
#sp-top1,
#sp-top2 {
    display: none !important;
}


/* ============================================================
   3. ALAP OLDAL ÉS TIPOGRÁFIA
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--sv-text);
    background: var(--sv-cream-light);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


p,
li,
input,
textarea,
select,
button {
    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;
}


h1,
h2,
h3,
h4,
h5,
h6,
.sv-section-title,
.sv-hero__badge strong {
    font-family:
        "Bitter",
        Georgia,
        "Times New Roman",
        serif;
}


/* Joomla fő tartalom */

#sp-main-body {
    padding: 0;
}


/* Joomla cikk-meta elrejtése */

.article-details .article-header,
.article-details .article-info {
    display: none;
}


/* ============================================================
   4. FEJLÉC
   ============================================================ */

#sp-header {
    position: relative;
    z-index: 1000;

    height: 82px;

    background: rgba(251, 249, 244, 0.98);

    border-bottom: 1px solid rgba(41, 72, 59, 0.10);

    box-shadow:
        0 4px 18px rgba(30, 54, 45, 0.055);
}


#sp-header .container,
#sp-header .container-inner {
    height: 100%;
}


/* ============================================================
   5. LOGÓ
   ============================================================ */

#sp-logo {
    display: flex;
    align-items: center;
}

#sp-logo .logo {
    display: flex;
    align-items: center;
}

#sp-logo img {
    max-height: 58px;
    width: auto;
}


#sp-logo .logo-image,
#sp-logo .logo-text {
    color: var(--sv-green-dark);
}


#sp-logo .logo-text {
    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size: 23px;
    font-weight: 700;
}


/* ============================================================
   6. FŐMENÜ
   ============================================================ */

#sp-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


#sp-menu .sp-megamenu-parent {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 82px;

    padding: 0 15px;

    color: var(--sv-green-dark);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15.5px;
    font-weight: 700;

    letter-spacing: 0.01em;

    text-transform: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


/* Hover */

#sp-menu .sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-parent > li:hover > a {
    color: var(--sv-terracotta);
}


/* Aktív */

#sp-menu .sp-megamenu-parent > li.active > a {
    color: var(--sv-green-dark);
}


#sp-menu .sp-megamenu-parent > li.active > a::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 14px;

    height: 3px;

    border-radius: 4px;

    background: var(--sv-terracotta);
}


/* ============================================================
   7. HERO
   ============================================================ */

.sv-hero {
    position: relative;

    overflow: hidden;

    padding:
        62px
        24px
        76px;

    background:
        radial-gradient(
            circle at 0% 10%,
            rgba(220, 236, 239, 0.55),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(216, 196, 165, 0.34),
            transparent 35%
        ),
        var(--sv-cream-light);
}


/* ============================================================
   Finom székelyes felső motívum
   ============================================================ */

.sv-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(
        1180px,
        calc(100% - 48px)
    );

    height: 5px;

    transform: translateX(-50%);

    background:
        repeating-linear-gradient(
            90deg,

            var(--sv-green) 0,
            var(--sv-green) 20px,

            transparent 20px,
            transparent 26px,

            var(--sv-blue) 26px,
            var(--sv-blue) 34px,

            transparent 34px,
            transparent 40px,

            var(--sv-terracotta) 40px,
            var(--sv-terracotta) 47px,

            transparent 47px,
            transparent 54px
        );

    opacity: 0.88;
}


/* Finom háttérforma */

.sv-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    bottom: -210px;

    border: 80px solid rgba(63, 130, 144, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


/* ============================================================
   HERO GRID
   KÉP ÚJRA SZÉLESEBB
   ============================================================ */

.sv-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--sv-container);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: clamp(
        40px,
        4.5vw,
        64px
    );

    align-items: center;
}


/* ============================================================
   HERO BAL OLDAL
   ============================================================ */

.sv-hero__content {
    max-width: 620px;
}


/* ============================================================
   EYEBROW / MÁRKABÉLYEG
   ============================================================ */

.sv-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    padding:
        8px
        14px
        8px
        12px;

    color: var(--sv-green-dark);

    background:
        linear-gradient(
            90deg,
            rgba(220, 236, 239, 0.95),
            rgba(220, 236, 239, 0.45)
        );

    border-left:
        4px solid
        var(--sv-terracotta);

    border-radius:
        0
        6px
        6px
        0;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13.5px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}


.sv-hero__eyebrow span {
    margin:
        0
        7px;

    color: var(--sv-blue);
}


/* ============================================================
   HERO H1 = MÁRKANÉV
   TÖMÖREBB, EGY SOR DESKTOPON
   ============================================================ */

.sv-hero h1 {
    max-width: 100%;

    margin:
        0
        0
        20px;

    color: #244238;

    font-family:
        "Bitter",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            2.35vw,
            39px
        );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.025em;

    white-space: nowrap;
}


/* Ampersand */

.sv-amp {
    font-size: 0.88em;
    opacity: 0.92;
}


/* ============================================================
   HERO H2 = POZICIONÁLÓ ALCÍM
   ============================================================ */

.sv-hero h2 {
    max-width: 100%;

    margin:
        0
        0
        20px;

    color: #35433e;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        clamp(
            23px,
            1.75vw,
            29px
        );

    font-weight: 700;

    line-height: 1.22;

    letter-spacing: -0.01em;

    white-space: nowrap;
}


/* ============================================================
   HERO BEVEZETŐ
   ============================================================ */

.sv-hero__lead {
    max-width: 590px;

    margin:
        0
        0
        29px;

    color: #45534d;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.78;
}


/* ============================================================
   HERO GOMBOK
   ============================================================ */

.sv-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 27px;
}


.sv-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 51px;

    padding:
        13px
        24px;

    border:
        2px solid
        transparent;

    border-radius:
        var(--sv-radius-small);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15.5px;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Elsődleges CTA */

.sv-btn--primary {
    color:
        var(--sv-white) !important;

    background:
        var(--sv-terracotta);

    box-shadow:
        0
        6px
        18px
        rgba(184, 95, 67, 0.18);
}


.sv-btn--primary:hover,
.sv-btn--primary:focus {
    color:
        var(--sv-white) !important;

    background:
        var(--sv-terracotta-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0
        8px
        22px
        rgba(184, 95, 67, 0.23);
}


/* Másodlagos CTA */

.sv-btn--secondary {
    color:
        var(--sv-green-dark) !important;

    border-color:
        rgba(41, 72, 59, 0.38);

    background:
        rgba(255, 255, 255, 0.44);
}


.sv-btn--secondary:hover,
.sv-btn--secondary:focus {
    color:
        var(--sv-white) !important;

    border-color:
        var(--sv-green);

    background:
        var(--sv-green);
}


/* ============================================================
   HELYSZÍNEK / TÁVOLSÁGOK
   ============================================================ */

.sv-hero__location {
    display: flex;

    flex-wrap: wrap;

    gap:
        6px
        9px;

    color:
        var(--sv-muted);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.5;
}


.sv-hero__location strong {
    color:
        var(--sv-green-dark);

    font-weight:
        700;
}


.sv-hero__location span {
    color:
        var(--sv-blue);
}


/* ============================================================
   HERO KÉP
   ============================================================ */

.sv-hero__visual {
    position: relative;

    min-height: 520px;
}


/* Színes háttérkeret */

.sv-hero__visual::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 27px;
    right: -20px;
    bottom: -20px;
    left: 30px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            var(--sv-sand-light),
            var(--sv-blue-light)
        );
}


/* Kép */

.sv-hero__visual img {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: 520px;

    object-fit: cover;

    object-position:
        center center;

    border-radius:
        18px;

    box-shadow:
        0
        18px
        42px
        rgba(30, 54, 45, 0.11);
}


/* ============================================================
   HERO KIS BADGE
   ============================================================ */

.sv-hero__badge {
    position: absolute;

    z-index: 2;

    left: -25px;
    bottom: 30px;

    min-width: 175px;

    padding:
        14px
        19px;

    border:
        1px solid
        rgba(41, 72, 59, 0.12);

    border-radius:
        9px;

    background:
        rgba(251, 249, 244, 0.96);

    box-shadow:
        0
        12px
        30px
        rgba(30, 54, 45, 0.13);
}


.sv-hero__badge strong,
.sv-hero__badge span {
    display: block;
}


.sv-hero__badge strong {
    margin-bottom: 2px;

    color:
        var(--sv-green-dark);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size:
        18px;

    font-weight:
        700;
}


.sv-hero__badge span {
    color:
        var(--sv-blue-dark);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;
}


/* ============================================================
   8. ÁLTALÁNOS SZEKCIÓK
   ============================================================ */

.sv-section {
    padding:
        76px
        24px;
}


.sv-section--cream {
    background:
        var(--sv-cream);
}


.sv-section--white {
    background:
        var(--sv-white);
}


.sv-section--blue {
    background:
        var(--sv-blue-light);
}


.sv-container {
    width:
        100%;

    max-width:
        var(--sv-container);

    margin:
        0 auto;
}


/* ============================================================
   SZEKCIÓ CÍM
   ============================================================ */

.sv-section-title {
    margin:
        0
        0
        16px;

    color:
        var(--sv-green-dark);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            2.5vw,
            38px
        );

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.015em;
}


/* Székelyes / regionális címdísz */

.sv-section-title::after {
    content: "";

    display: block;

    width:
        74px;

    height:
        4px;

    margin-top:
        14px;

    background:
        linear-gradient(
            90deg,
            var(--sv-terracotta) 0 24px,
            transparent 24px 29px,
            var(--sv-blue) 29px 49px,
            transparent 49px 54px,
            var(--sv-green) 54px 74px
        );
}


/* ============================================================
   9. KISEBB DESKTOP
   ============================================================ */

@media (max-width: 1180px) {

    .sv-hero h1 {
        font-size: 35px;
    }

    .sv-hero h2 {
        font-size: 25px;
    }
}


@media (max-width: 1100px) {

    #sp-menu .sp-megamenu-parent > li > a,
    #sp-menu .sp-megamenu-parent > li > span {
        padding:
            0
            10px;

        font-size:
            14px;
    }


    /* Ettől a ponttól a hosszú címek törhetnek */

    .sv-hero h1,
    .sv-hero h2 {
        white-space: normal;
    }
}


/* ============================================================
   10. TABLET
   ============================================================ */

@media (max-width: 991px) {

    #sp-header {
        height:
            70px;
    }


    .sv-hero {
        padding:
            48px
            24px
            62px;
    }


    .sv-hero__inner {
        grid-template-columns:
            1fr;

        gap:
            36px;
    }


    .sv-hero__content {
        max-width:
            760px;
    }


    .sv-hero h1 {
        font-size:
            38px;
    }


    .sv-hero h2 {
        font-size:
            27px;
    }


    .sv-hero__visual {
        min-height:
            auto;
    }


    .sv-hero__visual img {
        height:
            min(
                62vw,
                520px
            );
    }


    .sv-hero__badge {
        left:
            24px;
    }
}


/* ============================================================
   11. MOBIL
   ============================================================ */

@media (max-width: 575px) {

    body {
        font-size:
            16px;
    }


    #sp-header {
        height:
            66px;
    }


    #sp-logo img {
        max-height:
            48px;
    }


    .sv-hero {
        padding:
            38px
            18px
            45px;
    }


    .sv-hero::before {
        width:
            calc(100% - 36px);
    }


    .sv-hero__inner {
        gap:
            28px;
    }


    .sv-hero__eyebrow {
        margin-bottom:
            15px;

        padding:
            6px
            9px;

        font-size:
            11px;

        letter-spacing:
            0.045em;
    }


    .sv-hero h1 {
        margin-bottom:
            16px;

        font-size:
            31px;

        line-height:
            1.1;

        white-space:
            normal;
    }


    .sv-hero h2 {
        margin-bottom:
            18px;

        font-size:
            22px;

        line-height:
            1.24;

        white-space:
            normal;
    }


    .sv-hero__lead {
        margin-bottom:
            24px;

        font-size:
            16px;

        line-height:
            1.72;
    }


    .sv-hero__actions {
        flex-direction:
            column;

        gap:
            10px;
    }


    .sv-btn {
        width:
            100%;

        min-height:
            52px;
    }


    .sv-hero__location {
        gap:
            4px
            6px;

        font-size:
            12.5px;
    }


    .sv-hero__visual img {
        height:
            66vw;

        min-height:
            280px;

        max-height:
            390px;

        border-radius:
            13px;
    }


    .sv-hero__visual::before {
        top:
            14px;

        right:
            -8px;

        bottom:
            -10px;

        left:
            14px;

        border-radius:
            14px;
    }


    .sv-hero__badge {
        left:
            12px;

        bottom:
            12px;

        min-width:
            145px;

        padding:
            11px
            14px;
    }


    .sv-hero__badge strong {
        font-size:
            17px;
    }


    .sv-hero__badge span {
        font-size:
            11.5px;
    }


    .sv-section {
        padding:
            52px
            18px;
    }
}

/* ============================================================
   GYORS ELŐNYSOR / TRUST STRIP
   ============================================================ */

.sv-highlights {
    position: relative;
    padding: 30px 24px;

    color: var(--sv-white);

    background:
        linear-gradient(
            105deg,
            var(--sv-green-dark) 0%,
            var(--sv-green) 68%,
            #315c50 100%
        );

    border-top: 4px solid var(--sv-blue);
}


/* finom sókék / terrakotta márkajel */

.sv-highlights::before {
    content: "";

    position: absolute;

    top: -4px;
    left: 50%;

    width: 180px;
    height: 4px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            var(--sv-blue) 0 38%,
            var(--sv-sand) 38% 62%,
            var(--sv-terracotta) 62% 100%
        );
}


.sv-highlights__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;
}


.sv-highlight {
    display: flex;

    align-items: center;

    min-height: 92px;

    padding:
        8px
        28px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.14);
}


.sv-highlight:first-child {
    padding-left: 0;
}


.sv-highlight:last-child {
    padding-right: 0;

    border-right: 0;
}


/* nagy szám / jel */

.sv-highlight__number,
.sv-highlight__mark {
    flex: 0 0 auto;

    margin-right: 17px;

    color: var(--sv-sand-light);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size: 29px;

    font-weight: 700;

    line-height: 1;
}


.sv-highlight__mark {
    color: #8fc4ce;
}


/* szöveg */

.sv-highlight__content {
    min-width: 0;
}


.sv-highlight__content strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.22;

    letter-spacing: -0.01em;
}


.sv-highlight__content span {
    display: block;

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.4;
}


/* Tablet */

@media (max-width: 991px) {

    .sv-highlights__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sv-highlight {
        padding:
            20px
            24px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.12);
    }


    .sv-highlight:nth-child(2) {
        border-right:
            0;
    }


    .sv-highlight:nth-child(3),
    .sv-highlight:nth-child(4) {
        border-bottom:
            0;
    }


    .sv-highlight:nth-child(3) {
        padding-left:
            0;
    }
}


/* Mobil */

@media (max-width: 575px) {

    .sv-highlights {
        padding:
            18px
            18px;
    }


    .sv-highlights__grid {
        grid-template-columns:
            1fr;
    }


    .sv-highlight,
    .sv-highlight:first-child,
    .sv-highlight:last-child,
    .sv-highlight:nth-child(3) {
        min-height:
            auto;

        padding:
            17px
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.13);
    }


    .sv-highlight:last-child {
        border-bottom:
            0;
    }


.sv-highlight__number,
.sv-highlight__mark {
    flex: 0 0 auto;

    margin-right: 18px;

    color: var(--sv-sand-light);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size: 32px;

    font-weight: 800;

    line-height: 1;
}


    .sv-highlight__content strong {
        font-size:
            15px;
    }


.sv-highlight__content span {
    display: block;

    color: rgba(255, 255, 255, 0.78);

    font-size: 13.5px;

    line-height: 1.42;
}

@media (max-width: 575px) {

    .sv-highlight__content strong {
        font-size: 16.5px;
    }

    .sv-highlight__content span {
        font-size: 13px;
    }

    .sv-highlight__number,
    .sv-highlight__mark {
        font-size: 28px;
    }
}

}

/* ============================================================
   SZOBÁK ÉS ÁRAK
   ============================================================ */

.sv-rooms {
    background:
        linear-gradient(
            180deg,
            #fbf9f4 0%,
            #f7f3ea 100%
        );
}


/* Bevezető */

.sv-section-intro {
    max-width: 770px;
    margin-bottom: 38px;
}


.sv-section-kicker {
    margin-bottom: 9px;

    color: var(--sv-terracotta);

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.sv-section-intro p {
    max-width: 720px;

    margin:
        20px
        0
        0;

    color: var(--sv-text-soft);

    font-size: 17px;
    line-height: 1.75;
}


/* ============================================================
   KÁRTYÁK
   ============================================================ */

.sv-room-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;
}


.sv-room-card {
    overflow: hidden;

    background: var(--sv-white);

    border:
        1px solid
        rgba(41, 72, 59, 0.10);

    border-radius: 16px;

    box-shadow:
        0
        12px
        34px
        rgba(30, 54, 45, 0.075);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.sv-room-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0
        17px
        42px
        rgba(30, 54, 45, 0.11);
}


/* ============================================================
   KÉP
   ============================================================ */

.sv-room-card__image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background:
        var(--sv-sand-light);
}


.sv-room-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}


.sv-room-card:hover
.sv-room-card__image img {
    transform:
        scale(1.025);
}


/* férőhely címke */

.sv-room-card__label {
    position: absolute;

    top: 18px;
    left: 18px;

    padding:
        7px
        12px;

    color:
        var(--sv-green-dark);

    background:
        rgba(251, 249, 244, 0.94);

    border-radius:
        6px;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    box-shadow:
        0
        5px
        16px
        rgba(30, 54, 45, 0.11);
}


/* ============================================================
   KÁRTYA TARTALOM
   ============================================================ */

.sv-room-card__body {
    padding:
        27px
        29px
        30px;
}


.sv-room-card__header {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        21px;
}


/* Szobanév */

.sv-room-card h3 {
    margin:
        0
        0
        3px;

    color:
        var(--sv-green-dark);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.015em;
}


.sv-room-card__subtitle {
    margin: 0;

    color:
        var(--sv-muted);

    font-size:
        14px;

    line-height:
        1.45;
}


/* ============================================================
   ÁR
   ============================================================ */

.sv-room-price {
    flex:
        0
        0
        auto;

    text-align:
        right;
}


.sv-room-price strong {
    display:
        block;

    color:
        var(--sv-terracotta);

    font-family:
        "Bitter",
        Georgia,
        serif;

    font-size:
        23px;

    font-weight:
        700;

    line-height:
        1.1;
}


.sv-room-price span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--sv-muted);

    font-size:
        12px;

    line-height:
        1.3;
}


/* ============================================================
   FELSZERELTSÉG CHIP-EK
   ============================================================ */

.sv-room-features {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        19px;
}


.sv-room-features span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        5px
        10px;

    color:
        var(--sv-green-dark);

    background:
        rgba(220, 236, 239, 0.62);

    border-radius:
        999px;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        12.5px;

    font-weight:
        650;

    line-height:
        1.25;
}


/* ============================================================
   LEÍRÁS
   ============================================================ */

.sv-room-card__text {
    margin:
        0
        0
        18px;

    color:
        var(--sv-text-soft);

    font-size:
        15px;

    line-height:
        1.65;
}


/* ============================================================
   SZÖVEGES LINK
   ============================================================ */

.sv-room-link {
    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--sv-green-dark) !important;

    font-family:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        14.5px;

    font-weight:
        750;

    text-decoration:
        none !important;

    border-bottom:
        1px solid
        rgba(41, 72, 59, 0.28);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.sv-room-link:hover {
    color:
        var(--sv-terracotta) !important;

    border-color:
        var(--sv-terracotta);
}


/* ============================================================
   ALSÓ CTA
   ============================================================ */

.sv-rooms-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        32px;

    padding:
        22px
        25px;

    background:
        rgba(220, 236, 239, 0.46);

    border-left:
        4px solid
        var(--sv-blue);

    border-radius:
        0
        10px
        10px
        0;
}


.sv-rooms-bottom__text {
    max-width:
        760px;

    color:
        var(--sv-text-soft);

    font-size:
        15px;

    line-height:
        1.55;
}


.sv-rooms-bottom__text strong {
    color:
        var(--sv-green-dark);

    font-weight:
        800;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

    .sv-room-grid {
        grid-template-columns:
            1fr;
    }


    .sv-room-card__image {
        aspect-ratio:
            16 / 8;
    }


    .sv-rooms-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 575px) {

    .sv-section-intro {
        margin-bottom:
            27px;
    }


    .sv-section-intro p {
        font-size:
            16px;

        line-height:
            1.7;
    }


    .sv-room-grid {
        gap:
            22px;
    }


    .sv-room-card {
        border-radius:
            12px;
    }


    .sv-room-card__image {
        aspect-ratio:
            4 / 3;
    }


    .sv-room-card__body {
        padding:
            22px
            20px
            24px;
    }


    .sv-room-card__header {
        flex-direction:
            column;

        gap:
            12px;
    }


    .sv-room-card h3 {
        font-size:
            23px;
    }


    .sv-room-price {
        text-align:
            left;
    }


    .sv-room-price strong {
        font-size:
            21px;
    }


    .sv-rooms-bottom {
        margin-top:
            24px;

        padding:
            20px;
    }


    .sv-rooms-bottom .sv-btn {
        width:
            100%;
    }
}