/* =====================================================
   CCK - Responsive rules
   IMPORTANT: keep this file valid CSS (some mobile browsers stop parsing after a syntax error).
   ===================================================== */

/* -----------------------------
   Mobile layout
   ----------------------------- */
@media (max-width: 768px) {
  :root {
    --cck-mobile-edge: 18px;          /* equal left/right gutter */
    --cck-mobile-gap: 16px;
    --cck-mobile-card-max: 560px;     /* prevents ultra-wide cards on tablets */
    --cck-mobile-top-gap: 18px;       /* space between header and first card */
    --cck-mobile-bottom-gap: 18px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Global safety: prevent horizontal drift */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    line-height: 1.55;
  }

  /* A single, central "content lane" for ALL pages */
  main,
  section,
  .page,
  .content,
  .layout,
  .container,
  .content-box,
  .hero,
  .hero-card,
  .content-wrapper,
  .workshops-container,
  .results,
  .results-container,
  .videos-container,
  .gallery-container,
  .journal-container {
    max-width: 100% !important;
  }

  /* Give every page a consistent top spacing under the fixed header.
     (Header itself is fixed/sticky in your global styles.) */
  main,
  section,
  .page {
    padding-top: var(--cck-mobile-top-gap);
    padding-bottom: var(--cck-mobile-bottom-gap);
  }

  /* The card lane width (same behavior as Home) */
  .content-box,
  .hero-card,
  .card,
  .page-card,
  .workshop-card,
  .workshop-item,
  .topic-card,
  .result-card,
  .search-card,
  .gallery-card,
  .video-card,
  .journal-card,
  .contact-card,
  .faq-card,
  [class*="card"],
  [class$="-card"] {
    width: min(calc(100vw - (2 * var(--cck-mobile-edge))), var(--cck-mobile-card-max)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure cards don't get pushed under the header (common when some pages set negative margins) */
  .content-box,
  .hero-card,
  .card,
  [class*="card"],
  [class$="-card"] {
    margin-top: var(--cck-mobile-gap) !important;
    margin-bottom: var(--cck-mobile-gap) !important;
  }

  /* Make card text behave consistently across Android browsers */
  .content-box,
  .hero-card,
  .card,
  [class*="card"],
  [class$="-card"] {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* If any page uses a 2-column grid for cards on desktop, force single column on mobile */
  .grid,
  .cards,
  .cards-grid,
  .workshops-grid,
  .gallery-grid {
    display: block !important;
  }

  /* Search result items should stack and keep the same lane */
  .results,
  .results-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Images / media should not force width overflow */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Decorative page images: hide on mobile to avoid layout collisions on some Android browsers. */
  .as-img,
  .cs-img,
  .vs-img,
  .gs-img,
  .js-img,
  .ws-img {
    display: none !important;
  }
  /* Stacked decorative images (used across multiple pages): hide on mobile. */
  .about-stack,
  .contact-stack,
  .video-stack,
  .gallery-stack,
  .journal-stack,
  .magazine-stack,
  .workshop-stack,
  .about-images,
  .contact-images,
  .video-images,
  .gallery-images,
  .journal-images,
  .magazine-images,
  .workshop-images {
    display: none !important;
  }


  /* ===== Mobile ONLY: Workshops cards match Journal card width + centered ===== */
  body.workshops-page main.workshops-layout{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.workshops-page #workshops-search.workshops-left{
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.workshops-page #workshops-search.workshops-left .workshops-box{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important; /* same gutters as Journal */
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important; /* match Journal text inset */
  }

  /* ===== Mobile ONLY: Explorations cards match Journal card width + centered ===== */
  body.videos-page main.videos-layout{
    padding-left: 0 !important;
    padding-right: 0 !important;      /* kill desktop right-column padding */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.videos-page section.videos-left{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Top (search) card */
  body.videos-page .videos-box{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

  /* The "All Explorations (PDF)" card */
  body.videos-page .explore-pdf-bar{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    transform: none !important;       /* remove desktop lift */
  }

  /* Desktop CSS also targets this bar with a MORE specific selector and forces
     left alignment. On mobile, override that specificity so it truly centers
     and stays the same width as Journal. */
  body.videos-page .videos-left .explore-pdf-bar{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Result items (appear after filter/search) */
  body.videos-page .video-item{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

}

/* -----------------------------
   Mobile only stack fix (kept from your previous work)
   ----------------------------- */
@media (max-width: 820px) {
  /* Prevent leftover 3D / flipping transforms from affecting mobile */
  .book,
  .book * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    perspective: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
  }
}

/* -----------------------------
   Safety: if any older styles try to set fixed widths in mobile, this keeps them from breaking layout
   ----------------------------- */
@media (max-width: 768px) {
  [style*="width:"],
  [style*="left:"],
  [style*="right:"] {
    max-width: 100% !important;
  }
  /* ===== Mobile ONLY: Gallery cards match Journal card width + centered ===== */
  body.gallery-page main.gallery-layout{
    padding-left: var(--cck-mobile-edge) !important;
    padding-right: var(--cck-mobile-edge) !important;
    box-sizing: border-box !important;
  }

  body.gallery-page main.gallery-layout .gallery-left{
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Top (info) card */
  body.gallery-page main.gallery-layout .gallery-box{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important; /* same gutters as Journal */
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important; /* match Journal inset */
  }

  /* Child cards (items shown after selecting Video/Photo tabs) */
  body.gallery-page main.gallery-layout .g-card{
    width: min(var(--cck-mobile-card-max), calc(100vw - 32px)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

}


/* ===== Mobile parity: About card width & inner spacing like Home ===== */
@media (max-width: 900px){
  body.about-page{
    --info-card-left: 20px; /* match Home's mobile side padding */
  }
  body.about-page main.about-layout{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ===== Mobile ONLY: Contact card matches Journal card width + centered ===== */
  main.page.contact-page{
    /* keep existing top/bottom spacing, just align side gutters with other pages */
    padding-left: var(--cck-mobile-edge) !important;
    padding-right: var(--cck-mobile-edge) !important;
    box-sizing: border-box !important;
  }

  main.page.contact-page .contact-box{
    width: min(calc(100vw - (2 * var(--cck-mobile-edge))), var(--cck-mobile-card-max)) !important;
    max-width: var(--cck-mobile-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

}