/* ============================================================
   MFL CONFLUENCE: Responsive Breakpoints
   ============================================================ */

/* ============================================================
   TABLET: 900px
   ============================================================ */
@media (max-width: 900px) {
  /* Nav: disable scroll transparency on mobile/tablet */
  .mfl-nav {
    padding: 0 24px;
    height: 68px;
    justify-content: space-between;
    gap: 0;
  }
  .mfl-nav.is-scrolled {
    background: rgba(5,12,14,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid transparent;
  }
  .mfl-nav.is-scrolled .mfl-logo-full {
    display: none !important;
  }
  .mfl-nav.is-scrolled .mfl-logo-scroll {
    display: block !important;
    height: 22px;
  }

  .mfl-nav-menu {
    display: none;
  }
  .mfl-nav-logo {
    order: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .mfl-nav-logo img {
    height: 48px;
  }
  .mfl-nav-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  /* Floating action buttons, below nav on tablet */
  .mfl-fab {
    top: 80px;
    font-size: 0.65rem;
    padding: 8px 14px;
    transition: top 0.3s ease;
  }
  .nav-scrolled .mfl-fab {
    top: 80px;
  }
  /* WP admin bar pushes everything down */
  .admin-bar .mfl-fab {
    top: 126px;
  }
  .admin-bar .nav-scrolled .mfl-fab {
    top: 126px;
  }

  /* Hero */
  .mfl-hero {
    padding: 60px 24px 48px;
    min-height: 400px;
  }
  .mfl-hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 20px;
  }
  .mfl-hero-logo {
    order: -1;
    align-self: center;
  }
  .mfl-hero-logo img {
    height: 160px;
  }
  .mfl-hero--video .mfl-hero-content {
    margin-top: 0;
  }

  /* Sections */
  .mfl-section {
    padding: 60px 24px;
  }
  .mfl-confluence-section {
    padding: 60px 24px;
  }

  /* Lodge cards */
  .mfl-lodges-grid {
    grid-template-columns: 1fr;
  }
  .mfl-lodge-img {
    height: 220px;
  }

  /* River cards: reset border-right removal for 2-col layout */
  .mfl-rivers-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mfl-river-card:nth-child(4n) {
    border-right: 1px solid var(--line);
  }
  .mfl-river-card:nth-child(2n) {
    border-right: none;
  }

  /* Amenities */
  .mfl-amenities-split {
    grid-template-columns: 1fr;
  }

  /* Property page: overview */
  .mfl-property-overview {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Property page: feature grid */
  .mfl-feature-grid {
    grid-template-columns: 1fr;
  }

  /* Property page: amenities list */
  .mfl-amenities-list {
    grid-template-columns: 1fr;
  }

  /* Testimonial */
  .mfl-testimonial-section {
    padding: 48px 24px;
  }

  /* Booking CTA */
  .mfl-booking-section {
    padding: 60px 24px;
  }

  /* Footer */
  .mfl-footer {
    padding: 48px 24px 32px;
  }
  .mfl-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  /* Page content */
  .mfl-page-content {
    padding: 40px 24px 60px;
  }
  .mfl-page-content.wide {
    padding: 40px 24px 60px;
  }

  /* Sub-page hero */
  .mfl-hero--subpage {
    min-height: 280px;
    padding: 80px 24px 36px;
  }

  /* Guide cards: 2 column at tablet */
  .mfl-guides-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mfl-guide-photo {
    height: 240px;
  }

  /* Bio modal */
  .mfl-bio-modal {
    padding: 36px 28px;
  }

  /* Booking options: stack at tablet */
  .mfl-booking-options {
    grid-template-columns: 1fr;
  }

  /* Contact cards: stack at tablet */
  .mfl-contact-grid {
    grid-template-columns: 1fr;
  }

  /* Policy grid: stack at tablet */
  .mfl-policy-grid {
    grid-template-columns: 1fr;
  }

  /* Waters columns: stack at tablet */
  .mfl-waters-columns {
    grid-template-columns: 1fr;
  }

  /* Season grid: stack at tablet */
  .mfl-season-grid {
    grid-template-columns: 1fr;
  }
  .mfl-team-grid {
    grid-template-columns: 1fr;
  }
  .mfl-gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Experience grid: 2 columns at tablet */
  .mfl-experience-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Planning grid: stack at tablet */
  .mfl-planning-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE: 600px
   ============================================================ */
@media (max-width: 600px) {
  /* Floating action buttons: tighter on mobile */
  .mfl-fab {
    font-size: 0.6rem;
    padding: 6px 10px;
    letter-spacing: 0.08em;
    transition: top 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s;
  }
  .mfl-fab-left {
    left: 12px;
  }
  .mfl-fab-right {
    right: 12px;
  }
  /* When scrolled on mobile, shrink FABs to ~70% so they get out
     of the way of content but stay visible + clickable. Lincoln
     2026-05-09: previous behavior fully hid them via opacity:0 +
     pointer-events:none, which made the CTAs unreachable mid-scroll
     on the device where most prospects browse. Shrink-not-hide is
     the compromise: credential/CTA stays usable, less obtrusive.
     transform-origin pins each side so the shrink anchors to the
     corner instead of pulling inward. */
  .nav-scrolled .mfl-fab {
    transform: scale(0.7);
  }
  .nav-scrolled .mfl-fab-left {
    transform-origin: left top;
  }
  .nav-scrolled .mfl-fab-right {
    transform-origin: right top;
  }

  /* River cards: single column, no right borders */
  .mfl-rivers-grid {
    grid-template-columns: 1fr;
  }
  .mfl-river-card {
    border-right: none;
  }

  /* Lodge cards */
  .mfl-lodge-body {
    padding: 36px 28px;
  }
  .mfl-lodge-img {
    height: 180px;
  }

  /* Amenity columns */
  .mfl-amenity-col {
    padding: 32px 24px;
  }

  /* Hero, CRITICAL: reduce h1 floor from 48px to 32px for 375px screens */
  .mfl-hero {
    padding: 48px 20px 36px;
    min-height: 360px;
  }
  .mfl-hero-h1 {
    font-size: clamp(32px, 9vw, 48px);
  }
  .mfl-hero-sub {
    font-size: 1.15rem;
  }
  .mfl-hero-logo img {
    height: 120px;
  }
  .mfl-hero-actions {
    flex-direction: column;
  }
  .mfl-hero-actions .btn-primary,
  .mfl-hero-actions .btn-ghost {
    text-align: center;
    width: 100%;
  }

  /* Video hero: reduce excessive min-height on mobile */
  .mfl-hero--video {
    min-height: 60vh;
  }
  .mfl-about-video-section {
    min-height: 50vh;
  }

  /* CRITICAL: About tagline, prevent horizontal scroll from nowrap */
  .mfl-about-tagline {
    font-size: 1.6rem;
    white-space: normal;
  }

  /* Section titles: tighten for mobile */
  .mfl-section-title {
    font-size: clamp(26px, 7vw, 32px);
  }

  /* Experience grid: single column on mobile */
  .mfl-experience-grid {
    grid-template-columns: 1fr;
  }
  .mfl-experience-card {
    padding: 32px 24px;
  }
  .mfl-planning-card {
    padding: 32px 24px;
  }

  /* Reduce top margins on grids */
  .mfl-lodges-grid,
  .mfl-rivers-grid,
  .mfl-amenities-split,
  .mfl-experience-grid,
  .mfl-planning-grid,
  .mfl-policy-grid,
  .mfl-waters-columns,
  .mfl-season-grid,
  .mfl-team-grid,
  .mfl-gallery-grid {
    margin-top: 36px;
  }

  /* Lodge stats: 1 per row on mobile. A fixed 2-column grid left a
     3rd stat wrapping alone next to an empty cell (2026-09-26 fix,
     see components.css); single-column avoids that regardless of
     whether 1, 2, or 3 .mfl-stat boxes are actually present. */
  .mfl-lodge-stats {
    grid-template-columns: 1fr;
  }

  /* Property stats: same fix as .mfl-lodge-stats above, missed when
     that one shipped -- a different, sibling stats component
     (.mfl-property-stat*, components.css:998) with the identical fixed
     `grid-template-columns: 1fr 1fr` and no mobile override anywhere.
     Used on 6 templates (page-drift-boat/raft/walk-and-wade-fly-fishing-
     trips.php, page-travel-planner.php, page-contact-us.php, and
     page-templates/experience-detail.php -- live on 5 published
     experience pages via pat_nearby_experiences()'s own 'stats' field,
     includes/properties.php) -- a 2026-09-28 ship-time vet-panel
     correction: the original
     version of this comment named only the first 5 and additionally
     assumed "always 4 stats," neither checked against every real call
     site. page-travel-planner.php actually has 3, not 4 -- an ODD
     count, so at any 2-column width (including this fix's own 600px
     boundary before it collapses to 1 column) it leaves the exact
     orphaned-3rd-cell shape .mfl-lodge-stats's own fix above exists to
     avoid. This rule (an unscoped class selector, not page-gated) fixes
     all 6 templates' mobile rendering the same way regardless of count.
     At this 600px width each column is only ~110-130px of usable text
     after the box's own 24px side padding, cramping labels like
     "Chubut Province, Argentina" and "Southern Hemisphere Season" into
     2-3 wrapped lines with visibly uneven row heights next to shorter
     labels in the same row. Found during a sitewide sweep for the same
     "grid has no cross-axis accounting" bug class as the Shared Waters
     card-stretch fix (components.css's new :has() rule) -- this one
     manifests via text-wrap instead of a fixed-height image, but the
     root cause (a rigid multi-column grid with no per-item height/
     width flexibility) is the same family. A DESKTOP/tablet-width
     (>600px) instance of this same family was also reachable -- e.g.
     travel-planner's real orphaned 3rd cell at any width, and uneven
     row-stretch from text-wrap differences on drift-boat/contact-us at
     >=901px, where .mfl-property-overview's own 1fr/360px sidebar
     squeezes this grid's columns. Surfaced by the same vet panel,
     initially left unfixed pending Lincoln's call (out of scope for a
     mobile-only sweep); fixed 2026-09-29 at his direct request -- see
     the .mfl-property-stats, .mfl-property-stat, and .mfl-property-
     stat:last-child:nth-child(odd) rules in components.css, the same
     class this media query overrides below. A same-day follow-up
     (also 2026-09-29) then replaced that fix's own align-items:
     center with a flex/justify-content approach on .mfl-property-stat
     after a code-reuse-engineer vet finding proved centering didn't
     actually keep cell heights uniform -- see that rule's own comment
     for the full story. */
  .mfl-property-stats {
    grid-template-columns: 1fr;
  }

  /* Booking options & gallery: tighter padding */
  .mfl-booking-option {
    padding: 32px 24px;
  }
  .mfl-gallery-placeholder {
    padding: 40px 24px;
  }

  /* Team cards: tighter padding */
  .mfl-team-card {
    padding: 32px 24px;
  }

  /* Policy cards: tighter */
  .mfl-policy-card {
    padding: 32px 24px;
  }

  /* Footer */
  .mfl-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Buttons */
  .mfl-booking-actions {
    flex-direction: column;
  }
  .mfl-booking-actions .btn-primary,
  .mfl-booking-actions .btn-ghost {
    text-align: center;
    width: 100%;
  }

  /* Nav logo size */
  .mfl-nav-logo img {
    height: 40px;
  }

  /* Guide cards: single column on mobile */
  .mfl-guides-grid {
    grid-template-columns: 1fr;
  }
  .mfl-guide-photo {
    height: 260px;
  }

  /* Bio modal: full width on mobile */
  .mfl-bio-modal {
    width: 95vw;
    padding: 32px 20px;
    max-height: 90vh;
  }
  .mfl-bio-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  /* Map embed: shorter on mobile */
  .mfl-map-embed iframe {
    height: 300px;
  }

  /* Contact cards: tighter padding so the card's min-content (mostly
     the long email value) doesn't fight the viewport. The 32px desktop
     horizontal padding × 2 alone is 64px out of a 375px viewport, before
     section padding and card content. Reducing to 20px keeps the card
     comfortable while leaving room for the email/phone string to render
     in one line at 375px+ widths. */
  .mfl-contact-card {
    padding: 32px 20px;
  }
  .mfl-contact-card-value {
    font-size: 1.1rem;
  }
}