/* ============================================================
   PALM LEAF PARTNERS — MOBILE READINESS
   Breakpoints: 768px (tablet), 480px (large phone), 375px (small phone)
   Fixes all layout, typography, touch target, and component issues
   ============================================================ */

/* ── 1. BASE MOBILE IMPROVEMENTS ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Ensure all containers don't overflow */
* {
  box-sizing: border-box;
  min-width: 0; /* Prevents flex/grid overflow */
}

/* ── 2. TABLET (≤ 768px) ── */
@media (max-width: 768px) {

  /* --- Zola guide: side by side, bubble taller with generous padding --- */
  .zola-guide {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.5rem 0 !important;
  }
  .zola-guide img {
    width: 120px !important;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .zola-guide-bubble {
    border-radius: var(--radius-md) !important;
    padding: 1.25rem 1.25rem 1rem !important;  /* taller top/bottom */
    flex: 1;  /* fill remaining width */
  }
  .zola-guide-bubble p {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin: 0 0 0.5rem !important;
  }
  .zola-guide-bubble .guide-attr {
    font-size: 0.68rem !important;
    margin-top: 0.5rem !important;
  }
  /* Restore speech bubble arrow */
  .zola-guide-bubble::before {
    display: block !important;
    left: -12px; top: 16px;
    border-width: 6px;
  }
  /* Reversed guide: hide arrow (Zola on right) */
  .zola-guide[style*="row-reverse"] .zola-guide-bubble::before {
    display: none !important;
  }

  /* --- Mobile hero: swap to portrait image, center Zola --- */
  .hero-parallax .hero-bg-layer {
    background-image: url('../assets/images/zola-hero-home-mobile.jpg') !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  /* Text block: anchored to bottom, full width, with side padding */
  .hero-parallax > div:last-child {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 0 2rem !important;
  }
  .hero-parallax > div:last-child > div {
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
  }
  /* Hide the eyebrow badge on mobile — it overlaps Zola's neck */
  .hero-parallax .hero-eyebrow {
    display: none !important;
  }
  /* Mobile gradient: transparent top (show Zola), dark bottom (readable text) */
  .hero-parallax > div:nth-child(2) {
    background: linear-gradient(
      to top,
      rgba(27,67,50,0.97) 0%,
      rgba(27,67,50,0.92) 40%,
      rgba(27,67,50,0.3) 65%,
      rgba(27,67,50,0) 100%
    ) !important;
  }

  /* --- Navigation --- */
  .navbar {
    padding: 0 1rem;
    height: 64px;
  }
  .navbar-logo-text .brand-name { font-size: 0.95rem; }
  .navbar-logo-text .brand-sub { font-size: 0.6rem; }
  .hamburger {
    padding: 10px; /* Larger touch target */
    margin-right: -10px;
  }
  .hamburger span { width: 22px; }
  .mobile-menu ul a {
    padding: 1rem 0; /* Larger touch targets */
    font-size: 1.05rem;
  }

  /* --- Homepage Hero Split --- */
  .hero-parallax {
    min-height: 100svh; /* Use small viewport height on mobile */
    padding-top: 64px;
  }
  .hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: calc(100svh - 64px);
    padding: 0 1rem;
    align-items: end;
    gap: 0;
  }
  .hero-split .zola-col {
    order: 1;
    max-height: 45vh;
    align-items: flex-end;
    padding-bottom: 0;
  }
  .hero-split .zola-col img {
    max-height: 45vh;
    max-width: 70vw;
    margin: 0 auto;
  }
  .hero-split .text-col {
    order: 2;
    padding: 1.5rem 0.5rem 2.5rem;
    background: linear-gradient(to top, rgba(27,67,50,0.98) 60%, rgba(27,67,50,0.0) 100%);
  }
  .hero-split .text-col h1 {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    margin-bottom: 0.75rem;
  }
  .hero-split .text-col .lead {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }
  .hero-split .text-col .hero-eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.68rem;
  }
  .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem; /* Larger touch target */
  }
  .hero-parallax .hero-overlay-gradient {
    background: linear-gradient(
      to top,
      rgba(27,67,50,0.97) 0%,
      rgba(27,67,50,0.75) 45%,
      rgba(27,67,50,0.2) 100%
    );
  }

  /* --- Full-bleed Page Heroes --- */
  .page-hero-fullbleed {
    height: auto;
    min-height: 50vh;
    padding-top: 64px;
  }
  .page-hero-fullbleed .hero-text-block {
    padding: 0 1rem 2.5rem;
  }
  .page-hero-fullbleed .hero-text-block h1 {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
  .page-hero-fullbleed .hero-text-block .lead {
    font-size: 0.95rem;
  }

  /* --- Scale / Stats Bar --- */
  .scale-bar { padding: 2.5rem 0; }
  .scale-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
  .scale-number { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .scale-label { font-size: 0.72rem; }

  /* --- Section Spacing --- */
  .section { padding: 3.5rem 0; }
  .section-lg { padding: 4.5rem 0; }
  .story-section { padding: 3.5rem 0; }

  /* --- Story Beats --- */
  .beat-number { font-size: 3.5rem; }
  .beat-headline { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .beat-body { font-size: 0.95rem; }
  .beat-image img { height: 240px; }

  /* --- Zola Guide --- */
  .zola-guide {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .zola-guide img { width: 90px; }
  .zola-guide-bubble {
    border-radius: var(--radius-md) !important;
    max-width: 100%;
  }
  .zola-guide-bubble::before { display: none; }

  /* --- Pillar Badge Cards --- */
  .pillars-badge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .pillar-badge-card { padding: 1.75rem 1rem 1.5rem; }
  .pillar-badge-icon { width: 64px; height: 64px; }
  .pillar-badge-icon svg { width: 32px; height: 32px; }

  /* --- Pull Quote --- */
  .pull-quote { padding: 3rem 0; }
  .pull-quote blockquote {
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
    padding: 0 1rem;
  }

  /* --- Trust Bar --- */
  .trust-logos {
    gap: 1rem;
    justify-content: center;
  }
  .trust-badge span { font-size: 0.65rem; }

  /* --- Cards --- */
  .card { padding: 1.5rem; }
  .project-card-img { height: 200px; }

  /* --- Inside the Build --- */
  .inside-build summary { font-size: 0.92rem; padding: 1rem 1.25rem; }
  .inside-build-body { padding: 0 1.25rem 1.25rem; }

  /* --- Footer --- */
  footer { padding: 3rem 0 1.5rem; }
  .footer-grid { gap: 2rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .footer-legal { gap: 1rem; }

  /* --- Sister Brand --- */
  .sister-brand { padding: 2rem 0; }
  .sister-brand-inner {
    gap: 1.5rem;
    flex-direction: column;
    align-items: center;
  }
  .sister-divider { flex-direction: row; }
  .sister-divider .roots-line { width: 30px; height: 1px; }

  /* --- Breadcrumb --- */
  .breadcrumb-inner { font-size: 0.75rem; }

  /* --- Section Headers --- */
  .section-header { margin-bottom: 2.5rem; }
  .section-header h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .section-header p { font-size: 0.95rem; }

  /* --- Inline grids that bypass CSS classes --- */
  .stats-grid[style],
  .scale-grid[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- MOU rows in Partnership page --- */
  .mou-row {
    flex-direction: column;
    gap: 1rem;
  }
  .mou-icon { flex-shrink: 0; }
  .mou-value { font-size: 1.1rem; }

  /* --- Data center inline grid --- */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Spec table --- */
  .spec-table th, .spec-table td {
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
  }

  /* --- Contact form --- */
  .form-row { grid-template-columns: 1fr !important; }
  .contact-info-card { padding: 1.75rem; }

  /* --- Buttons --- */
  .btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.88rem;
    min-height: 48px; /* iOS touch target minimum */
  }

  /* --- Callout section --- */
  .callout { padding: 3rem 0; }
  .callout h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .callout p { font-size: 0.95rem; }
  .callout .btn { display: inline-flex; }
}

/* ── 3. LARGE PHONE (≤ 480px) ── */
@media (max-width: 480px) {

  /* Zola guide: even smaller on small phones */
  .zola-guide img { width: 60px !important; }
  .zola-guide-bubble p { font-size: 0.84rem !important; }

  /* Hero: show Zola's face centered */
  .hero-parallax .hero-bg-layer {
    background-position: 38% center !important;
  }

  /* --- Container padding --- */
  .container { padding: 0 1rem; }

  /* --- Hero --- */
  .hero-split .zola-col img {
    max-height: 38vh;
    max-width: 80vw;
  }
  .hero-split .text-col h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  /* --- Scale stats: 1 column on very small screens --- */
  .scale-grid { grid-template-columns: 1fr 1fr !important; }

  /* --- Pillar cards: 1 column --- */
  .pillars-badge-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .pillar-badge-card { padding: 1.25rem 0.75rem; }
  .pillar-badge-icon { width: 56px; height: 56px; margin-bottom: 0.75rem; }

  /* --- Story beats --- */
  .beat-number { font-size: 2.5rem; }
  .beat-image img { height: 200px; }

  /* --- Typography --- */
  h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }

  /* --- Project cards --- */
  .project-card-img { height: 180px; }

  /* --- Trust badges: wrap tightly --- */
  .trust-logos { gap: 0.75rem; }
  .trust-badge .badge-icon { width: 40px; height: 40px; }
  .trust-badge .badge-icon svg { width: 20px; height: 20px; }

  /* --- Pull quote --- */
  .pull-quote blockquote { font-size: clamp(1.1rem, 5vw, 1.5rem); }

  /* --- Footer --- */
  .footer-grid { grid-template-columns: 1fr; }

  /* --- Inside the Build expandable --- */
  .inside-build-body .grid-2,
  .inside-build-body .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* --- Spec table: allow horizontal scroll --- */
  .spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec-table { min-width: 480px; }

  /* --- Partnership page program grid --- */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 4. SMALL PHONE (≤ 375px) ── */
@media (max-width: 375px) {

  /* --- Navbar --- */
  .navbar-logo-text .brand-name { font-size: 0.85rem; }
  .navbar-logo img { height: 36px; }

  /* --- Hero --- */
  .hero-split .text-col h1 { font-size: 1.65rem; }
  .hero-split .zola-col img { max-height: 34vh; }

  /* --- Scale stats: 2 columns always --- */
  .scale-grid { grid-template-columns: 1fr 1fr !important; }
  .scale-number { font-size: 1.5rem; }
  .scale-label { font-size: 0.68rem; }

  /* --- Pillar cards: 1 column --- */
  .pillars-badge-grid { grid-template-columns: 1fr; }

  /* --- Zola guide --- */
  .zola-guide img { width: 72px; }
  .zola-guide-bubble p { font-size: 0.88rem; }

  /* --- Buttons --- */
  .btn { font-size: 0.85rem; padding: 0.85rem 1.25rem; }

  /* --- Section padding --- */
  .section { padding: 2.5rem 0; }
  .story-section { padding: 2.5rem 0; }
}

/* ── 5. TOUCH IMPROVEMENTS (all mobile) ── */
@media (hover: none) and (pointer: coarse) {

  /* Remove hover effects that don't work on touch */
  .card:hover,
  .project-card:hover,
  .pillar-badge-card:hover,
  .invest-tier:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  /* Ensure all interactive elements have minimum 44px touch target */
  .btn { min-height: 44px; }
  .navbar-nav a { min-height: 44px; display: flex; align-items: center; }
  .mobile-menu ul a { min-height: 48px; display: flex; align-items: center; }
  .hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }

  /* Disable parallax on touch devices (performance + motion sensitivity) */
  .hero-bg-layer { transform: none !important; }
  .zola-parallax-img { transform: none !important; }
}

/* ── 6. LANDSCAPE PHONE ── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-parallax { min-height: 100svh; }
  .hero-split {
    grid-template-columns: 40% 60%;
    grid-template-rows: 1fr;
    min-height: calc(100svh - 64px);
  }
  .hero-split .zola-col {
    order: 1;
    max-height: calc(100svh - 64px);
  }
  .hero-split .zola-col img {
    max-height: calc(100svh - 80px);
    max-width: 100%;
  }
  .hero-split .text-col {
    order: 2;
    padding: 1rem 1rem 1rem 0.5rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-split .text-col h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 0.5rem; }
  .hero-split .text-col .lead { font-size: 0.85rem; margin-bottom: 1rem; }
  .page-hero-fullbleed { height: 85vw; min-height: 280px; }
}

/* ── 7. SAFE AREA INSETS (iPhone notch / Dynamic Island) ── */
@supports (padding: max(0px)) {
  .navbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .mobile-menu {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  footer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}