/*
 * Сторінка «Контакти»
 *
 * Зібрана з готового: .phero (main.css), .medallion, .callout, .btn,
 * .eyebrow (ui.css), .socials (main.css) і глобальна CTA.
 * Своє тут — сітка карток контактів і секція з картою.
 *
 * Чергування фонів: герой (subtle) → контакти canvas → карта → CTA elevated.
 */

.ct-details {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.ct-details__inner {
    display:        flex;
    flex-direction: column;
    gap:            48px;
}

/* ── Картки контактів ───────────────────────────────────────────────────── */
.ct-cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.ct-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            14px;
    padding:        30px;
    background:     var(--bg-elevated);
    border:         1px solid var(--gold-line-soft);
    border-radius:  4px;
    transition:     border-color var(--transition);
}
.ct-card:hover { border-color: var(--gold-line); }

.ct-card__medallion { margin-bottom: 4px; }

.ct-card__title {
    color:          var(--text-muted);
    font-size:      12px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.ct-card__value {
    color:           var(--text-primary);
    font-size:       17px;
    font-weight:     500;
    line-height:     26px;
    text-decoration: none;
}
/* Телефон і email — головні дії сторінки на телефоні, а рядок тексту дає
   всього 26px висоти. Видимий текст лишається як є, зона натискання
   доростає до 44px невидимим псевдоелементом. */
.ct-card__value--link {
    position:   relative;
    transition: color var(--transition);
}
.ct-card__value--link::after {
    content:  "";
    position: absolute;
    inset:    -9px 0;
}
.ct-card__value--link:hover,
.ct-card__value--link:focus-visible { color: var(--gold-text); }

/* ── Соцмережі ──────────────────────────────────────────────────────────── */
.ct-socials {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         20px;
    padding-top: 36px;
    border-top:  1px solid var(--gold-line-soft);
}
.ct-socials__title {
    margin:         0;
    color:          var(--text-muted);
    font-size:      12px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ── Карта ──────────────────────────────────────────────────────────────── */
.ct-map { position: relative; }

/* Карта показується одразу; loading="lazy" в розмітці лишає рішення про
   момент вантаження браузеру — секція нижче першого екрана.
   Волосяні лінії згори й знизу відділяють світлу карту від темних секцій. */
.ct-map__frame {
    display:       block;
    width:         100%;
    height:        460px;
    border:        0;
    border-top:    1px solid var(--gold-line-soft);
    border-bottom: 1px solid var(--gold-line-soft);
}

/* Картка адреси поверх полотна */
.ct-map__overlay {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    pointer-events: none;
}
/* Картка праворуч: Google малює власну інфо-панель об'єкта в лівому
   верхньому куті карти, і зліва вони накладались. Праворуч у межах
   контейнера вільно — елементи керування Google стоять по краях
   самого iframe, за межами контейнера. */
.ct-map__wrap {
    display:         flex;
    justify-content: flex-end;
    width:           100%;
}

.ct-map__card {
    width:          360px;
    max-width:      100%;
    gap:            14px;
    pointer-events: auto;
}
.ct-map__label { margin-bottom: 2px; }
.ct-map__address {
    margin:      0;
    color:       var(--text-primary);
    font-size:   18px;
    line-height: 28px;
}
.ct-map__schedule {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    margin:      0;
    color:       var(--text-secondary);
    font-size:   15px;
    line-height: 22px;
}
.ct-map__schedule-icon {
    flex:      0 0 auto;
    width:     18px;
    height:    18px;
    margin-top: 2px;
    color:     var(--text-primary);
}
.ct-map__route { margin-top: 6px; }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
/* 1110px — виміряний поріг, не кругле число. Найдовше значення в картці —
   адреса; рахунок від її природної ширини (186px + 2×30 паддінгу = 246px)
   дав 1096, але на межі рядок усе одно переносився: реальний мінімум
   картки — 250px (бісекція по ширині viewport: 250px → 5 рядків,
   248px → 6). Звідси 4 × 250 + 112 (відступи 40 + проміжки 72) = 1112,
   тобто чотири колонки тримаються до 1110 включно. */
@media (max-width: 1110px) {
    .ct-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .ct-details       { padding: 80px 0; }
    .ct-details__inner { gap: 40px; }
    .ct-cards         { gap: 20px; }
    .ct-card          { padding: 24px; }
}

@media (max-width: 768px) {
    .ct-details       { padding: 64px 0; }
    .ct-details__inner { gap: 32px; }
    .ct-socials       { padding-top: 28px; gap: 16px; }
    .ct-map__frame    { height: 420px; }
    /* Картка адреси перестає бути накладкою: на вузькому екрані вона
       закрила б усю карту, заради якої секція й існує. */
    .ct-map__overlay {
        position: static;
        padding:  24px 0 0;
    }
    .ct-map__wrap { justify-content: flex-start; }
    .ct-map__card { width: 100%; }
}

/* 560px: дві картки контактів дають колонку ~250px, і «+380 44 290 38 96»
   переноситься на два рядки — номер, розірваний навпіл, не читається. */
@media (max-width: 560px) {
    .ct-cards { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 480px) {
    .ct-details    { padding: 48px 0; }
    .ct-map__frame { height: 340px; }
    .ct-map__address { font-size: 17px; line-height: 26px; }
}