
/* ==========================================================
   TELPU IZMANTOŠANA
   SVGM vizuālā sistēma
   ========================================================== */

.svgm-rooms-page {
    width: 100%;

    margin: 0;

    padding:
        48px 24px 72px;

    background:
        #f7f1e9;

    box-sizing: border-box;

    color:
        #587689;
}


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

.svgm-rooms-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(280px, .7fr);

    gap: 54px;

    max-width: 1265px;

    margin:
        0 auto 42px;

    padding:
        18px 8px 24px;

    box-sizing: border-box;
}


.svgm-rooms-kicker {
    margin:
        0 0 12px;

    color:
        #bd7771;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.svgm-rooms-hero h1 {
    margin:
        0 0 28px;

    color:
        #8f2734;

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

    font-size:
        clamp(38px, 4vw, 54px);

    font-weight:
        700;

    line-height:
        1.05;

    letter-spacing:
        -.025em;
}


.svgm-rooms-lead {
    max-width:
        800px;

    margin:
        0 0 30px;

    color:
        #587689;

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

    font-size:
        21px;

    line-height:
        1.5;
}


/* HERO FEATURES */

.svgm-rooms-features {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        24px 34px;
}


.svgm-rooms-feature {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        200px;
}


.svgm-rooms-feature-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 52px;

    width:
        52px;

    height:
        52px;

    border-radius:
        50%;

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

    font-size:
        22px;
}


.svgm-rooms-feature-icon.blue {
    background:
        #e7f0f4;

    color:
        #4f7891;
}


.svgm-rooms-feature-icon.rose {
    background:
        #f8e6e7;

    color:
        #a64a54;
}


.svgm-rooms-feature-icon.green {
    background:
        #edf2e5;

    color:
        #718452;
}


.svgm-rooms-feature strong {
    display:
        block;

    margin:
        0 0 3px;

    color:
        #496879;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    font-weight:
        700;
}


.svgm-rooms-feature span:not(.svgm-rooms-feature-icon) {
    display:
        block;

    color:
        #587689;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.4;
}


/* HERO RIGHT */

.svgm-rooms-hero-art {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}





.svgm-rooms-values {
    margin:
        25px 0 0;

    color:
        #c37d78;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .22em;
}


/* ==========================================================
   BALTAIS SATURA BLOKS
   ========================================================== */

.svgm-rooms-card {
    max-width:
        1265px;

    margin:
        0 auto;

    padding:
        34px 38px 46px;

    background:
        #ffffff;

    border:
        1px solid
        rgba(120,80,75,.06);

    border-radius:
        26px;

    box-shadow:
        0 14px 34px
        rgba(67,47,43,.055);

    box-sizing:
        border-box;
}


/* BLOKA HEADER */

.svgm-rooms-card-head {
    display:
        flex;

    align-items:
        center;

    gap:
        19px;

    margin:
        0 0 28px;
}


.svgm-rooms-round-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 62px;

    width:
        62px;

    height:
        62px;

    border-radius:
        50%;

    background:
        #f7e7e5;

    color:
        #96343d;

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

    font-size:
        25px;
}


.svgm-rooms-section-label {
    margin:
        0 0 7px;

    color:
        #bd7771;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.svgm-rooms-card h2 {
    margin:
        0;

    color:
        #8f2734;

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

    font-size:
        42px;

    font-weight:
        700;

    line-height:
        1.12;

    letter-spacing:
        -.02em;
}


/* ==========================================================
   TEKSTS
   ========================================================== */

.svgm-rooms-content {
    padding:
        0 74px;
}


.svgm-rooms-content p {
    width:
        100%;

    max-width:
        none;

    margin:
        0 0 22px;

    color:
        #587689;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1.72;

    text-align:
        left;
}


.svgm-rooms-content p.svgm-rooms-intro {
    color:
        #496879;

    font-weight:
        700;
}


/* ==========================================================
   GALERIJA
   ========================================================== */

.svgm-rooms-gallery {
    display:
        grid;

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

    gap:
        18px;

    width:
        100%;

    margin:
        32px 0;

    box-sizing:
        border-box;
}


.svgm-rooms-photo {
    position:
        relative;

    width:
        100%;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        22px;

    background:
        #eee8e1;

    box-shadow:
        0 7px 20px
        rgba(55,45,35,.07);
}


.svgm-rooms-photo img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        22px;
}


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

@media (max-width: 950px) {

    .svgm-rooms-hero {
        grid-template-columns:
            1fr;
    }

    .svgm-rooms-hero-art {
        align-items:
            flex-start;

        text-align:
            left;
    }

    .svgm-rooms-content {
        padding:
            0 20px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .svgm-rooms-page {
        padding:
            28px 16px 44px;
    }

    .svgm-rooms-hero {
        gap:
            26px;

        margin-bottom:
            26px;

        padding:
            0;
    }

    .svgm-rooms-hero h1 {
        font-size:
            36px;
    }

    .svgm-rooms-lead {
        font-size:
            18px;
    }

    .svgm-rooms-features {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    

    .svgm-rooms-card {
        padding:
            26px 20px 32px;

        border-radius:
            20px;
    }

    .svgm-rooms-card-head {
        align-items:
            flex-start;
    }

    .svgm-rooms-round-icon {
        flex-basis:
            52px;

        width:
            52px;

        height:
            52px;
    }

    .svgm-rooms-card h2 {
        font-size:
            31px;
    }

    .svgm-rooms-content {
        padding:
            0;
    }

    .svgm-rooms-content p {
        font-size:
            16px;
    }

    .svgm-rooms-gallery {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

}


/* SVGM handwritten hero text */


/* EXACT SVGM SCRIPT STYLE - copied from existing site */
.svgm-rooms-script {
color: #58798d;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 43px;
    line-height: .96;

    transform: rotate(-6deg);
}
