/* ==========================================================================
   Mobile / responsive overrides
   - Loaded AFTER the inline <style> in each page, so these win on small
     screens while the desktop design stays exactly as-is.
   - Touch devices (phones + tablets) also get the "How it works" section
     un-pinned: a 200vh scroll-pinned section is awkward on small screens, so
     the steps are stacked and shown all at once instead.
   ========================================================================== */

/* ---- Global overflow guards (all viewports) ----------------------------
   Use `overflow-x: clip` (not `hidden`): `hidden` forces the other axis to
   compute as `auto`, turning html/body into a scroll container and breaking
   `position: sticky` on the pinned "How it works" section. `clip` hides the
   same horizontal overflow without creating a scroll container. */
html, body { max-width: 100%; overflow-x: clip; }

/* Long, unbreakable strings (emails) must never push the layout wide */
.info-item span,
.contact-item span,
.footer-col p { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   "How it works" — un-pin on phones AND any touch device
   (stack the steps and show them all; the pinned scroll effect is desktop-only)
   ========================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .how-it-works { height: auto; }
    .hiw-pin { position: static; height: auto; padding: 64px 0; }
    .hiw-header { position: static; top: auto; margin-bottom: 8px; }
    .hiw-body { margin-top: 24px; grid-template-columns: 1fr; gap: 28px; max-width: 100%; }
    .hiw-left { height: auto; }
    .hiw-visual { position: static; top: auto; height: auto; }

    /* Show every step fully, no faded/animated states */
    .how-it-works .hiw-step { opacity: 1; transform: none; }
    .how-it-works .hiw-step h3 { font-size: 20px; color: #5A4634; }
    .how-it-works .hiw-step p { display: block; }
    .hiw-steps { gap: 26px; }

    /* Show only the first illustration (others are animation-only) */
    .hiw-circle { width: 240px; height: 240px; }
}

/* ==========================================================================
   Phone layout (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* ---- Shared section headings + ornaments ------------------------- */
    .hiw-title-wrap { gap: 12px; }
    .hiw-title-wrap h2,
    .ornamental-title h2,
    .co-header h2,
    .pg-header h2,
    .ct-title, .ct-title-text,
    .about-title,
    .why-title,
    .contact-title { font-size: 28px; line-height: 1.2; }

    .hiw-ornament { width: 42px; height: 42px; }
    .ct-ornament, .about-ornament, .ornament-svg { width: 38px; height: 38px; }

    /* ---- Hero -------------------------------------------------------- */
    .hero-badge { flex-wrap: wrap; justify-content: center; font-size: 12px; padding: 8px 16px; max-width: 92%; line-height: 1.5; }
    .hero-title { font-size: 1.9rem; }
    .hero-subtitle { font-size: 15px; }
    .cta-button { padding: 13px 26px; font-size: 14px; }

    /* ---- Trust ------------------------------------------------------- */
    .trust-section { padding: 70px 0; }
    .gold-divider { max-width: 100%; }

    /* ---- Services ---------------------------------------------------- */
    .ceremony-options { padding: 64px 16px; }
    .co-header { margin-bottom: 32px; }
    .co-card { padding: 28px 22px; }
    .co-subtoggle { gap: 26px; }

    /* ---- Photo gallery (home) --------------------------------------- */
    .photo-gallery-section { padding: 70px 0; }
    .pg-item img { height: 260px; }

    /* ---- Testimonials ----------------------------------------------- */
    .client-testimonials { padding: 70px 0 80px; }
    .ct-container { padding: 0 16px; }
    .ct-subtitle { margin-bottom: 40px; }
    /* One testimonial per view: stack image over content; arrows hidden,
       dots + swipe handle navigation (see .ct-cell / .ct-dots / .ct-nav). */
    .ct-card { flex-direction: column; }
    .ct-image { width: 100%; min-height: 0; }
    /* Portrait photos: bias the crop toward the top so faces stay in frame */
    .ct-image img { height: 240px; object-position: center 28%; }
    .ct-content { width: 100%; padding: 26px 22px; }
    .ct-content p { font-size: 17px; line-height: 1.7; }

    /* ---- About ------------------------------------------------------ */
    .about-us { padding: 64px 0; }
    .about-title { flex-wrap: wrap; gap: 12px; }
    .about-subtitle { margin-bottom: 36px; padding: 0 16px; }
    .about-grid { grid-template-columns: 1fr; margin: 24px 16px; background: rgba(255,255,255,0.85); }
    .about-card { margin: 22px; }
    .about-item p { margin-left: 46px; }
    .about-image { max-width: 280px; }
    .about-cta-btn { margin-top: 36px; }

    /* ---- Why trust us ----------------------------------------------- */
    .why-trust-us { padding: 90px 16px; }
    .why-subtitle { margin-bottom: 48px; }
    .why-grid { grid-template-columns: 1fr; gap: 22px; }
    .why-card { padding: 36px 24px; }

    /* ---- Contact ----------------------------------------------------- */
    .contact-section { padding: 64px 16px; }
    .contact-card { grid-template-columns: 1fr; gap: 26px; padding: 18px; }
    .contact-image img { height: 240px; }
    .contact-info { padding-left: 0; }

    /* ---- Footer ------------------------------------------------------ */
    .site-footer { padding: 64px 16px 32px; }
    .footer-container { gap: 30px; }
    .footer-contact { border-left: none; padding-left: 0; }

    /* ---- WhatsApp float (smaller, tucked into corner) --------------- */
    .whatsapp-float { width: 54px; height: 54px; bottom: 20px; right: 18px; }

    /* ---- Gallery page header (filter buttons) ----------------------- */
    .page-header { padding: 120px 16px 60px; }
    .page-header .flex.gap-4 { flex-wrap: wrap; }
    .page-header button { padding-left: 20px; padding-right: 20px; font-size: 14px; }
    .gallery-section { padding: 56px 16px; }
}

/* ==========================================================================
   Small phones (<= 480px) — final polish
   ========================================================================== */
@media (max-width: 480px) {
    .hiw-title-wrap h2,
    .ornamental-title h2,
    .co-header h2,
    .pg-header h2,
    .ct-title, .ct-title-text,
    .about-title,
    .why-title,
    .contact-title,
    .page-title { font-size: 25px; }

    .hero-title { font-size: 1.7rem; }
    .co-toggle button { padding: 10px 20px; font-size: 14px; }
    .pg-item img { height: 230px; }
    .ct-image img { height: 200px; }
}