/* ============================================================
   Watch Altars — global responsive (mobile + tablet) fixes
   Loaded on every campus page after the viewport meta.
   Only narrows/repairs small-screen layout; desktop untouched.
   ============================================================ */

/* --- Never allow accidental horizontal scrolling / clipping --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas { max-width: 100%; }

/* ============================================================
   TOP ECOSYSTEM STRIP
   Structure: <div ecosystem-bar> <div=links> <div.absolute=chapter label> </div>
   On narrow screens the 6 centred links + the absolutely-positioned
   chapter label collide. Hide the (redundant) chapter label and let
   the links scroll horizontally instead of overlapping.
   ============================================================ */
@media (max-width: 1279px){
  [data-design-id^="ecosystem-bar"] > div.absolute { display: none !important; }
  [data-design-id^="ecosystem-bar"] > div:first-child{
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-design-id^="ecosystem-bar"] > div:first-child::-webkit-scrollbar{ display: none; }
  [data-design-id^="ecosystem-bar"] > div:first-child > *{ flex: 0 0 auto; }
}

/* ============================================================
   DECORATIVE FLOATING 3D BADGE LAYER
   Purely decorative (pointer-events:none). On phones/tablets the
   percentage-positioned badges (React/AWS/NPM/Go/…) drift on top of
   real content, so hide the whole layer on small screens.
   ============================================================ */
@media (max-width: 1024px){
  #float-layer-global { display: none !important; }
}

/* ============================================================
   HOME PAGE SECTION FIXES (mobile + tablet)
   These target custom-CSS grids that the generic Tailwind-class
   overrides do NOT reach, plus the calendar's 7-day grid that the
   generic override wrongly collapsed to a single column.
   Scoped by data-design-id so they apply on all three campuses
   without touching desktop.
   ============================================================ */

/* ---------- Events Calendar (calendar-aa40) ---------- */
@media (max-width: 1023px){
  /* Stack the 5-col outer grid (calendar card + event detail) into one column */
  [data-design-id="calendar-aa40"] .grid.grid-cols-5{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-design-id="calendar-aa40"] .col-span-3,
  [data-design-id="calendar-aa40"] .col-span-2{
    grid-column: 1 / -1 !important;
  }
}
/* The month day-grid must ALWAYS stay 7 columns — override the generic
   grid-cols-7 -> 1col collapse that destroyed the calendar on phones. */
[data-design-id="calendar-aa40"] .grid.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
@media (max-width: 767px){
  /* Stack the header so the "Subscribe" button no longer overlaps the text */
  [data-design-id="calendar-aa40"] > .seg-panel > .flex.items-end.justify-between{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  [data-design-id="calendar-aa40"] [data-design-id="cal-subscribe-aa41"]{
    width: 100%;
    justify-content: center;
  }
  /* Tighten day cells so 7 columns fit comfortably on small screens */
  [data-design-id="calendar-aa40"] .cal-cell{
    height: 42px !important;
    padding: 4px !important;
    font-size: 11px !important;
  }
  [data-design-id="calendar-aa40"] .grid.grid-cols-7{ gap: 4px !important; }
}
@media (max-width: 400px){
  [data-design-id="calendar-aa40"] .cal-cell{ height: 36px !important; }
}

/* ---------- Teams Spotlight (committee-showcase-ac10) ---------- */
@media (max-width: 900px){
  /* 6-col chip grid is far too dense; drop to 3 readable columns */
  [data-design-id="committee-showcase-ac10"] .cs-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Stack the fixed 300px + 1fr detail panel so nothing clips off-screen */
  [data-design-id="committee-showcase-ac10"] .cs-detail{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  [data-design-id="committee-showcase-ac10"] .cs-detail-art{
    padding: 26px !important;
  }
}
@media (max-width: 479px){
  [data-design-id="committee-showcase-ac10"] .cs-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ---------- Latest News & Articles (news-showcase-ac40) ---------- */
@media (max-width: 900px){
  /* Featured panel + list stack instead of being crushed into 2 columns */
  [data-design-id="news-showcase-ac40"] .nw-layout{
    grid-template-columns: 1fr !important;
  }
  [data-design-id="news-showcase-ac40"] .nw-feat{
    min-height: 320px !important;
  }
}

/* ---------- AI Workspace advert (advert-aa55) ---------- */
@media (max-width: 767px){
  /* The CTA row cramps "Watch the tour" into 3 lines; let buttons size
     naturally and wrap, then go full-width on very small screens. */
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7{
    flex-wrap: wrap !important;
  }
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7 > button{
    flex: 1 1 auto;
    white-space: nowrap;
  }
}
@media (max-width: 479px){
  [data-design-id="advert-aa55"] .flex.gap-3.mt-7 > button{
    flex: 1 1 100%;
  }
}

/* ---------- Featured Programs header (programs-aa50) ---------- */
@media (max-width: 767px){
  /* Stack the heading text above the carousel arrows instead of letting
     the arrows float beside the paragraph. */
  [data-design-id="programs-aa50"] .flex.items-end.justify-between{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
}

/* ---------- This Week 3D coverflow carousel (this-week-carousel-ab92) ---------- */
@media (max-width: 767px){
  /* The coverflow positions fixed 460px cards absolutely and centres them with
     a negative margin, so on a phone the active card (wider than the viewport)
     was clipped off the LEFT edge while neighbours bled in from the right.
     On phones: show ONE centred card sized to the screen; hide the rest. */
  #tw-stage.tw-stage{ height: 540px !important; }
  #tw-track .tw-card{
    width: 90vw !important;
    max-width: 360px !important;
    left: 50% !important;
    top: 0 !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    filter: none !important;
  }
  #tw-track .tw-card.is-active{
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }
  /* Detail panel is always expanded for the visible card on phones. */
  #tw-track .tw-card.is-active .tw-detail{ max-height: 320px !important; }
}

/* ============================================================
   GLOBAL GENERIC GRID STACKING SAFETY-NET (added v4)
   The site is built desktop-first with bare Tailwind grid-cols-*
   utilities (no md:/lg: prefixes), so multi-column grids never stacked
   on phones/tablets. Collapse the common column counts on small screens.
   Component-specific rules above use higher specificity + !important and
   still win where defined (e.g. the 7-day events calendar).
   ============================================================ */
@media (max-width: 1023px){
  .grid.grid-cols-12{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
}
@media (max-width: 767px){
  .grid.grid-cols-12,
  .grid.grid-cols-6,
  .grid.grid-cols-5,
  .grid.grid-cols-4,
  .grid.grid-cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid.grid-cols-2{ grid-template-columns: 1fr !important; }
  /* A bare col-span-* on a collapsed grid would overflow its row. */
  [class*="col-span-"]{ grid-column: auto !important; }
}
@media (max-width: 479px){
  .grid.grid-cols-12,
  .grid.grid-cols-6,
  .grid.grid-cols-5,
  .grid.grid-cols-4,
  .grid.grid-cols-3,
  .grid.grid-cols-2{ grid-template-columns: 1fr !important; }
  /* Downscale desktop-first display headings so they fit a phone. */
  .text-7xl{ font-size: 2.5rem !important; line-height:1.08 !important; }
  .text-6xl{ font-size: 2.25rem !important; line-height:1.1 !important; }
  .text-5xl{ font-size: 2rem !important; line-height:1.1 !important; }
  .text-4xl{ font-size: 1.75rem !important; line-height:1.15 !important; }
}

/* ============================================================
   MATURE / PROFESSIONAL PASS (added v5)
   Fixes: full-bleed end-to-end spanning, huge hero column gaps,
   cartoonish decoration, and inconsistent rainbow colors.
   Brand palette = cyan (#7BD6F0 / #5BC8E8) + purple (#A78BFA).
   ============================================================ */

/* 1 — CONTENT WIDTH: rein runaway full-bleed CONTENT into a centered
   professional column. Section-level bands (section.wa-fullbleed) keep
   full width because their inner container is already capped; only the
   content DIVs that broke out to 100vw are constrained. */
div.wa-fullbleed:not(.navbar-wrap):not(.marquee-wrap){
  max-width: 1280px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
}
/* Unify the very wide section containers to the same centered column. */
.max-w-\[1560px\], .max-w-\[1600px\], .max-w-\[1680px\], .max-w-\[1720px\]{
  max-width: 1280px !important;
}

/* 2 — DE-CARTOONIFY (all widths) */
[data-design-id^="float-layer"]{ display: none !important; } /* confetti/badge decoration */
.script-el{ display: none !important; }                       /* faint floating script text */
.avt{ display: none !important; }                             /* fake initial social-proof bubbles */
.grad-shift{ animation: none !important; }                    /* stop gimmicky animated gradient */
.cta-pulse{ animation: none !important; }                     /* stop pulsing buttons */
.spin, .spin-r, .glow, .script-glow{ animation: none !important; }
.font-hand{ font-family: inherit !important; font-style: normal !important; } /* drop handwriting look */

/* 3 — COLOR CONSISTENCY: fold off-brand pastel accents onto brand cyan.
   Cool brand-adjacent tones (violet/purple/sky/blue/indigo) are kept. */
.text-pink-100,.text-pink-200,.text-pink-300,.text-pink-400,
.text-rose-200,.text-rose-300,.text-rose-400,
.text-emerald-100,.text-emerald-200,.text-emerald-300,.text-emerald-400,
.text-green-200,.text-green-300,.text-green-400,
.text-orange-200,.text-orange-300,.text-orange-400,
.text-amber-200,.text-amber-300,.text-amber-400,
.text-yellow-200,.text-yellow-300,.text-yellow-400,
.text-lime-300,.text-lime-400,
.text-fuchsia-300,.text-fuchsia-400,
.text-teal-300,.text-teal-400{ color: #7BD6F0 !important; }

.bg-pink-400,.bg-pink-500,
.bg-rose-400,.bg-rose-500,
.bg-emerald-400,.bg-emerald-500,
.bg-green-400,.bg-green-500,
.bg-orange-400,.bg-orange-500,
.bg-amber-400,.bg-amber-500,
.bg-yellow-400,.bg-yellow-500,
.bg-lime-400,.bg-lime-500,
.bg-fuchsia-400,.bg-fuchsia-500,
.bg-teal-400,.bg-teal-500{ background-color: #5BC8E8 !important; }

/* ============================================================
   KILL GIMMICKY HERO WORD-REVEAL ANIMATION (added v6)
   The .hw animation started each word at opacity:0 and flew it in
   blurred; on several pages the final words stayed stuck invisible
   (e.g. broken "Pull up a chair —" headline). Render headlines as
   plain, static, fully-visible text everywhere.
   ============================================================ */
.hw{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }

/* ============================================================
   MOBILE OVERFLOW / CLIPPING FIXES (added v7)
   Root cause the earlier grid-stacking pass missed: several fixed
   single-row flex bars (the top ecosystem bar) and long headings
   exceeded the viewport. body already has overflow-x:hidden, so
   those items were CLIPPED off-screen and untappable on phones
   rather than scrollable. Let them wrap; let headings break.
   ============================================================ */
@media (max-width: 767px){
  /* Top ecosystem bar (CAMPUS | CHURCH | ...) — wrap to multiple
     rows on small screens so every destination stays visible & tappable */
  [data-design-id^="ecosystem-bar"] > div{
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 4px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  /* headings must never force horizontal overflow on phones */
  h1, h2, h3, h4{ overflow-wrap: break-word; word-break: break-word; }
}

/* ============================================================
   HEADER INTEGRITY FIX (added v8)
   Regression: the v5 "mature pass" capped .max-w-[1560px] to 1280px,
   which over-constrained the top header rows. The utility row is
   dense (logo + language + New-to-Faith + Receive Jesus on the left;
   6 social icons + Partner + search + Log in + Become a member +
   Mind Workspace on the right). Once over-constrained, flexbox
   collapsed the LOGO image to width:0 (logo disappeared) and pushed
   "Receive Jesus" flush against the social icons.
   Fix: exempt the header bars from the 1280 cap, never let the logo
   shrink, and tighten inner-group spacing so the two groups keep a
   clear gap on common laptop widths.
   ============================================================ */
[data-design-id^="utility-row"] .max-w-\[1560px\],
[data-design-id^="ecosystem-bar"] .max-w-\[1560px\]{ max-width: 1560px !important; }

/* Logo must always be visible and at its natural size. */
[data-design-id^="utility-row"] img{ flex-shrink: 0 !important; min-width: max-content; }

/* Keep the left and right header groups from butting together on
   tighter desktops/laptops by trimming the generous inner gaps. */
@media (max-width: 1500px){
  [data-design-id^="utility-row"] .gap-6{ gap: 1rem !important; }
  [data-design-id^="utility-row"] .gap-5{ gap: 0.85rem !important; }
  [data-design-id^="utility-row"] .gap-4{ gap: 0.6rem !important; }
}