/* ============================================
   SITE-MOBILE.CSS
   New Bethel Missionary Baptist Church
   Mobile-only overrides (max-width: 991px)
   ─────────────────────────────────────────
   SAFE TO EDIT: This file only affects phones
   and tablets. Desktop UI is untouched.
   Desktop styles live in: wwwroot/css/site.css
   ============================================ */


/* ============================================
   SMALL TABLETS (max 991px)
   Targets iPads in portrait, large phones
   ============================================ */
   @media (max-width: 991px) {

    /* ── NAVBAR ── */
    /* Tighten padding so nav doesn't feel bloated */
    .navbar {
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
    }
  
    /* Brand name: slightly smaller on tablet */
    .navbar-brand-multiline {
      font-size: clamp(0.5rem, 2vw, 0.65rem);
      max-width: 120px;
      letter-spacing: 0.05em;
    }
  
    /* ── HERO ── */
    /* Slightly reduce hero min-height on tablet so content is reachable */
    .hero-calvary {
      min-height: 92vh;
    }
  
    .hero-calvary-content {
      padding: 1.5rem 0 4rem;
      text-align: center;
    }
  
    /* Tighten headline on tablet */
    .hero-calvary-headline {
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 1.5rem;
    }
  
    /* Stack buttons on tablet */
    .hero-calvary-ctas {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
  
    .hero-calvary-ctas .btn {
      width: 100%;
      max-width: 280px;
      margin: 0 !important;
    }
  
    /* Move scroll prompt up so it's not clipped */
    .hero-scroll-prompt {
      bottom: 0.75in;
    }
  
    /* ── THREE CARDS ── */
    /* Stack cards vertically on tablet */
    .three-cards-section .row {
      flex-direction: column;
    }
  
    .three-cards-section .col-md-4 {
      width: 100%;
      max-width: 100%;
      flex: none;
    }
  
    /* Shorter cards when stacked */
    .card-image-overlay {
      min-height: 18rem;
    }
  
    /* ── MARQUEE ── */
    .marquee-text {
      font-size: 1.2rem;
    }
  
    /* ── MISSION ── */
    .mission-section {
      padding: 3rem 0;
      text-align: center;
    }
  
    .mission-headline {
      font-size: clamp(1.5rem, 4vw, 2rem);
    }
  
    .mission-subtext {
      font-size: 0.95rem;
      max-width: 100%;
    }
  
    /* ── MINISTRY CARDS ── */
    /* Stack ministry cards */
    .ministry-card {
      min-height: 16rem;
      border-radius: 12px;
    }
  
    /* Section title spacing */
    .py-5.bg-light .text-center {
      margin-bottom: 1.5rem !important;
    }
  
    /* ── EVENTS PAGE ── */
    /* Event cards fill full width on tablet */
    .events-page .col-lg-4 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  
    /* ── PAGE HEADINGS ── */
    .display-5 { font-size: 1.9rem; }
    .display-6 { font-size: 1.6rem; }
  
  }
  
  
  /* ============================================
     PHONES ONLY (max 767px)
     Targets all phones — iPhone, Android, etc.
     ============================================ */
  @media (max-width: 767px) {
  
    /* ── BASE ── */
    /* Extra breathing room on tiny screens */
    .container {
      padding-left: 1.1rem;
      padding-right: 1.1rem;
    }
  
    /* ── NAVBAR ── */
    .navbar {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  
    /* Brand name: very compact on phone */
    .navbar-brand-multiline {
      font-size: clamp(0.45rem, 2.5vw, 0.58rem);
      max-width: 105px;
      letter-spacing: 0.04em;
      line-height: 1.05;
    }
  
    /* Hamburger: ensure it's large enough to tap comfortably */
    .navbar-toggler {
      min-width: 44px;
      min-height: 44px;
      padding: 0.5rem 0.65rem;
    }
  
    /* ── HERO ── */
    .hero-calvary {
      min-height: 100svh; /* svh = small viewport height, respects browser chrome on phones */
    }
  
    .hero-calvary-content {
      padding: 1rem 0 3.5rem;
      text-align: center;
    }
  
    /* Headline: bold and tight on small screens */
    .hero-calvary-headline {
      font-size: clamp(1.75rem, 7vw, 2.4rem);
      line-height: 1.12;
      letter-spacing: -0.015em;
      margin-bottom: 1.25rem;
      /* Subtle text shadow for readability over photo */
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    }
  
    /* CTA buttons: full-width, stacked, tap-friendly */
    .hero-calvary-ctas {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  
    .hero-calvary-ctas .btn {
      width: 100%;
      max-width: 260px;
      min-height: 50px;
      font-size: 0.82rem;
      margin: 0 !important;
    }
  
    /* Scroll prompt: move up more to be above phone home bar */
    .hero-scroll-prompt {
      bottom: 0.6in;
      font-size: 0.65rem;
    }
  
    .hero-scroll-arrow {
      width: 1rem;
      height: 1rem;
    }
  
    /* ── THREE CARDS (HOME) ── */
    /* Already stacked from tablet breakpoint; tweak card height for phone */
    .card-image-overlay {
      min-height: 14rem;
      padding: 1.25rem;
    }
  
    .card-image-content h3 {
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
    }
  
    .card-image-content h3::before {
      width: 24px;
      margin-bottom: 0.4rem;
    }
  
    .card-image-cta {
      font-size: 0.72rem;
    }
  
    /* ── MARQUEE ── */
    .marquee-section {
      padding: 0.85rem 0;
    }
  
    .marquee-text {
      font-size: 1rem;
      letter-spacing: 0.05em;
    }
  
    /* ── MISSION SECTION ── */
    .mission-section {
      padding: 2.5rem 0;
      text-align: center;
    }
  
    .mission-headline {
      font-size: clamp(1.3rem, 5.5vw, 1.75rem);
      line-height: 1.22;
      margin-bottom: 0.875rem;
    }
  
    .mission-subtext {
      font-size: 0.88rem;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.65);
    }
  
    /* Button: full width in mission section on phone */
    .mission-section .btn {
      width: 100%;
      max-width: 260px;
      min-height: 48px;
    }
  
    /* ── MINISTRIES / GET CONNECTED ── */
    /* Each ministry card fills full width */
    .py-5.bg-light .col-md-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  
    /* Slightly shorter ministry cards */
    .ministry-card {
      min-height: 14rem;
      border-radius: 10px;
    }
  
    .ministry-card-content {
      padding: 1.25rem;
    }
  
    .ministry-card-content h5 {
      font-size: 1.05rem;
    }
  
    .ministry-card-content p.small {
      font-size: 0.8rem;
    }
  
    /* Section title */
    .py-5.bg-light h2.text-center {
      font-size: 1.5rem;
      margin-bottom: 1.5rem !important;
    }
  
    /* ── EVENTS PAGE ── */
    /* Single column on phone */
    .container .col-md-6,
    .container .col-lg-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  
    /* Tighten event card images */
    .card-img-top {
      height: 10rem !important;
      object-fit: cover;
    }
  
    /* Event card body: larger touch targets */
    .card-body .btn {
      min-height: 44px;
      width: 100%;
    }
  
    /* Page heading on events/groups */
    .container .text-center h1.display-5 {
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
    }
  
    .container .text-center p.lead {
      font-size: 0.95rem;
    }
  
    /* ── PRAYER PAGE ── */
    /* Card form: no horizontal padding on phone */
    .card.border-0.shadow-sm.p-4 {
      padding: 1.25rem !important;
      border-radius: 12px !important;
    }
  
    /* Form inputs: larger for touch */
    .form-control {
      min-height: 48px;
      font-size: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 6px;
    }
  
    textarea.form-control {
      min-height: auto;
    }
  
    .form-label {
      font-size: 0.78rem;
    }
  
    /* Submit button: full width, tall touch target */
    .btn.btn-primary.w-100 {
      min-height: 52px;
      font-size: 0.88rem;
      letter-spacing: 0.1em;
    }
  
    /* ── ABOUT PAGE (Canva embed) ── */
    /* Give it full screen on phone */
    div[style*="calc(100vh - 64px)"] {
      height: calc(100svh - 56px) !important;
    }
  
    /* ── LIVE / WATCH PAGE ── */
    /* Iframe embeds: proper 16:9 on phone */
    .ratio.ratio-16x9 {
      border-radius: 8px;
      overflow: hidden;
    }
  
    /* ── GLOBAL FOOTER BAR ── */
    .global-footer {
      padding: 0.875rem 1rem;
      min-height: auto;
    }
  
    .global-footer-inner {
      font-size: 0.72rem;
      line-height: 1.5;
    }
  
    /* ── GENERIC CARDS (e.g. Events) ── */
    .card {
      border-radius: 12px;
    }
  
    .card:hover {
      /* Disable lift effect on touch — no hover intent on mobile */
      transform: none;
      box-shadow: var(--shadow-sm);
    }
  
    /* Badge */
    .badge {
      font-size: 0.68rem;
      padding: 0.3em 0.65em;
    }
  
    /* ── UTILITY: spacing ── */
    .py-5 {
      padding-top: 2.5rem !important;
      padding-bottom: 2.5rem !important;
    }
  
    .mb-5 {
      margin-bottom: 2rem !important;
    }
  
    /* Display headings */
    .display-4 { font-size: 1.875rem; }
    .display-5 { font-size: 1.6rem; }
    .display-6 { font-size: 1.4rem; }
  
  }
  
  
  /* ============================================
     EXTRA SMALL PHONES (max 390px)
     iPhone SE, Galaxy A series, etc.
     ============================================ */
  @media (max-width: 390px) {
  
    /* Hero headline: tightest size */
    .hero-calvary-headline {
      font-size: 1.6rem;
      line-height: 1.14;
    }
  
    /* Navbar brand: ultra compact */
    .navbar-brand-multiline {
      font-size: 0.44rem;
      max-width: 95px;
    }
  
    /* Mission headline */
    .mission-headline {
      font-size: 1.25rem;
    }
  
    /* Card titles */
    .card-image-content h3 {
      font-size: 1.1rem;
    }
  
    /* Card image overlay: compact */
    .card-image-overlay {
      min-height: 12rem;
      padding: 1rem;
    }
  
    /* Ministry cards: shorter */
    .ministry-card {
      min-height: 12rem;
    }
  
    /* Form inputs: ensure full width */
    .form-control,
    .btn.btn-primary.w-100 {
      font-size: 0.95rem;
    }
  
    /* Footer */
    .global-footer-inner {
      font-size: 0.68rem;
    }
  
  }
  
  
  /* ============================================
     LANDSCAPE PHONES (short viewport)
     e.g. iPhone rotated sideways
     ============================================ */
  @media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  
    /* Hero: shorter in landscape so CTAs are reachable */
    .hero-calvary {
      min-height: 100vw;
      align-items: flex-end;
    }
  
    .hero-calvary-content {
      padding: 1rem 0 2.5rem;
    }
  
    .hero-calvary-headline {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
  
    /* Side-by-side buttons in landscape */
    .hero-calvary-ctas {
      flex-direction: row;
      justify-content: center;
    }
  
    .hero-calvary-ctas .btn {
      width: auto;
      min-width: 140px;
    }
  
    .hero-scroll-prompt {
      display: none; /* Hide scroll prompt in landscape — not needed */
    }
  
    /* Marquee: smaller in landscape */
    .marquee-text {
      font-size: 0.9rem;
    }
  
  }