/* ============================================================
   Mobile & tablet only — desktop/laptop (992px+) unchanged
   ============================================================ */

/* ===== Tablet (768px – 991px) ===== */
@media (max-width: 991px) and (min-width: 768px) {
  .hero-line-two-mobile {
    font-size: clamp(2.8rem, 9vw, 5.5rem);
  }

  .heading-xl {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
  }

  .gallery-slide-card img {
    height: 260px;
    object-fit: cover;
  }

  .services-schedule-row .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .lordscity-about-row .col-lg-5,
  .lordscity-about-row .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== Tablet & mobile (≤991px) ===== */
@media (max-width: 991px) {
  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
  }

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

  .container-main {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Prevent hover jump on touch devices */
  @media (hover: none), (pointer: coarse) {
    .service-card:hover,
    .mission-card:hover,
    .vision-card:hover,
    .donate-card:hover,
    .contact-card:hover,
    .event-card:hover,
    .service-schedule-card:hover,
    .gallery-slide-card:hover {
      transform: none !important;
    }

    .img-hover-wrap:hover img,
    .leader-img-wrap:hover img,
    .worship-img-wrap:hover img,
    .service-hero-card:hover img,
    .gallery-slide-card img:hover,
    .youth-img:hover,
    .rev-card:hover img {
      transform: none !important;
    }

    .btn-join:hover,
    .btn-donate-hero:hover,
    .btn-donate-header:hover,
    .btn-learn-more:hover,
    .btn-send:hover {
      transform: none !important;
    }
  }

  /* Hero */
  .hero-section {
    min-height: 100svh;
  }

  .hero-content {
    min-height: 100svh;
  }

  .hero-line-one {
    white-space: normal;
    word-break: break-word;
  }

  .hero-line-two,
  .hero-line-two-mobile {
    white-space: normal;
    word-break: break-word;
    line-height: 0.95;
  }

  .hero-subtitle-wrap {
    min-height: auto;
    max-height: none;
  }

  /* About — no stacked image overlap */
  .about-images {
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
  }

  .about-img-main,
  .about-img-small {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 360px;
    object-fit: cover;
    display: block;
  }

  .about-deco-circle {
    display: none;
  }

  .about-block-worship .col-lg-6 {
    width: 100%;
  }

  .about-worship-media,
  .about-worship-media .worship-img {
    width: 100%;
    min-height: 240px;
    max-height: 360px;
    object-fit: cover;
  }

  /* Leadership — stack cleanly, no overlap */
  .leadership-row-bishop,
  .leadership-row-rev {
    row-gap: 1.75rem !important;
  }

  .leadership-bishop-copy,
  .leadership-bishop-photo,
  .leadership-copy,
  .leadership-photo-card {
    width: 100%;
    max-width: 100%;
  }

  .leader-img-wrap,
  .leadership-photo-wrap,
  .rev-card.leadership-photo-card {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .leader-img-wrap img,
  .section-leadership .leadership-rev-photo,
  .section-leadership .leadership-photo-card img {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
    max-height: 440px;
    object-fit: cover;
    object-position: center 22%;
    display: block;
  }

  .rev-card.leadership-photo-card {
    height: auto;
    margin-bottom: 0.5rem;
  }

  .rev-card-info {
    position: relative;
    z-index: 1;
  }

  /* Services & events */
  .services-ministry-row .col-md-6,
  .services-ministry-row .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-schedule-row .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .events-content-required {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 2rem 1.25rem;
  }

  /* Service hero cards */
  .service-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 320px;
  }

  .service-hero-card img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 480px;
    object-fit: cover;
    display: block;
  }

  .service-hero-content {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
    padding: 0;
  }

  /* Lord's City */
  .lordscity-official-copy {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-align: left;
  }

  .lordscity-official-copy .lordscity-lead {
    text-align: left;
  }

  .lordscity-info-card {
    margin-bottom: 1.5rem;
  }

  .video-carousel,
  .video-main-wrap,
  .video-ratio-box {
    overflow: hidden;
    max-width: 100%;
  }

  .map-wrap {
    overflow: hidden;
    max-width: 100%;
  }

  .map-wrap iframe {
    height: 360px;
    width: 100%;
  }

  /* Inline font overrides */
  .mission-card h3[style*="2.25rem"],
  .vision-card h3[style*="2.25rem"] {
    font-size: 1.75rem !important;
  }

  .section-leadership h3.heading-xl[style*="3rem"] {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  .service-hero-content h2[style*="3rem"] {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    margin-top: 0.75rem !important;
  }

  .service-hero-content p[style*="1.25rem"],
  .service-hero-content p[style*="1.5rem"] {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .location-card h3[style],
  .counselling-left h3[style],
  .counselling-right h3[style] {
    font-size: 1.5rem !important;
  }

  .location-card p[style*="1.25rem"],
  .section-lordscity p[style*="1.25rem"] {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .section-lordscity p[style*="2.5rem"] {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .contact-card p[style*="1.5rem"] {
    font-size: 1.125rem !important;
  }

  .btn-visit-lordscity,
  .btn-learn-more,
  .btn-send,
  .btn-proceed-donate,
  .btn-donate-path {
    width: 100%;
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Mobile (≤767px) — phones ===== */
@media (max-width: 767px) {
  body {
    -webkit-tap-highlight-color: transparent;
  }

  .container-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-inner {
    height: auto;
    min-height: 4.25rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .site-logo {
    font-size: clamp(0.78rem, 3.2vw, 1.05rem);
    letter-spacing: 0.5px;
    max-width: calc(100% - 6.5rem);
    line-height: 1.15;
  }

  .btn-donate-header {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 0.25rem;
    min-height: 44px;
    min-width: 44px;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
  }

  .mobile-menu-btn,
  .btn-donate-header {
    min-height: 44px;
    min-width: 44px;
  }

  .form-input,
  textarea.form-input,
  select.form-input {
    font-size: 16px !important;
  }

  .tw-hover-btn,
  .btn-join,
  .btn-donate-hero,
  .btn-youth-join,
  .btn-youth-learn,
  .btn-join-service,
  .btn-donate-support,
  .service-schedule-link,
  .btn-request-counselling {
    min-height: 44px;
  }

  .hero-content {
    padding-top: 96px;
    padding-bottom: 40px;
  }

  .hero-mid {
    gap: 0;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn-join,
  .hero-buttons .btn-donate-hero {
    width: 100%;
    justify-content: center;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .heading-xl {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem);
    word-break: break-word;
  }

  .heading-gallery,
  .heading-services,
  .heading-youth,
  .heading-gofundme,
  .heading-lordscity,
  .heading-counselling,
  .events-heading {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem);
  }

  .label-orange-wide {
    letter-spacing: 3px;
    font-size: 0.8rem;
  }

  .section-heading-center {
    margin-bottom: 2rem;
  }

  .leader-img-wrap {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  .leadership-bishop-copy .d-flex.gap-4 {
    flex-direction: column;
    gap: 0.75rem !important;
  }

  .stat-card {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .gallery-slide-card img {
    height: auto;
    min-height: 200px;
    max-height: 260px;
    object-fit: cover;
  }

  .gallery-swiper {
    overflow: hidden;
    padding-bottom: 2.5rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    transform: scale(0.85);
  }

  .youth-img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 1.25rem;
  }

  .service-card {
    padding: 1.35rem;
  }

  .service-card:hover {
    transform: none !important;
  }

  .service-schedule-card {
    padding: 1.25rem;
  }

  .service-time-from,
  .service-time-to {
    font-size: 1.15rem;
  }

  .event-card {
    padding: 1.25rem;
  }

  .service-hero-card {
    min-height: 280px;
  }

  .service-hero-card img {
    min-height: 280px;
    max-height: 400px;
  }

  .counselling-left,
  .counselling-right {
    padding: 1.35rem;
  }

  .counselling-right .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .btn-request-counselling {
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .contact-card {
    text-align: center;
    padding: 1.35rem;
  }

  .contact-form-wrap {
    padding: 1.35rem;
  }

  .donate-card {
    text-align: center;
  }

  .donate-path-card {
    padding: 1.25rem;
  }

  .gofundme-card {
    padding: 1.25rem 0.75rem;
  }

  .modal-box,
  .modal-box-donate {
    width: calc(100% - 1.25rem);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.35rem;
  }

  .footer-content > .row > [class*="col-"] {
    margin-bottom: 1.5rem;
  }

  .map-wrap iframe {
    height: 280px;
  }

  .video-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }

  .tw-hover-btn:hover .tw-hover-btn-circle-dot {
    width: 280px;
    height: 280px;
  }
}

/* ===== Small phones (≤480px) — iPhone SE, small Android ===== */
@media (max-width: 480px) {
  .site-logo {
    font-size: clamp(0.72rem, 3.8vw, 0.9rem);
  }

  .btn-donate-header {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.62rem !important;
  }

  .hero-content {
    padding-top: 88px;
  }

  .hero-line-one {
    font-size: clamp(2rem, 11vw, 2.75rem);
  }

  .hero-line-two-mobile {
    font-size: clamp(2.1rem, 13vw, 3.25rem);
    margin-top: 0;
  }

  .hero-welcome {
    font-size: 0.72rem !important;
    padding: 5px 16px 5px 26px;
  }

  .mission-card,
  .vision-card {
    margin-bottom: 0.75rem;
    padding: 1.25rem;
  }

  .about-img-main,
  .about-img-small {
    max-height: 280px;
  }

  .leader-img-wrap img,
  .section-leadership .leadership-rev-photo {
    min-height: 200px;
    max-height: 340px;
  }

  .video-nav {
    gap: 0.5rem;
    padding: 0 0.25rem;
  }

  .video-dot {
    width: 8px;
    height: 8px;
  }

  .dev-credit p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .lordscity-funding strong {
    font-size: 1.25rem;
  }
}

/* ===== Landscape phones & small tablets ===== */
@media (max-width: 896px) and (orientation: landscape) {
  .hero-section,
  .hero-content {
    min-height: auto;
  }

  .hero-content {
    padding-top: 76px;
    padding-bottom: 28px;
  }

  .hero-line-two-mobile {
    font-size: clamp(2rem, 7vw, 3.25rem);
    margin-top: 0.5rem;
  }

  .hero-left-col {
    min-height: auto;
  }

  .service-hero-card {
    min-height: 260px;
  }

  .service-hero-card img {
    min-height: 260px;
    max-height: 320px;
  }
}

/* ===== iOS / Android safe areas (notch, home indicator) ===== */
@supports (padding: max(0px)) {
  @media (max-width: 991px) {
    .site-header .container-main {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }

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

    .hero-content {
      padding-top: max(96px, calc(env(safe-area-inset-top) + 80px));
    }

    .site-footer {
      padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .mobile-nav.show {
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .modal-box,
    .modal-box-donate {
      margin-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ===== Reduced motion — keep content visible ===== */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}