/* ============================================================
 * Bluewaters — WordPress-only additions to the prototype CSS.
 * Patterns that don't exist in the static prototype (e.g. AJAX
 * "Load More" pagination) live here so we never edit style.css.
 * ============================================================ */

/* ===== Buy modal (single product "შეძენა") =====
   The prototype's style.css has no .buy-modal rules, so without these the modal
   renders as an always-visible unstyled block at the page bottom. Mirrors the
   working .callback-modal styling, plus buy-specific bits (product name, textarea). */
.buy-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.buy-modal.is-open {
    display: flex;
}

.buy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 36, 59, 0.65);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.buy-modal__content {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 80px rgba(20, 36, 59, 0.25);
    animation: slideUp 0.3s ease;
}

.buy-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F0F5FC;
    border: none;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.buy-modal__close:hover {
    background: #E2E7F0;
}

.buy-modal__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
}

.buy-modal__product {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: #1F59F9;
    text-align: center;
    margin: 0 0 6px;
}
.buy-modal__product:empty {
    display: none;
}

.buy-modal__desc {
    font-family: var(--font);
    font-size: 13px;
    color: #000;
    opacity: 0.6;
    text-align: center;
    margin-bottom: 22px;
}

.buy-modal__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.buy-modal__input {
    width: 100%;
    height: 46px;
    padding: 0 20px;
    border: 1px solid #E2E7F0;
    border-radius: 26px;
    font-family: var(--font);
    font-size: 14px;
    color: #000;
    outline: none;
    transition: border-color var(--transition);
    box-sizing: border-box;
}
.buy-modal__input:focus {
    border-color: #1F59F9;
}
.buy-modal__input::placeholder {
    color: #8A93A6;
}

.buy-modal__input--textarea {
    height: auto;
    min-height: 92px;
    padding: 14px 20px;
    border-radius: 18px;
    resize: vertical;
    line-height: 1.5;
}

.buy-modal__submit {
    width: 100%;
    height: 48px;
    background: #1F59F9;
    color: #fff;
    border: none;
    border-radius: 26px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition);
    margin-top: 4px;
}
.buy-modal__submit:hover {
    background: #1648D8;
}

/* intl-tel-input integration inside the buy modal */
.buy-modal .iti {
    --iti-input-padding-left: 100px;
    width: 100%;
}
.buy-modal .iti--separate-dial-code .iti__tel-input,
.buy-modal input[type="tel"].iti__tel-input {
    padding-left: 100px !important;
}

/* Inline AJAX status message inside the modal */
.buy-modal .bw-form-status {
    text-align: center;
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 767px) {
    .buy-modal__content { padding: 36px 22px 26px; }
}

/* ===== Thank-you page (post form submission) ===== */
.thank-you__section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background:
        radial-gradient(1200px 600px at 50% -5%, rgba(31, 89, 249, 0.12), transparent 60%),
        linear-gradient(180deg, #F4F7FC 0%, #FFFFFF 100%);
}

.thank-you__container {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

/* Logo pinned to the top-center (replaces the removed site header) */
.thank-you__logo {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
}
.thank-you__logo img {
    height: 34px;
    width: auto;
    display: block;
}

/* Animated success badge */
.thank-you__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: rgba(31, 89, 249, 0.10);
    margin-bottom: 28px;
    animation: bw-ty-badge 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.thank-you__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #1F59F9;
    color: #fff;
    box-shadow: 0 12px 28px -8px rgba(31, 89, 249, 0.55);
}

.thank-you__icon svg {
    width: 34px;
    height: 34px;
    animation: bw-ty-check 0.45s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.thank-you__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1F59F9;
    margin-bottom: 14px;
}

.thank-you__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1F59F9;
}

.thank-you__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900;
    line-height: 1.05;
    color: var(--color-dark);
    margin: 0 0 16px;
}

.thank-you__desc {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(11, 27, 59, 0.65);
    margin: 0 auto 36px;
    max-width: 480px;
}

.thank-you__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.thank-you__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1.5px solid transparent;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}

.thank-you__btn--primary {
    background: #1F59F9;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(31, 89, 249, 0.6);
}
.thank-you__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(31, 89, 249, 0.7);
}

.thank-you__btn--ghost {
    background: #fff;
    color: #1F59F9;
    border-color: rgba(31, 89, 249, 0.35);
}
.thank-you__btn--ghost svg {
    transition: transform var(--transition);
}
.thank-you__btn--ghost:hover {
    border-color: #1F59F9;
    transform: translateY(-2px);
}
.thank-you__btn--ghost:hover svg {
    transform: translateX(4px);
}

.thank-you__contact {
    margin-top: 40px;
    font-family: var(--font);
    font-size: 14px;
    color: rgba(11, 27, 59, 0.55);
}
.thank-you__contact a {
    color: var(--color-dark);
    font-weight: 700;
    margin-left: 6px;
    border-bottom: 1.5px solid rgba(31, 89, 249, 0.4);
    transition: color var(--transition), border-color var(--transition);
}
.thank-you__contact a:hover {
    color: #1F59F9;
    border-color: #1F59F9;
}

@keyframes bw-ty-badge {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes bw-ty-check {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .thank-you__badge,
    .thank-you__icon svg {
        animation: none !important;
    }
}

@media (max-width: 767px) {
    .thank-you__section { min-height: 100vh; padding: 96px 16px 48px; }
    .thank-you__logo { top: 28px; }
    .thank-you__logo img { height: 28px; }
    .thank-you__btn { width: 100%; max-width: 320px; }
}

/* ===== Mobile header: მოითხოვე ზარი (left) · logo (center) · burger (right) =====
   The prototype put logo-left + [CTA+burger]-right. On mobile we want a 3-up
   layout. The CTA + burger live inside .header__right, so we span that full
   width (space-between → CTA left, burger right) and absolutely-center the logo
   over the bar. */
@media (max-width: 992px) {
    .header__inner {
        position: relative;
        gap: 10px;
    }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 1;
    }
    .header__right {
        flex: 1 1 100%;
        width: 100%;
        justify-content: space-between;
        gap: 8px;
        position: relative;
        z-index: 2;
        /* The right group spans the full bar and sits above the centered logo,
           so its empty middle would swallow clicks meant for the logo. Make the
           container click-transparent; re-enable pointer events on its actual
           buttons (CTA + burger). Now the centered logo link is clickable. */
        pointer-events: none;
    }
    .header__right > * {
        pointer-events: auto;
    }
    .header__cta--primary {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
}
@media (max-width: 420px) {
    .header__cta--primary { padding: 7px 12px; font-size: 11px; }
    .header__logo-img { height: 26px; }
}

/* Burger bars must be visible on the white "--light" subpage headers
   (prototype only darkened them on .is-scrolled / .header--solid → they were
   white-on-white and vanished on subpages). */
.header--light .header__burger span {
    background: #0B1B3B;
}

/* ===== Hero order on mobile: title → call form → lead + catalog button =====
   The title, lead and catalog button all live inside .hero__text, with the
   form as a sibling — so to slot the form *between* the title and the lead we
   dissolve .hero__text (display:contents), promoting its children to direct
   flex items of .hero__top, then reorder. Spacing switches from each child's
   margin-bottom to a single uniform flex gap (the desktop 48px gap would
   otherwise spread the now-separate items too far apart). */
@media (max-width: 992px) {
    .hero__top {
        gap: 24px;
    }
    .hero__text {
        display: contents;
    }
    .hero__title   { order: 1; margin-bottom: 0; }
    .hero__form    { order: 2; }
    .hero__lead    { order: 3; margin-bottom: 0; max-width: 100%; }
    .hero__actions { order: 4; margin-bottom: 0; }
}

/* ===== Homepage products carousel on mobile =====
   Move the "ყველა პროდუქცია" link + prev/next arrows BELOW the cards. They live
   in .products__controls inside .products__header (above the carousel), so we
   dissolve the header (display:contents) to promote .products__intro and
   .products__controls into .products__container, then order:
   intro → viewport(cards) → controls. */
@media (max-width: 992px) {
    .products__container {
        display: flex;
        flex-direction: column;
    }
    .products__header { display: contents; }
    .products__intro    { order: 1; margin-bottom: 18px; }
    .products__viewport { order: 2; }
    .products__controls { order: 3; margin-top: 20px; }
}

/* ===== Shop filter pills on mobile =====
   The prototype used flex:1 + flex-wrap on the pill bar, so long Georgian
   category names wrapped and the active "ყველა" rendered as a circle / the bar
   became a blob. Switch to a clean vertical full-width stack (matches the
   projects archive): each filter is a full-width pill, name left, count right. */
@media (max-width: 767px) {
    .products-archive__filters {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
        padding: 6px;
    }
    .products-archive__filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex: none;
        text-align: left;
        gap: 10px;
        padding: 11px 16px;
    }
    /* keep the count from wrapping off to a second line */
    .products-archive__count { flex: 0 0 auto; }
}

/* ===== Fully-clickable cards =====
   Any card that has data-href becomes a giant link (JS handles navigation).
   Internal anchors inside the card still work because the JS skips when
   the click target is inside an <a>. */
.card[data-href],
.project[data-href] {
    cursor: pointer;
}

/* ===== AJAX archive filtering — grid fade transition =====
   Applied by bw-wp.js when a filter pill is clicked; removed once the new
   grid HTML is in place. Gives a smooth swap instead of a hard flash. */
.products-archive__grid,
.projects-page__grid {
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.products-archive__grid.bw-grid-fading,
.projects-page__grid.bw-grid-fading {
    opacity: 0;
    pointer-events: none;
}

/* Filter pills click-feedback — tiny scale-down on press so even before the
   AJAX returns, the user knows the click was registered. */
.projects-page__filter,
.products-archive__filter {
    transition: background var(--transition), color var(--transition), transform 0.12s ease;
}
.projects-page__filter:active,
.products-archive__filter:active {
    transform: scale(0.97);
}

/* ===== Load More (AJAX pagination) ===== */
.load-more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.load-more__btn {
    --lm-bg: #fff;
    --lm-fg: #1F59F9;
    --lm-border: #1F59F9;
    --lm-shadow: 0 8px 24px -10px rgba(31, 89, 249, 0.45);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    min-width: 200px;
    min-height: 48px;
    background: var(--lm-bg);
    color: var(--lm-fg);
    border: 1.5px solid var(--lm-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

/* Filled-blue circle reveal on hover — gives the button a softer feel
   than a plain background swap. */
.load-more__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #1F59F9;
    border-radius: inherit;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.load-more__btn > * {
    position: relative;
    z-index: 1;
}

.load-more__btn:hover,
.load-more__btn:focus-visible {
    --lm-fg: #fff;
    --lm-border: #1F59F9;
    transform: translateY(-2px);
    box-shadow: var(--lm-shadow);
    outline: none;
}

.load-more__btn:hover::before,
.load-more__btn:focus-visible::before {
    transform: scale(1);
}

.load-more__btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -6px rgba(31, 89, 249, 0.4);
}

.load-more__btn:focus-visible {
    outline: 2px solid rgba(31, 89, 249, 0.35);
    outline-offset: 3px;
}

.load-more__label {
    display: inline-block;
    transition: transform var(--transition);
}

.load-more__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.load-more__btn:hover .load-more__icon {
    transform: translateY(3px);
}

/* ----- Loading state ----- */
.load-more__btn[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
    --lm-fg: #1F59F9;
}

.load-more__btn[aria-busy="true"]::before {
    transform: scale(0);
}

.load-more__btn[aria-busy="true"] .load-more__label,
.load-more__btn[aria-busy="true"] .load-more__icon {
    opacity: 0;
}

.load-more__btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgba(31, 89, 249, 0.2);
    border-top-color: #1F59F9;
    animation: bw-lm-spin 0.7s linear infinite;
    z-index: 2;
}

@keyframes bw-lm-spin {
    to { transform: rotate(360deg); }
}

/* ----- Newly-appended cards: gentle fade-in ----- */
.load-more-fade-in {
    animation: bw-lm-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bw-lm-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide wrapper when JS marks pagination as exhausted */
.load-more[hidden] {
    display: none;
}

/* ----- Mobile tweaks ----- */
@media (max-width: 767px) {
    .load-more {
        margin-top: 40px;
    }
    .load-more__btn {
        width: 100%;
        max-width: 320px;
        padding: 14px 24px;
    }
}

/* Respect users who'd rather not see motion. */
@media (prefers-reduced-motion: reduce) {
    .load-more__btn,
    .load-more__btn::before,
    .load-more__label,
    .load-more__icon,
    .load-more-fade-in {
        transition: none !important;
        animation: none !important;
    }
    .load-more__btn:hover {
        transform: none;
    }
}

/* ===== Single project: full-width banner gallery =====
   Overrides the 2-column .project-detail grid so the hero image
   becomes a wide banner above the "About" info block. */
.project-detail--stacked {
    display: block;
    grid-template-columns: none;
}

.project-detail__gallery--banner {
    margin-bottom: 32px;
}

/* The project/industry stills are SQUARE and carry a stats panel baked into their
   lower half, so a wide frame with `cover` sliced that panel off. The frame is now
   4:3 and the photo is fitted whole inside it; the container keeps style.css's soft
   gradient so the side margins read as part of the frame. Mobile goes square, where
   a square photo fills the width edge to edge with no margin at all. */
.project-detail__gallery--banner .project-detail__main-img {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
}

.project-detail__gallery--banner .project-detail__main-img img,
.project-detail__gallery--banner #projectMainImg {
    background: transparent;
}

.project-detail__gallery--banner .project-detail__main-img img,
.project-detail__gallery--banner #projectMainImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

.project-detail__gallery--banner .project-detail__thumbs {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .project-detail__gallery--banner {
        margin-bottom: 24px;
    }
    .project-detail__gallery--banner .project-detail__main-img {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }
}

/* ---------------------------------------------------------------------------
   About page — certificate block (e.g. ISO 9001 / TUV Austria).
   Sits inside the values section, just before the "Official partner" block.
   --------------------------------------------------------------------------- */
.about-cert {
    margin: 0 0 40px;
    text-align: center;
}

.about-cert__title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0B1B3B;
}

.about-cert__frame {
    display: inline-block;
    max-width: 440px;
    margin: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(11, 27, 59, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 50px -22px rgba(11, 27, 59, 0.30);
}

.about-cert__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .about-cert { margin-bottom: 30px; }
    .about-cert__title { margin-bottom: 16px; font-size: 19px; }
    .about-cert__frame { max-width: 300px; padding: 10px; border-radius: 14px; }
}

/* ---------------------------------------------------------------------------
   Single project — narrow + center the main (left) content column.
   The two-column grid (.project-body__container = 72% / 28%) is only active at
   >=993px; below that it already stacks to a single full-width column, so this
   is desktop-only. Content (title, banner, text) is capped and centered within
   the left track instead of filling the full 72%.
   --------------------------------------------------------------------------- */
@media (min-width: 993px) {
    .project-body__main {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   Industry page — product grid
   The shop's .similar-products__grid is a fixed 4-up built for a full-width
   container. On single-industry it sits in the 720px main column beside the
   sidebar, where 4-up squeezes cards to ~160px. Size by track instead so the
   column count follows the available width at every breakpoint.
   --------------------------------------------------------------------------- */
.project-body__main .similar-products__grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* ---------------------------------------------------------------------------
   Homepage section titles — highlighted word
   style.css already defines `em` as the blue highlight for .products__title
   and .categories__title. The about / projects / reviews headings use the same
   treatment, so they need the same rule.
   --------------------------------------------------------------------------- */
.about__title em,
.projects__title em,
.reviews__title em {
    font-style: normal;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Product card category tag
   `.card__tag` is position:absolute and was anchored by `.card__media`
   (position:relative) in the prototype. The card markup now places the tag
   inside `.card__body`, which is not positioned — so every tag escaped its
   card, stacked at the page's top-left (14,14) over the topbar, and the cards
   lost their category label. Render it in flow where it now lives.
   --------------------------------------------------------------------------- */
.card__body > .card__tag {
    position: static;
    align-self: flex-start;
}

/* Hero stats on small screens: the prototype rule (style.css:6617) sets each
   stat to 50% because the hero had four of them (2x2). With three, that leaves
   a lone orphan on a second row — so let them share one row, as on desktop. */
@media (max-width: 640px) {
    .hero__stat {
        flex: 1 1 0;
    }
}

/* ---------------------------------------------------------------------------
   Reviews carousel controls
   main.js bails out of initCarousel() unless BOTH arrow buttons exist
   (`if (!viewport || !prevBtn || !nextBtn) return;`), so the reviews slider had
   no arrows, no drag-scroll and no autoplay. The buttons now exist; these
   styles mirror .products__nav-btn so all three carousels look identical.
   --------------------------------------------------------------------------- */
.reviews__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}
.reviews__header .reviews__title {
    margin-bottom: 0;
}
.reviews__nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.reviews__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(11, 27, 59, 0.15);
    background: transparent;
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.reviews__nav-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.reviews__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.reviews__nav-btn:disabled:hover {
    background: transparent;
    border-color: rgba(11, 27, 59, 0.15);
    color: var(--color-dark);
}
@media (max-width: 767px) {
    .reviews__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Hero poster image
   The hero paints its still through a real <img class="hero__poster"> (a
   source-less <video> is not a dependable LCP element on mobile). That image
   carries width/height 1920x1026 for CLS, so without positioning it lays out
   inline at full size and forces the hero open. Mirror .hero__video exactly:
   the <img> sits behind the <video>, which covers it once the source loads.
   --------------------------------------------------------------------------- */
.hero__poster {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* ---------------------------------------------------------------------------
   iOS focus zoom — text fields must be at least 16px on touch viewports.
   Safari zooms the page in whenever a focused field's font-size is under 16px,
   and it never zooms back out on blur or submit, so the visitor is left stranded
   at 1.4x with the layout cut off. The viewport meta deliberately keeps pinch
   zoom enabled (accessibility), so the font size is the only correct lever.
   Capped at 1023px rather than the usual 767px because an iPhone in landscape is
   ~930px wide and auto-zooms exactly the same.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    select,
    textarea,
    .iti__selected-dial-code {
        /* `!important` is deliberate: this is a hard floor, not a style preference.
           style.css sets `.contact-card__field textarea` (12px) and
           `.hero__form .iti__selected-dial-code` (14px) at higher specificity, and
           style.css is the prototype file that must never be edited — so an override
           layer can only win here by weight. It also has to beat the async
           intl-tel-input stylesheet, which loads after this file. */
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------------
   Carousels must not trap the page scroll on touch.
   style.css sets `touch-action: pan-x` on these three viewports (1269 / 1511 /
   1675), which tells the browser that a touch starting here may ONLY pan
   horizontally — so a finger landing anywhere on these full-width sections could
   not scroll the page down at all. `auto` restores the normal split: the browser
   pans this element sideways and lets the page scroll vertically.
   `auto` alone was NOT enough — it leaves the axis decision to the browser's own
   heuristics, and iOS kept letting the sideways component of a vertical swipe
   through, sliding the cards while the visitor tried to scroll the page.
   `pan-y` is decisive: the browser may ONLY pan the page vertically from a touch
   starting here, so it can never scroll the track sideways on its own. Horizontal
   movement is driven by the axis-locked drag handler in main.js instead.
   `pinch-zoom` is listed explicitly because `pan-y` on its own would disable it,
   undoing the accessibility position taken in the 16px form-field fix above.
   --------------------------------------------------------------------------- */
.products__viewport,
.projects__viewport,
.reviews__viewport {
    touch-action: pan-y pinch-zoom;
}

/* Footer without the blog column (Bluewaters → Features → footer_blog off). */
@media (min-width: 993px) {
    .footer__grid.footer__grid--3 {
        grid-template-columns: 1.2fr 1fr 1.3fr;
    }
}

/* Keep the card arrow on the right when prices are switched off. */
.card__footer .card__arrow { margin-left: auto; }
.prod-row__footer .prod-row__btn { margin-left: auto; }

/* Armenian (bluewaters.am): the CAPS display font that gives .ge its all-caps
   headings has no Armenian glyphs, so Armenian falls back to Noto Sans Armenian
   in mixed case. Uppercase the display-font elements that don't already do it,
   so headings look the same as on .ge. Georgian and English are unaffected. */
html[lang="hy"] :is(.hero__title, .categories__title, .cat-card__title, .products__title,
    .card__title, .card__price-value, .about-hero__badge strong, .products-archive__title,
    .thank-you__title) {
    text-transform: uppercase;
}