/* ==========================================================
   CONTACTS PAGE
   ========================================================== */

.contacts-page {
    max-width:1200px;
    margin:0 auto;
    padding:1rem;
}

.contacts-intro {
    max-width:820px;
    margin:0 auto 3rem;
}


/* ==========================================================
   CONTACTS PUZZLE
   ========================================================== */

.contacts-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:
        "reception booking accounting"
        "director  booking hr"
        "moiseev   medreg  medreg";

    gap:5px;

    overflow:hidden;

    border-radius:var(--villa-radius-lg);

    background:var(--villa-border);
    box-shadow:var(--villa-shadow);
}

.contact-card--reception {
    grid-area:reception;
}

.contact-card--booking {
    grid-area:booking;
}

.contact-card--accounting {
    grid-area:accounting;
}

.contact-card--director {
    grid-area:director;
}

.contact-card--hr {
    grid-area:hr;
}

.contact-card--moiseev {
    grid-area:moiseev;
}

.contact-card--medreg {
    grid-area:medreg;
}


/* ==========================================================
   CARD BASE
   ========================================================== */

.contact-card {
    display:flex;
    flex-direction:column;

    min-width:0;
    padding:1.4rem 1.5rem;

    border:0;
    border-radius:0;

    background:rgba(255,255,255,.96);
    box-shadow:none;
}

.contact-card--alt {
    background:rgba(241,248,245,.96);
}


/* ==========================================================
   CARD HEADER
   ========================================================== */

.contact-card__head {
    display:flex;
    align-items:center;
    gap:.7rem;

    margin-bottom:1.1rem;
}

.contact-card__icon {
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 30px;

    width:30px;
    height:30px;

    border-radius:.55rem;

    background:var(--villa-surface-green);
    color:var(--villa-green);

    font-size:.78rem;
}

.contact-card__title {
    margin:0;

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

    font-size:1.28rem;
    line-height:1.25;
}

.contact-card__text {
    margin:0 0 1rem;

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

    font-size:1rem;
    line-height:1.6;
}


/* ==========================================================
   CONTACT LINES
   ========================================================== */

.contact-card__links {
    display:flex;
    flex-direction:column;
    gap:.8rem;

    min-width:0;
}

.contact-line {
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 32px;
    align-items:center;
    gap:.6rem;

    min-width:0;
}

.contact-line__icon {
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--villa-green);

    font-size:.9rem;
}

.contact-line__content {
    min-width:0;
}

.contact-line__label {
    display:block;

    margin-bottom:.1rem;

    color:var(--villa-muted);

    font-size:.7rem;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.035em;
}

.contact-line__value {
    display:block;

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

    font-size:1.02rem;
    line-height:1.3;

    overflow-wrap:anywhere;
    user-select:text;
}

.contact-line__action {
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    border-radius:50%;

    color:var(--villa-green);
    text-decoration:none;

    transition:
        background-color var(--villa-transition),
        color var(--villa-transition);
}

.contact-line__action:hover {
    background:var(--villa-surface-green);
    color:var(--villa-green-dark);
}


/* ==========================================================
   SCHEDULE
   ========================================================== */

.contact-card__schedule {
    margin-top:1.25rem;

    color:var(--villa-text-soft);
}

.contact-card__schedule-label {
    display:block;

    margin-bottom:.18rem;

    color:var(--villa-muted);

    font-size:.72rem;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.04em;
}

.contact-card__schedule-value {
    display:flex;
    flex-wrap:wrap;
    gap:0 .3rem;

    font-size:.98rem;
    line-height:1.45;
}

.contact-card__schedule-days,
.contact-card__schedule-hours {
    white-space:nowrap;
}


/* В узких ячейках расписание переносим красиво 

.contact-card--reception .contact-card__schedule-value,
.contact-card--accounting .contact-card__schedule-value,
.contact-card--director .contact-card__schedule-value,
.contact-card--hr .contact-card__schedule-value,
.contact-card--moiseev .contact-card__schedule-value {
    flex-direction:column;
}
*/

/* ==========================================================
   BOOKING
   ========================================================== */

.contact-card--booking {
    padding:1.5rem 1.6rem;
}

.contact-card--booking .contact-card__links {
    gap:.95rem;
}

.contact-card--booking .contact-card__schedule {
    margin-top:1.5rem;
}


/* ==========================================================
   MOISEEV
   ========================================================== */

.contact-card--moiseev {
    padding:1.35rem 1.45rem;
}

.contact-card__simple-action {
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    align-self:flex-start;

    margin-top:.1rem;

    color:var(--villa-green);

    font-size:1rem;
    font-weight:500;

    text-decoration:none;
}

.contact-card__simple-action:hover {
    color:var(--villa-green-dark);
    text-decoration:none;
}


/* ==========================================================
   MEDICAL REGISTRY
   ========================================================== */

.contact-card--medreg {
    padding:1.45rem 1.6rem;
}

.contact-card__medreg-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:2rem;

    margin-bottom:1.2rem;
}

.contact-card__medreg-head .contact-card__head {
    margin-bottom:0;
}

.contact-card__schedule--inline {
    flex:0 0 auto;

    margin-top:0;

    text-align:right;
}

.contact-card__schedule--inline .contact-card__schedule-value {
    justify-content:flex-end;
}

.contact-card__medreg-body {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,.85fr);
    gap:2rem;
    align-items:start;
}



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

@media (max-width:991.98px) {

    .contacts-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-areas:
            "booking reception"
            "accounting hr"
            "medreg medreg"
            "moiseev director";
    }

    .contact-card__medreg-body {
        grid-template-columns:1fr 1fr;
        gap:1.5rem;
    }

}


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

@media (max-width:575.98px) {

    .contacts-page {
        padding:.5rem;
    }

    .contacts-intro {
        margin-bottom:2rem;
    }

    .contacts-grid {
        grid-template-columns:1fr;
        grid-template-areas:
            "booking"
            "reception"
            "accounting"
            "hr"
            "medreg"
            "moiseev"
            "director";
    }

    .contact-card {
        padding:1.15rem;
    }

    .contact-card--booking,
    .contact-card--medreg,
    .contact-card--moiseev {
        padding:1.15rem;
    }

    .contact-card__title {
        font-size:1.18rem;
    }

    .contact-card__medreg-head {
        flex-direction:column;
        gap:.8rem;
    }

    .contact-card__schedule--inline {
        text-align:left;
    }

    .contact-card__schedule--inline .contact-card__schedule-value {
        justify-content:flex-start;
    }

    .contact-card__medreg-body {
        grid-template-columns:1fr;
        gap:1.5rem;
    }
/*
    .contact-line__value {
        font-size:.98rem;
    }
*/
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

    .contact-line__action {
        transition:none!important;
    }

}









/*
.contact-card--booking .contact-card__title {
    font-size:1.4rem;
}

.contact-card--booking .contact-card__links {
    gap:1.15rem;
}

.contact-card--booking .contact-line {
    grid-template-columns:28px minmax(0,1fr) 34px;
    gap:.75rem;
}

.contact-card--booking .contact-line__value {
    font-size:1.1rem;
}

.contact-card--booking .contact-line__label {
    font-size:.74rem;
}

.contact-card--booking .contact-card__schedule {
    margin-top:1.8rem;
}

*/
.contact-card--reception,
.contact-card--accounting,
.contact-card--director,
.contact-card--moiseev,
.contact-card--hr {
    padding:1.2rem 1.25rem;
}



.contact-card--accounting .contact-card__schedule {
    margin-top: 2.5rem;
}


.contact-card--booking .contact-line,
.contact-card--booking .contact-card__links {
    padding-top:.1rem;
    padding-bottom:.1rem;
}

.contact-card__secondary-link {
    display:inline-flex;
    align-items:center;
    gap:.55rem;

    align-self:flex-start;

    margin-top:1.25rem;

    color:var(--villa-green);
    font-size:.95rem;
    font-weight:500;
    line-height:1.4;

    text-decoration:none;
}

.contact-card__secondary-link:hover {
    color:var(--villa-green-dark);
}


.contact-card__schedule--footer {
    background-color: #f8f8f8;
}



.contact-card--medreg {
    display:flex;
    flex-direction:column;
    padding:0;
}

.contact-card__medreg-body {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    gap:2rem;

    padding:1.45rem 1.6rem 1.25rem;
}

.contact-card__schedule--footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    margin-top:auto;
    padding:.9rem 1.6rem;

    border-top:1px solid var(--villa-border);

    background:var(--villa-surface-soft);
}

.contact-card__schedule--footer .contact-card__schedule-label {
    margin:0;
}

.contact-card__schedule--footer .contact-card__schedule-value {
    justify-content:flex-end;
}