/**
 * Mobile Hardening — iPhone Demo Pass
 * Loaded globally, desktop-safe, mobile-first fixes only.
 */

/* ── 1. Global Safeguards ─────────────────────────────────────────────────── */

html, body {
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent iOS zoom on input focus */
input, select, textarea, button {
    font-size: 16px;
}

/* Images never overflow their container */
img {
    max-width: 100%;
    height: auto;
}

/* ── 2. Header — Mobile ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-container {
        padding: 10px 16px;
        min-height: 56px;
    }

    /* Logo — never wraps or overflows */
    .logo {
        flex: 0 0 auto;
        max-width: 160px;
        margin-right: 0;
    }

    .logo-image {
        max-height: 44px !important;
        width: auto !important;
    }

    /* Collapse CTA text on small phones — icon only */
    .cta-button span,
    .global-login-btn span {
        display: none;
    }

    .cta-button,
    .global-login-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta-button i,
    .global-login-btn i {
        margin: 0;
    }

    /* Search + menu buttons — comfortable tap targets */
    .search-toggle,
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        margin-left: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Search panel — full width, readable on phone */
    .search-panel {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 1001;
        padding: 12px 0;
    }

    .search-container {
        padding: 0 16px;
    }

    .search-input {
        font-size: 16px !important;
        padding: 12px 14px;
        background-color: #ffffff !important;
        color: #1f1f1f !important;
    }

    .search-input::placeholder {
        color: #5a5a5a !important;
        opacity: 1 !important;
    }

    .search-submit {
        padding: 12px 16px;
        min-width: 44px;
    }

    .search-close {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-results-dropdown {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Mobile nav drawer — comfortable one-handed use */
    .main-nav {
        padding: 70px 24px 40px;
        width: min(300px, 85vw);
    }

    .nav-link {
        font-size: 17px !important;
        padding: 10px 0 !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dropdown-link {
        font-size: 15px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 12px 10px 16px !important;
    }

    .dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
    }
}

/* ── 3. Body Padding — compensate for sticky header ──────────────────────── */

/* JS sets this via header.offsetHeight; override the CSS-zero so content isn't hidden */
@media (max-width: 767px) {
    body:not(.mobile-nav-active) {
        /* deliberately not setting padding-top here — header.js handles it dynamically */
    }
}

/* ── 4. Footer — Mobile ───────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .footer-container {
        padding: 0 20px;
    }

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .footer-brand {
        align-items: flex-start;
        text-align: left;
    }

    .footer-logo-image {
        height: 64px !important;
    }

    .footer-nav-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
    }

    .footer-nav-title {
        font-size: 0.85rem;
        letter-spacing: 0.06em;
        margin-bottom: 0.5rem;
    }

    .footer-nav-list a {
        font-size: 0.9rem;
        padding: 4px 0;
        display: block;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding-top: 1.5rem;
    }

    .essential-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1.25rem;
    }

    .essential-links a {
        font-size: 0.85rem;
    }

    .copyright {
        font-size: 0.82rem;
        color: rgba(255, 255, 240, 0.65);
    }

    /* Hide back-to-top on mobile — doesn't stack well near browser chrome */
    .back-to-top {
        bottom: 20px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* ── 5. Homepage Hero — Mobile ─────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Hero section: don't let hero text overflow */
    .hero-section h1,
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* CTA button groups: stack vertically */
    .hero-cta-group,
    .cta-buttons,
    .destination-hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
    }

    .hero-cta-group a,
    .cta-buttons a,
    .destination-hero-primary,
    .destination-hero-secondary,
    .destination-hero-tertiary {
        width: 100% !important;
        text-align: center !important;
        min-height: 48px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
    }
}

/* ── 6. Saints Page — Mobile ──────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Hero gallery: single column, smaller cards */
    .saints-hero .hero-container {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .saints-gallery {
        flex-direction: column !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .saints-gallery .preview-card.featured {
        min-height: 240px;
        height: 240px;
    }

    .saints-gallery .preview-card {
        min-height: 160px;
        height: 160px;
    }

    .saints-column {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Fact grid: 2 col */
    .saints-hero .facts-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Filter section — collapsed by default */
    .filter-section {
        width: 100%;
        overflow: visible;
    }

    /* Filter dropdown: on mobile, force single-column layout when open */
    .filter-dropdown .filter-columns {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Search + toggle row */
    .filter-controls-wrapper {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-toggles {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-toggle,
    #layout-toggle {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 14px;
    }

    .sort-wrapper {
        width: 100%;
    }

    .sort-wrapper select {
        width: 100%;
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Hide "Showing 0 of X" permanently on mobile until JS sets real count */
    .results-count[data-zero="true"],
    #saints-results-count[data-zero="true"],
    #destinations-results-count[data-zero="true"] {
        display: none !important;
    }

    /* Alphabet selector — horizontal scroll, not wrapping chaos */
    .alphabet-selector {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Saint cards grid: 1 col on phone, 2 col on wider */
    .saints-grid {
        grid-template-columns: 1fr !important;
    }

    /* Saint card actions: stack buttons */
    .saint-card .saint-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .saint-card .view-saint,
    .saint-card .favorite-toggle {
        min-height: 44px;
    }

    /* Saint of the Day: single column layout */
    .saint-feature .saint-card-inner {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .saint-feature .saint-visual {
        width: 100% !important;
        max-width: 280px;
        margin: 0 auto;
    }

    .saint-feature .saint-image-container {
        aspect-ratio: 3 / 4;
        overflow: hidden;
        border-radius: 8px;
    }

    .saint-feature .saint-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* FMS CTA section */
    .fms-cta-section {
        padding: 3rem 20px !important;
        text-align: center;
    }

    .fms-cta-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        min-height: 48px;
        padding: 14px 20px !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .saints-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── 7. Destinations Page — Mobile ────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Destination hero: readable, not oversized */
    .destinations-hero--guided {
        min-height: 560px !important;
    }

    .destinations-hero--guided .hero-content-wrapper {
        padding-top: 3rem !important;
        padding-bottom: 6rem !important;
    }

    /* Hero anchor links — hide description on mobile, keep numbers */
    .destination-hero-route {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 100%;
    }

    .destination-hero-route a {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .destination-hero-route small {
        display: none;
    }

    /* Map section: don't overflow */
    .destination-map-feature {
        overflow: hidden;
    }

    .destination-map-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem;
    }

    .destination-map-canvas {
        width: 100% !important;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }

    .destination-map-atlas {
        width: 100% !important;
        height: auto !important;
        max-height: 240px;
    }

    /* Map pins: smaller on mobile */
    .destination-map-pin .destination-map-label {
        display: none !important;
    }

    .destination-map-dot {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    /* Map filter buttons: horizontal scroll */
    .destination-map-filter {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .destination-map-filter button {
        flex-shrink: 0;
        min-height: 36px;
        padding: 6px 14px;
        font-size: 13px;
    }

    /* Region cards: hide on mobile to save space */
    .destination-map-regions {
        display: none !important;
    }

    /* Featured grid: 1 col */
    .destination-featured-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .destination-featured-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        min-height: 80px;
    }

    .destination-featured-card img {
        width: 80px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        flex-shrink: 0;
    }

    .destination-featured-card span,
    .destination-featured-card h3,
    .destination-featured-card p {
        text-align: left !important;
    }

    .destination-featured-card h3 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    /* Category cards: 1 column on phone */
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .category-card {
        min-height: 0 !important;
    }

    /* Destinations grid: 1 col on phones */
    .destinations-grid {
        grid-template-columns: 1fr !important;
    }

    /* Hero facts: 2x2 grid */
    .destinations-hero .facts-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .destination-featured-grid,
    .destinations-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── 8. Destination Detail Pages ──────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Fix "Add to Journey Save" jammed text */
    .destination-actions,
    .hero-action-buttons,
    .detail-cta-group,
    .action-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .destination-actions .btn,
    .destination-actions a,
    .hero-action-buttons .btn,
    .hero-action-buttons a {
        flex: 1 1 auto;
        min-height: 44px;
        text-align: center;
        white-space: nowrap;
    }

    /* Separate "Add to Journey" and "Save" if rendered together */
    .btn-add-journey,
    .btn-save,
    [class*="add-journey"],
    [class*="save-journey"] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Key facts / sidebar: stack below main content */
    .detail-layout,
    .destination-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Map embed: contained */
    .destination-map,
    .detail-map,
    #detail-map,
    iframe[src*="map"],
    iframe[src*="openstreetmap"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Leaflet map container */
    .leaflet-container {
        max-width: 100% !important;
    }

    /* Best-for bullets: comfortable spacing */
    .best-for-list li,
    .do-not-miss li,
    .visit-plan li {
        padding: 6px 0;
        font-size: 0.95rem;
    }

    /* Connected saints cards: horizontal scroll on mobile */
    .connected-saints,
    .related-saints,
    .nearby-saints {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .connected-saints .saint-card,
    .related-saints .saint-card,
    .nearby-saints .saint-card {
        flex-shrink: 0;
        width: 160px;
    }

    /* Image credit — quiet */
    .image-credit,
    .photo-credit {
        font-size: 0.72rem;
        opacity: 0.65;
    }
}

/* ── 9. Find a Saint Wizard — Mobile ─────────────────────────────────────── */

@media (max-width: 767px) {
    .fms-hero {
        padding: 3rem 0 2.5rem !important;
    }

    .fms-hero-title {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    }

    .fms-wizard-section {
        padding: 2rem 0 4rem !important;
    }

    /* Progress dots: shrink for phone */
    .fms-progress {
        margin-bottom: 2rem;
        gap: 0;
    }

    .fms-progress-label {
        font-size: 0.72rem;
    }

    /* Step title */
    .fms-step-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }

    /* Choice cards: 1 col on phones, 2 col at 480+ */
    .fms-choices {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fms-choice {
        min-height: 56px !important;
        padding: 14px 16px !important;
    }

    /* Navigation buttons: stack or full width */
    .fms-nav {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

    .fms-btn,
    .fms-next,
    .fms-back,
    .fms-restart {
        width: 100% !important;
        min-height: 48px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Result cards: ensure readable contrast */
    .fms-result-card,
    .fms-recommendation {
        background: var(--accent-secondary, #2A3F3F) !important;
        color: var(--text-light, #FFFFF0) !important;
        border-radius: 10px;
        padding: 20px;
    }

    .fms-result-card h2,
    .fms-result-card h3,
    .fms-recommendation h2,
    .fms-recommendation h3 {
        color: var(--tertiary-color, #C9A053) !important;
    }

    .fms-result-card p,
    .fms-recommendation p {
        color: rgba(255, 255, 240, 0.9) !important;
    }

    /* Result saint card links: tappable */
    .fms-saint-card,
    .fms-place-card {
        min-height: 60px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 8px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .fms-choices {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── 10. My Journey Page — Mobile ────────────────────────────────────────── */

@media (max-width: 767px) {
    .my-journey-page {
        padding: 0 0 3rem;
    }

    .my-journey-header {
        padding: 2rem 20px 1.5rem;
        text-align: left;
    }

    .my-journey-header h1 {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    .my-journey-guest-notice {
        margin: 0 20px 1.5rem;
        padding: 14px 16px;
        border-radius: 8px;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .my-journey-empty {
        padding: 3rem 20px;
        text-align: center;
    }

    .my-journey-empty h2 {
        font-size: 1.4rem;
    }

    .btn-journey-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 12px 24px;
        margin-top: 1.5rem;
    }

    .my-journey-section-title {
        font-size: 1.2rem;
        padding: 1rem 20px;
    }

    .my-journey-items {
        padding: 0 20px;
    }
}

/* ── 11. Filter layout on mobile (show/hide already handled by saints-explorer.css) ── */

@media (max-width: 767px) {
    /* Full-width dropdown panel, less padding */
    .filter-dropdown.active {
        padding: 1.25rem !important;
        border-radius: 8px;
    }
}

/* ── 12. Zero-state message — hide "0 of 0" counter ─────────────────────── */

/* The results-count starts hidden via style="display:none" in the template.
   When JS renders real cards it shows it. If JS sets showing-count to 0,
   we force-hide with CSS so the attendee never sees it. */

#saints-results-count:not([style*="display: none"]) .showing-count:empty ~ .total-count:empty,
#destinations-results-count:not([style*="display: none"]) {
    /* covered by template change — belt + suspenders */
}

/* ── 13. CTA Sections — Mobile ───────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Stacks any multi-button group into a column */
    .cta-section .cta-buttons,
    .home-cta .cta-buttons,
    .saint-cta .cta-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .cta-section .cta-buttons a,
    .home-cta .cta-buttons a,
    .saint-cta .cta-buttons a {
        text-align: center !important;
        min-height: 48px !important;
    }
}

/* ── 14. Card Visual Consistency ─────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Consistent card image ratios */
    .saint-card .saint-image,
    .destination-card .destination-image {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .saint-card .saint-image img,
    .destination-card .destination-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .saint-card,
    .destination-card {
        border-radius: 10px;
        overflow: hidden;
    }

    /* Load-more button */
    .load-more-btn {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
        margin: 1.5rem 0;
    }
}

/* ── 15. Tablets (768–1023px) — avoid awkward mid-states ─────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    .footer-main {
        grid-template-columns: auto 1fr;
        gap: 2.5rem;
    }

    .footer-nav-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .saints-grid,
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .destination-featured-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .header-container {
        padding: 12px 24px;
    }
}

/* ── 16. Safe area insets — iPhone notch / home bar ─────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    .site-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}