/* ==========================================================================
   NOUVEAU (نُ‌وو) — responsive.css  (mobile / tablet / desktop)
   Every width-based @media rule of the project lives here, loaded after style.css.
   Breakpoints follow Bootstrap 5:  sm 576 · md 768 · lg 992
   1. MOBILE            (≤ 575px)
   2. MOBILE + SMALL TABLET (≤ 767px)
   3. MOBILE + TABLET   (≤ 991px)  — burger menu
   4. ≥ 640px
   5. DESKTOP           (≥ 992px)
   6. WIDE              (≥ 1100px)
   ========================================================================== */

/* 1. MOBILE (≤ 575px) ---------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Home — hero arrows move to the bottom corners */
  .hero .round-btn { width: 36px; height: 36px; top: auto; bottom: 46px; translate: none; }
  .hero .round-btn[data-prev] { right: 16px; }
  .hero .round-btn[data-next] { left: 16px; }
  .hero .round-btn .icon { font-size: 1em; }

  /* Home — articles carousel: neighbours start under the title (no room beside it) */
  .acar__stage { margin-top: 0; }

  /* Tables in content — tighter cells */
  :is(.nv-table, .article-body, .nv-page__content, .about-block__text) :is(th, td) { padding: 10px 12px; font-size: 13px; }

  /* Article — cover caption and byline take less room */
  .article-cover figcaption { padding: 14px 16px; }
  .article-byline { gap: 10px 16px; }
  .author-box { padding: 16px; gap: 12px; }
  .author-box__img { width: 52px; height: 52px; }

  /* Products — narrow arch: smaller gaps, flatter curve; the specs card shows 3 columns */
  .products {
    --p-tabs-mt: clamp(8px, calc(2 * var(--vu)), 18px);
    --p-pb: clamp(10px, calc(2.6 * var(--vu)), 24px);
    --p-rv: max(64px, min(var(--p-rh), calc(var(--p-panel-h) * .5 - (670px - var(--p-panel-h)) * .4))); /* very short phones: flatter curve */
    --p-safe: .4;
    --p-brand: clamp(34px, calc(5.6 * var(--vu)), 52px);
  }
  .p-panel { --p-side: 16px; }
  .p-pack { flex: 0 1 calc(var(--arch-w) * .95); margin-block: auto; }   /* tall narrow arch: a product box about as tall as the arch is wide, centred in the free height */
  .p-pack, .p-pack__img, .p-model { align-items: center; }   /* mobile: product sits in the middle of its box, close under the title (not pushed to the bottom) */
  .p-pack { margin-block: 4px auto; }
  .p-detail { padding-top: 24px; }
  .faq-cta { flex-direction: column; align-items: stretch; padding: 22px 18px; text-align: center; }
  .p-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; padding: 22px 8px; border-radius: 18px; }
  .p-spec__icon, .p-spec__icon img { height: 52px; max-height: 52px; }
  .p-spec dt { gap: 8px; padding-bottom: 12px; font-size: 12px; }
  .p-spec dd { padding-top: 12px; font-size: 15px; }
}

/* 2. MOBILE + SMALL TABLET (≤ 767px) ------------------------------------- */
@media (max-width: 767.98px) {
  .p-arches::before, .p-arches::after { display: none; }
}

/* 3. MOBILE + TABLET (≤ 991px) — burger menu ---------------------------- */
@media (max-width: 991.98px) {
  /* One menu for every page: a panel that opens OVER the page, right under the header row.
     The header keeps its height, so the logo and the page never move (home, products and all pages). */
  .nv-nav-wrap {
    position: absolute; top: calc(100% - 4px); inset-inline: var(--nv-gutter); z-index: 60;
    background: rgba(255, 255, 255, .96);
    border-radius: 12px;
    padding-inline: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    backdrop-filter: blur(8px);
  }

  /* Article — the TOC is a card under the byline (not sticky), opened / closed with its title */
  .toc { padding: 14px 16px; border: 1px solid #ecebf0; border-radius: 12px; background: #fff; }
  .toc h2 { margin: 0; }
  .toc__toggle { cursor: pointer; }
  .toc__toggle .icon { display: inline-block; font-size: 18px; color: var(--nv-muted); rotate: -90deg; transition: rotate .2s; }
  .toc__toggle[aria-expanded="true"] .icon { rotate: 90deg; }
  .toc ul { margin-top: 10px; }

  /* About: the decorative "U" outlines only fit the two-column desktop layout */
  body.page-about { background: linear-gradient(180deg, var(--nv-cream) 0, var(--nv-cream-2) 900px, #fff 100%) no-repeat, #fff; }
}

/* 3b. LARGE PHONE + TABLET (568px – 991px) — one column, but wide screen --------- */
@media (min-width: 568px) and (max-width: 991.98px) {
  /* Home products: the arch is centred, so its text block is centred under it too */
  .home-products__text { max-width: 603px; margin-inline: auto; text-align: center; }
  .home-products__text p { text-align: center; }
  /* Products: the arch and tabs are centred, so the details are centred under them too;
     the arch uses the screen's free height (no empty band under the tabs on tall tablets) */
  .products { --p-panel-h: min(940px, var(--p-budget)); }
  .p-pack { flex-grow: 1; }
  .p-info__head { justify-content: center; }
  .p-detail__title, .p-detail__text { text-align: center; }
  .p-detail__text { margin-inline: auto; }
  /* Contact: the picture would be a huge square above the cards — a wide crop instead */
  .contact__art img { height: auto; min-height: 0; aspect-ratio: 16 / 10; object-position: 50% 15%; }   /* keeps the «U» on top of the stairs */
}

/* 4. ≥ 568px / ≥ 640px ------------------------------------------------------ */
@media (min-width: 568px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two cards per row from large phones */
}
@media (min-width: 640px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 5. DESKTOP (≥ 992px) --------------------------------------------------- */
@media (min-width: 992px) {
  /* Header: logo | menu | search */
  .nv-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nv-logo { grid-column: 1; grid-row: 1; justify-self: start; order: 0 !important; }
  .nv-nav-wrap { grid-column: 2; grid-row: 1; flex: none; order: 0; }
  .nv-nav { flex-direction: row; gap: 66px; padding: 0; }   /* design: 16 px items, 66 px apart */
  .nv-nav a { padding: 0; font-size: 16px; }
  .nv-search-btn { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; order: 0 !important; }

  /* Home — products slider */
  /* Full height: the section is exactly one screen tall (the header scrolls away), so sun, arch, arrows and dots
     are all visible without scrolling.
     The arch keeps the design's 603×700 proportions and shrinks on shorter screens. */
  .home-products {
    --hp-vh: 100vh;
    --hp-pad: clamp(56px, calc(var(--hp-vh) * .075), 90px);                                   /* room for the sun above the arch */
    --ha-h: max(420px, min(700px, calc(var(--hp-vh) - 2 * var(--hp-pad)))); /* arch height */
    --ha-w: calc(var(--ha-h) * 603 / 700);                                                    /* arch width */
    display: flex; align-items: center; min-height: var(--hp-vh); padding-block: var(--hp-pad);
  }
  @supports (height: 100svh) { .home-products { --hp-vh: 100svh; } }
  .home-products > .nv-container { flex: 1; }
  .pslide { grid-template-columns: minmax(0, var(--ha-w)) minmax(0, 1fr); gap: 67px; }   /* design: text ends 67 px before the arch */
  .home-products .features { margin: min(98px, 10.9vh) -48px 0 -16px; }   /* design: the features row is wider than the text (34 → 766 px) and 98 px under the button */
  .home-arch { max-width: var(--ha-w); }
  .home-arch__sun { width: calc(min(100%, var(--ha-w)) * .156); }
  .arch-ctrl { left: auto; right: 0; translate: none; width: min(var(--ha-w), 100%); }

  /* About */
  .about-block__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .about-block--flip .about-block__text { order: 2; }
  .about-block__media { padding-inline: 0; }

  /* Blog / Article */
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 966px) 240px; justify-content: center; column-gap: 48px; row-gap: 0; }
  .article-head, .article-body, .article-foot { grid-column: 1; }
  .article-body { margin-top: var(--nv-space-block); }
  .toc {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
    position: sticky; top: calc(var(--nv-header-h) + 24px);
    max-height: calc(100vh - var(--nv-header-h) - 48px); overflow-y: auto; scrollbar-width: thin;
  }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .contact__form { order: 0; }
  .contact__grid > .contact-cards { grid-column: 1 / -1; margin-top: 6px; }   /* 16px gap + 6 = 22px (previous design) */

  /* Contact — design 2026 (2 cards or fewer): form on the right over the full height,
     image + cards on the left; the message box takes the free height. */
  .contact--compact .contact__grid { grid-template-rows: auto 1fr; }
  .contact--compact .contact__form { grid-column: 1; grid-row: 1 / span 2; }
  .contact--compact .contact__art { grid-column: 2; grid-row: 1; margin-top: var(--contact-art-top, 37px); }  /* image starts under the title row */
  .contact--compact .contact__art img { height: auto; min-height: 0; aspect-ratio: 662 / 642; }
  .contact--compact .contact__grid > .contact-cards { grid-column: 2; grid-row: 2; align-self: start; margin: 0; gap: 16px; grid-template-columns: repeat(var(--cards, 2), minmax(0, 1fr)); }
  .contact--compact .contact__form,
  .contact--compact .contact__form :is(.wpcf7, form, .field:has(textarea), .wpcf7-form-control-wrap:has(textarea)) { display: flex; flex-direction: column; flex: 1 1 auto; }
  .contact--compact .contact__form textarea.form-control { flex: 1 1 0; height: auto; min-height: 180px; resize: none; }   /* basis 0: «rows» of the CF7 textarea does not make the form taller */
  .contact--compact .contact__form .field { margin-bottom: 33px; }        /* design: one row every 118px */
  .contact--compact .contact__form .field:has(textarea) { margin-bottom: 16px; }
  .contact--compact h1 { font-size: 20px; font-weight: 400; }
}

/* 6. WIDE (≥ 1100px) ----------------------------------------------------- */
@media (min-width: 1100px) {
  .contact-cards { grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr)); }
}