/* ==========================================================================
   Love Counter — responsive.css
   Breakpoints: 1024 (tablet/menu), 768 (small tablet), 560 (mobile).

   The navigation is the one exception: it switches to the drawer on the
   `html.nav-drawer` class rather than on a media query, because translated
   labels can overrun the bar at any width. i18n.js sets that class from the
   viewport AND from a live measurement of the menu.
   ========================================================================== */

/* ---------- Drawer navigation ---------- */
html.nav-drawer .nav__toggle { display: grid; }
html.nav-drawer .nav__cta { display: none; }

html.nav-drawer .nav__menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(340px, 86vw);
  background: var(--plum);
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 1.25rem;
  box-shadow: -8px 0 40px rgba(42, 17, 40, 0.4);
  transform: translateX(100%);
  transition: transform 300ms var(--ease);
  z-index: 99;
  overflow-y: auto;
}
html.nav-drawer .nav__menu.is-open { transform: translateX(0); }
html.nav-drawer .nav__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
html.nav-drawer .nav__menu-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  font-size: 1.1rem;
}
html.nav-drawer .nav__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(231, 71, 126, 0.16);
  color: var(--white);
}
html.nav-drawer .nav__close svg { width: 22px; height: 22px; }
html.nav-drawer .nav__link {
  width: 100%;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  /* A full-width row reads better as a rounded bar than as a stretched
     pill, so the drawer opts out of the desktop pill radius. */
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  /* Long translated labels wrap here instead of overflowing the drawer. */
  white-space: normal;
}
/* Fixed icon box keeps every label starting on the same vertical line. */
html.nav-drawer .nav__icon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--rose);
  transition: color var(--dur) var(--ease);
}
html.nav-drawer .nav__link:hover .nav__icon,
html.nav-drawer .nav__link:focus-visible .nav__icon,
html.nav-drawer .nav__link[aria-current="page"] .nav__icon { color: var(--white); }
html.nav-drawer .nav__menu-cta { display: block; margin-top: 0.75rem; }
html.nav-drawer .nav__menu-cta .btn { width: 100%; }

/* In the bar the menu must not shrink, otherwise the overflow that triggers
   the hand-over to the drawer can never be measured. */
html:not(.nav-drawer) .nav__menu { flex: none; }
html:not(.nav-drawer) .nav__link { white-space: nowrap; }

/* ---------- Viewport breakpoints ---------- */
@media (max-width: 1024px) {
  /* Brand takes its own row, the four link columns share the next one —
     a 3-column grid left the fourth column stranded with two empty cells. */
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
  .accuracy-layout { grid-template-columns: 1fr; }
  .accuracy-layout__media { max-width: 420px; margin-inline: auto; }
  .review-card { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 768px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .reviews__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .review-card { flex-basis: 100%; }
  .hero__actions .btn,
  .cta-final .hero__actions .btn { width: 100%; }
  .btn { width: 100%; }
  .nav__actions .btn { width: auto; }
  .brand__name { font-size: 1.05rem; }
}