/* ============================================================
   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(13,18,24,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: opacity 0.3s ease, top 0.3s ease;
  }
  .mfl-fab-left {
    left: 12px;
  }
  .mfl-fab-right {
    right: 12px;
  }
  /* Hide FABs when scrolled on mobile — they overlap content */
  .nav-scrolled .mfl-fab {
    opacity: 0;
    pointer-events: none;
  }

  /* 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 — 2 columns on mobile */
  .mfl-lodge-stats {
    grid-template-columns: repeat(2, 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;
  }
}