/* =========================================================================
 Helmara - Responsive & i18n-readiness overrides
 Most component breakpoints already live inline in landing.css (mirroring
 the mobile-first Tailwind classes in the source components). This file
 holds cross-cutting breakpoint fixes validated at the QA widths called
 out in the master prompt (390 / 768 / 1280 / 1440+) plus RTL/print
 readiness notes that don't belong to a single component.
 ========================================================================= */

/* ---- Very small phones (<=380px) - tighten section gutters slightly ---- */
@media (max-width: 380px) {
 .hero__heading {
 font-size: 2.35rem;
 }

 .problem__shell {
 width: 94%;
 padding: 2.5rem 1.125rem;
 }

 .how-step__number {
 font-size: 4.25rem;
 }

 .final-cta__heading {
 font-size: 2.25rem;
 }

 .whatsapp__phone img,
 .whatsapp__dash {
 height: 190px;
 }
}

/* ---- Tablet portrait (768px) - module card visual keeps min-height ---- */
@media (min-width: 768px) and (max-width: 1023px) {
 .module-card {
 grid-template-columns: 1fr;
 }

 .module-card__visual-wrap {
 order: -1;
 }
}

/* ---- Header: avoid the primary nav + actions colliding around 1024–1119px ---- */
@media (min-width: 1024px) and (max-width: 1119px) {
 .primary-nav {
 gap: 1.5rem;
 }
}

/* ---- Large desktop (1440px+) - cap ambient glow spread, nothing else changes ---- */
@media (min-width: 1440px) {
 .hero__container,
 .section-inner,
 .site-header__inner,
 .site-footer__inner {
 padding-inline: 56px;
 }
}

/* ---- Landscape phones - shrink hero vertical rhythm ---- */
@media (max-height: 480px) and (orientation: landscape) {
 .hero {
 padding-top: 88px;
 }

 .hero__mobile-tiles {
 margin-top: 1.25rem;
 }
}

/* =========================================================================
 International SEO / RTL readiness
 Layout already prefers logical properties (padding-inline, margin-inline,
 inset-inline) throughout landing.css so a future `dir="rtl"` document
 mirrors correctly without visual rework. The rules below are the few
 remaining physical-direction exceptions that intentionally stay fixed
 (brand mark alignment + numeral direction), documented here rather than
 silently overridden.
 ========================================================================= */
[dir="rtl"] .brand-logo img {
 object-position: right;
}

[dir="rtl"] .primary-nav__link::after {
 transform-origin: center;
}

[dir="rtl"] .how-step__number,
[dir="rtl"] .pricing-cell__price,
[dir="rtl"] .pricing-select__price,
[dir="rtl"] .pricing-select__opt-top > span {
 font-variant-numeric: tabular-nums;
 direction: ltr;
 unicode-bidi: isolate;
}

/* ---- Print (footer/legal reachability without styling noise) ---- */
@media print {
 .site-header,
 .hero__connectors,
 .hero__tiles,
 .hero__orbit-layer,
 .theme-toggle,
 .locale-toggle,
 .lang-switch,
 .mobile-menu-toggle {
 display: none !important;
 }

 body {
 background: #fff !important;
 color: #000 !important;
 }
}