/*
 * Medību Tornis - breakpoints.
 *
 * Desktop first: the base styles describe the wide layout of the design, and each block below
 * removes columns as the viewport narrows. Checked at 1920, 1440, 1024, 768, 430, 375 and 320 px.
 */

/* ---- Very wide screens: keep the header phone, give the hero more room -- */

@media (min-width: 1600px) {
    .hero {
        min-height: 560px;
    }

    .hero--home,
    .hero--product {
        min-height: 640px;
    }

    .hero--shift .hero__media picture {
        width: 108%;
    }
}

/* ---- Below 1440 px: the header gets tight ------------------------------- */

/* The logo, the menu, the button and the written phone number need about 1300 px in a row.
   Below that the number folds into a round phone button. */
@media (max-width: 1439px) {
    .site-header__phone span {
        display: none;
    }

    .site-header__phone {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--line-dark);
        border-radius: 50%;
    }
}

/* ---- Below 1320 px: fewer columns --------------------------------------- */

@media (max-width: 1319px) {
    .site-footer__main {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .site-footer__brand,
    .site-footer__map {
        grid-row: 2;
    }

    .site-footer__about {
        grid-column: 1;
        grid-row: 1;
    }

    .site-footer__map {
        grid-column: 2 / 4;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: start;
        gap: 1.5rem;
    }

    .feature-grid--five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cost-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cost-card--base {
        grid-column: 1 / -1;
    }

    .coverage-strip__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .coverage-strip__flow {
        grid-column: 1 / -1;
    }
}

/* ---- Below 1280 px: mobile navigation ----------------------------------- */

/* The same width is named in assets/js/navigation.js and in render_site_logo(). The row with
   the round phone button needs about 1175 px plus the page margins and a scrollbar. */
@media (max-width: 1279px) {
    :root {
        --header-height: 72px;
    }

    .site-logo__image {
        height: 62px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-header__actions {
        display: none;
    }

    .site-nav {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 99;
        display: block;
        padding: 1rem var(--gutter) 2rem;
        background: var(--green-950);
        border-top: 1px solid var(--line-dark);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__item {
        flex-wrap: wrap;
        border-bottom: 1px solid var(--line-dark);
    }

    .site-nav__link {
        flex: 1;
        padding: 0.95rem 0;
        border-bottom: 0;
        font-size: 1.2rem;
        white-space: normal;
    }

    .site-nav__toggle {
        width: 48px;
        height: 48px;
        border: 1.5px solid var(--line-dark);
        border-radius: var(--radius);
    }

    .site-nav__submenu {
        position: static;
        display: none;
        flex-basis: 100%;
        min-width: 0;
        margin-bottom: 0.75rem;
        padding: 0 0 0 0.75rem;
        background: none;
        border: 0;
        border-left: 2px solid var(--line-dark);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-nav__item--parent.is-open > .site-nav__submenu {
        display: block;
    }

    .site-nav__sublink {
        padding: 0.7rem 0.75rem;
        font-size: 1.0625rem;
    }

    .site-nav__mobile-actions {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    body.has-open-menu {
        overflow: hidden;
    }
}

/* ---- Below 1120 px: the footer bar takes two rows ----------------------- */

/* Copyright, legal links and credit need about 965 px side by side, plus room between them.
   Narrower than that the copyright and the credit keep the first row, at its two ends, and the
   legal links follow on a row of their own. */
@media (max-width: 1119px) {
    .site-footer__legal {
        order: 3;
        flex-basis: 100%;
    }

    .site-footer__credit {
        padding-right: 0;
    }
}

/* ---- Tablet: 1024 px and below ------------------------------------------ */

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .product-detail {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    }

    .spec-card {
        grid-column: 1 / -1;
    }

    .works-band__inner {
        grid-template-columns: 1fr;
    }

    .about-intro {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    }

    .value-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .journey__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .journey__step + .journey__step::before {
        display: none;
    }

    .quality,
    .contact-layout,
    .coverage,
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .legal-aside__media {
        grid-column: 1;
        border-radius: var(--radius);
    }

    .legal-aside__lead {
        border-radius: var(--radius);
    }

    .legal-aside__cards {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .tower-links {
        grid-template-columns: 1fr;
    }

    .tower-link {
        grid-template-columns: 34% minmax(0, 1fr);
    }

    .works-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero--shift .hero__media picture {
        width: 100%;
    }

    .hero::after {
        background:
            linear-gradient(90deg, rgba(6, 16, 11, 0.9) 0%, rgba(6, 16, 11, 0.74) 45%, rgba(6, 16, 11, 0.35) 75%, rgba(6, 16, 11, 0.15) 100%),
            linear-gradient(180deg, rgba(6, 16, 11, 0.35) 0%, rgba(6, 16, 11, 0) 22%, rgba(6, 16, 11, 0) 55%, rgba(6, 16, 11, 0.78) 100%);
    }
}

/* ---- Large phones and small tablets: 768 px and below ------------------- */

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .hero {
        min-height: 0;
    }

    .hero__inner {
        padding-block: 2.25rem 2rem;
    }

    .hero::after {
        background: linear-gradient(180deg, rgba(6, 16, 11, 0.78) 0%, rgba(6, 16, 11, 0.62) 45%, rgba(6, 16, 11, 0.86) 100%);
    }

    .hero__image {
        object-position: 78% 50%;
    }

    .highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 1rem;
    }

    .highlights__item {
        max-width: none;
        font-size: 0.95rem;
    }

    .highlights__icon {
        width: 44px;
        height: 44px;
    }

    .section-header__title::before,
    .section-header__title::after {
        flex-basis: 40px;
    }

    .process__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .process__step + .process__step::before,
    .process__step + .process__step::after {
        display: none;
    }

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

    .feature-grid--five,
    .feature-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail {
        grid-template-columns: 1fr;
    }

    .gallery {
        max-width: 420px;
        margin-inline: auto;
    }

    .prose--columns {
        columns: 1;
    }

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

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

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

    .contact-panel__services li:nth-child(3) {
        border-left: 0;
    }

    .contact-panel__services li:nth-child(n + 3) {
        border-top: 1px solid var(--line-dark);
    }

    .coverage-strip__inner {
        grid-template-columns: 1fr;
    }

    .coverage-strip__flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

    .coverage-strip__flow li + li::before {
        display: none;
    }

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

    .site-footer__brand,
    .site-footer__about,
    .site-footer__map {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .site-footer__map {
        justify-content: center;
    }

    /* One column: copyright, legal links, credit - in reading order, all at the left edge. */
    .site-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding-block: 0.75rem;
    }

    .site-footer__legal {
        order: 0;
        flex-basis: auto;
    }

    /* Where the footer is used by touch, every link is at least 44 px tall. */
    .site-footer .contact-list a,
    .site-footer__links a,
    .site-footer__legal a,
    .site-footer__legal .link-button,
    .site-footer__credit-link {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .site-footer .contact-list li,
    .site-footer__links li {
        margin-bottom: 0;
    }

    /* The row without a link keeps the rhythm of the two rows that are links. */
    .site-footer .contact-list li {
        min-height: 2.75rem;
    }

    .legal-section {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .legal-section__icon {
        width: 48px;
        height: 48px;
    }

    .legal-section__icon .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .lightbox__button--previous,
    .lightbox__button--next {
        top: auto;
        bottom: 1rem;
        transform: none;
    }
}

/* ---- Phones: 560 px and below ------------------------------------------- */

@media (max-width: 560px) {
    .hero__title {
        font-size: clamp(2rem, 9.5vw, 2.6rem);
    }

    .hero--home .hero__title {
        font-size: clamp(1.7rem, 7.6vw, 2.2rem);
    }

    .hero__actions,
    .cta-band__actions,
    .inquiry__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero__eyebrow {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }

    .hero__eyebrow li + li::before {
        margin-inline: 0.5rem;
    }

    .product-grid,
    .feature-grid--four,
    .feature-grid--five,
    .feature-grid--two,
    .cost-grid,
    .journey__list,
    .quality__images,
    .legal-aside {
        grid-template-columns: 1fr;
    }

    .legal-aside__media,
    .legal-aside__cards {
        grid-column: auto;
    }

    .quality__images picture {
        aspect-ratio: 4 / 3;
    }

    .process__list {
        grid-template-columns: 1fr;
    }

    .spec-card {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .spec-card__drawing {
        max-width: 300px;
        margin-inline: auto;
    }

    .about-intro {
        grid-template-columns: 1fr;
    }

    .about-intro__media {
        aspect-ratio: 4 / 3;
    }

    .tower-link {
        grid-template-columns: 38% minmax(0, 1fr);
    }

    .coverage__grid {
        grid-template-columns: 1fr;
    }

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

    .contact-method {
        gap: 0.9rem;
    }

    .contact-method__icon {
        width: 50px;
        height: 50px;
    }

    .contact-method__value {
        font-size: 1.3rem;
    }

    .contact-method__value--email {
        font-size: 1.05rem;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
    }

    .site-footer__legal ul {
        flex-direction: column;
        gap: 0;
    }

    .site-footer__legal li + li::before {
        display: none;
    }

    .price-badge__value {
        font-size: 1.6rem;
    }

    /* "no 200 € līdz 420 €" does not fit one line on the narrowest phones. */
    .cost-card > div {
        min-width: 0;
    }

    .cost-card__price {
        white-space: normal;
    }
}

/* ---- Small phones: 360 px and below ------------------------------------- */

@media (max-width: 360px) {
    :root {
        --gutter: 0.875rem;
    }

    .site-logo__image {
        height: 54px;
    }

    .highlights {
        grid-template-columns: 1fr;
    }

    .value-grid,
    .works-band__tiles,
    .contact-panel__services,
    .coverage-strip__flow {
        grid-template-columns: 1fr;
    }

    .contact-panel__services li + li {
        border-left: 0;
        border-top: 1px solid var(--line-dark);
    }

    .btn {
        padding-inline: 1rem;
    }
}

/* ---- Print -------------------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .cookie-banner,
    .cookie-dialog,
    .cta-band,
    .hero__media,
    .hero::after {
        display: none !important;
    }

    .hero {
        min-height: 0;
        background: none;
        color: #000;
    }

    body {
        background: #fff;
    }
}