/*
 * The call-back form's own states: the errors under each field, and the panel
 * that takes the form's place once a request has been accepted.
 *
 * Kept out of style.css because that file is built from the front-end
 * project's sources, which are not in this repository — anything written into
 * it is lost the next time it is rebuilt.
 */

.cf-wrap {
    position: relative;
    overflow: hidden;
}

/* The form slides out to the left as the panel comes in from the right. */
.cf-wrap .contact__form {
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.cf-wrap.is-done .contact__form {
    transform: translateX(-12%);
    opacity: 0;
    pointer-events: none;
}

.cf-error,
.cf-form-error {
    display: block;
    margin-top: .6rem;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #c0392b;
    min-height: 0;
}

.cf-error:empty,
.cf-form-error:empty {
    display: none;
}

/* The underline the design already uses, turned red while a field is wrong. */
.cf-field.is-invalid .cf-line {
    background-color: #c0392b;
}

.cf-field.is-invalid .cf-input {
    border-color: #c0392b;
}

.cf-done {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    transform: translateX(14%);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .1s;
}

.cf-wrap.is-done .cf-done {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.cf-done[hidden] {
    display: none;
}

.cf-done__tick {
    width: 5.2rem;
    height: 5.2rem;
    color: #2c0d08;
}

.cf-wrap.is-done .cf-done__tick path,
.cf-wrap.is-done .cf-done__tick circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    animation: cf-draw .7s ease forwards;
}

@keyframes cf-draw {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0; }
}

.cf-done__title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 3.2rem;
    line-height: 1.2;
    font-weight: 400;
    color: #2c0d08;
}

.cf-done__text {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #2c0d08;
}

button[data-submit][disabled] {
    opacity: .6;
    cursor: progress;
}

@media (max-width: 767px) {
    .cf-done__title { font-size: 24px; }
    .cf-done__text { font-size: 14px; }
    .cf-done__tick { width: 40px; height: 40px; }
}

/* Someone who has asked for less motion gets the change without the travel. */
@media (prefers-reduced-motion: reduce) {
    .cf-wrap .contact__form,
    .cf-done {
        transition: opacity .2s ease;
        transform: none;
    }

    .cf-wrap.is-done .contact__form { transform: none; }

    .cf-wrap.is-done .cf-done__tick path,
    .cf-wrap.is-done .cf-done__tick circle { animation: none; }
}

/* ---------------------------------------------------------------------------
   A news article on a page of its own.

   style.css is built from the front-end project's sources, which are not in
   this repository, so anything written into it is lost on the next build —
   the same reason the call-back form's states live here.
   --------------------------------------------------------------------------- */

.news-article {
    padding: 14rem 0 8rem;
}

.news-article__back {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
    text-decoration: none;
    opacity: .7;
    transition: opacity .25s ease;
}

.news-article__back:hover {
    opacity: 1;
}

.news-article__body {
    max-width: 82rem;
    margin: 0 auto;
}

.news-article__date {
    display: block;
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    opacity: .6;
}

.news-article__body h1 {
    margin-bottom: 3.2rem;
    font-size: 3.6rem;
    line-height: 1.25;
}

.news-article__cover {
    margin-bottom: 3.2rem;
    border-radius: 1.2rem;
    overflow: hidden;
}

.news-article__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.news-article__text p {
    margin-bottom: 1.8rem;
    font-size: 1.6rem;
    line-height: 1.7;
}

.news-article__text h4 {
    margin: 4rem 0 1.4rem;
    font-size: 2.2rem;
    line-height: 1.35;
}

.news-article__more {
    max-width: 82rem;
    margin: 8rem auto 0;
}

.news-article__more h2 {
    margin-bottom: 3.2rem;
    font-size: 2.8rem;
}

@media (max-width: 768px) {
    .news-article {
        padding: 11rem 0 6rem;
    }

    .news-article__body h1 {
        font-size: 2.6rem;
    }

    .news-article__text h4 {
        font-size: 1.9rem;
    }
}

/* Paylaşım, mətn ölçüsü və digər xəbərlər lenti ------------------------------ */

/* Məqalənin sonunda: oxuyub bitirəndən sonra paylaşılır. */
.news-article__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 4rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.news-article__share-label {
    margin-right: .4rem;
    font-size: 1.3rem;
    opacity: .6;
}

.news-article__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.news-article__share-btn:hover {
    border-color: currentColor;
    background: rgba(255, 255, 255, .08);
}

.news-article__copy.is-copied {
    border-color: #4caf7d;
    color: #4caf7d;
}

/* Şəklin altında, oxumaq başlayan yerdə. */
.news-article__size {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-bottom: 2.4rem;
}

.news-article__size button {
    min-width: 4rem;
    height: 4rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10rem;
    color: inherit;
    font-size: 1.4rem;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.news-article__size button:hover {
    border-color: currentColor;
    background: rgba(255, 255, 255, .08);
}

/* Digər xəbərlər: üçdən çox olanda lent. */
.news-slider {
    position: relative;
    padding-bottom: 1rem;
}

.news-slider .swiper-slide {
    height: auto;
}

.news-slider__nav {
    position: absolute;
    top: 38%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    color: #2b1a12;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .25s ease, opacity .25s ease;
}

.news-slider__nav:hover {
    background: #fff;
}

.news-slider__nav.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

/* Hamısı ekrana sığanda Swiper bu sinfi qoyur — onda ox lazım deyil. */
.news-slider__nav.swiper-button-lock {
    display: none;
}

.news-slider__nav--prev {
    left: -1.2rem;
}

.news-slider__nav--next {
    right: -1.2rem;
}

/* Böyük pəncərə açılan şəkillər. */
[data-news-gallery] .swiper-slide {
    cursor: zoom-in;
}

@media (max-width: 768px) {
    .news-article__share-btn,
    .news-article__size button {
        width: 4.4rem;
        height: 4.4rem;
    }

    /* Növbəti kart ekranın kənarından çıxsın: davamı olduğunu bildirən ən
       aydın işarə budur. Konteynerin 16px boşluğunu geri alırıq. */
    .news-slider {
        margin-right: -16px;
    }

    .news-slider__nav {
        display: none;
    }
}


/* Xəbər pəncərəsinin daxili sürüşməsi --------------------------------------

   Pəncərə açıq olanda jest ona çatmalıdır: zəncirvari sürüşmə arxadakı
   səhifəyə keçməsin, iOS-da isə ətalət saxlanılsın. */

#news-popup-scroll {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Telefonda panel aşağıdan bağlanır (top:auto; bottom:0) və hündürlüyü
       vh ilə verilir. Ünvan zolağı görünəndə vh görünən sahədən böyük olur,
       yəni panelin yuxarısı — məqalənin başlanğıcı — ekrandan yuxarıda qalır
       və oxucu mətni tam görə bilmir.

       Panel indi görünən ekranı dəqiq tutur, sürüşən hissə isə qalan yeri
       alır: heç nə ekrandan kənarda qalmır. */
    .popup-news .popup__body {
        top: 0;
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .popup-news .popup__scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
    }
}

/* Xəritə ---------------------------------------------------------------------

   The drawing that used to sit here said where the project is in the way a
   brochure does. This says it in the way somebody about to drive there needs:
   they can zoom, look at what is around it, and leave with the route already
   asked for.

   Sized by ratio rather than a fixed height, because it sits in two different
   columns on two pages and a height that suits one crops the other. */

.site-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: #2b1a12;
}

.site-map__frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    /* Google's own interface is light; this keeps it from glaring out of a
       dark page without washing the map out. */
    filter: saturate(0.9);
}

/* The button sits on the map rather than under it: under it, on a phone, it
   lands below the fold of the section and nobody finds it. */
.site-map__route {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #2c0d08;
    color: #fdf6db;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: background .2s ease, transform .2s ease;
}

.site-map__route:hover,
.site-map__route:focus-visible {
    background: #46160d;
    color: #fdf6db;
    transform: translateY(-1px);
}

.site-map__route svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .site-map {
        min-height: 260px;
    }

    .site-map__frame {
        min-height: 260px;
    }

    .site-map__route {
        left: 12px;
        bottom: 12px;
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* Marşrut düymələri -----------------------------------------------------------

   The same route the contact page offers, in the two places somebody who has
   decided to come looking would reach for it: the bar at the top on a desktop,
   and the stack of contact buttons on a phone. */

/* Borrows the telephone button's shape; only the icon needs sizing, and on a
   narrow desktop the words give way before the bar starts to crowd. */
.header__btn--route .header__phone svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 1200px) {
    .header__btn--route .header__phone {
        font-size: 0;
        gap: 0;
    }

    .header__btn--route .header__phone svg {
        font-size: initial;
    }
}

/* In the floating stack the template only paints the two buttons it shipped
   with — the green one and the cream one — so a third arrived with no circle
   behind it at all and read as nothing. This is the cream button's colours the
   other way round: unmistakably a button, and not mistakable for either of
   its neighbours. */
.contact-fab__item--route {
    background: #2c0d08;
    color: #fdf6db;
}

.contact-fab__item--route svg {
    width: 20px;
    height: 20px;
}

/* Məsafə kartları ------------------------------------------------------------

   "2" and "min" are one line of type with the line height set to zero, which
   is what holds the big numeral tight against the card. Zero is survivable
   while the pair stays on one line — and it did, in Azerbaijani, where the
   label beside it is short. In English and Russian the label is longer, the
   pair gets squeezed, the unit drops to a second line, and with no line height
   that second line lands exactly on top of the first.

   The pair is held on one line and keeps its width; the label beside it wraps
   instead, which it was already doing. */

.loc-card__content span {
    white-space: nowrap;
    flex: 0 0 auto;
}

.loc-card__content p {
    min-width: 0;
}