/* Buddhaguna V11.3.50 responsive stabilization
   Scope: desktop + tablet only. Preserve mobile design/content/SEO/audio/CMS. */

/* Never let reveal failures leave content invisible on stable desktop/tablet layouts. */
@media (min-width:781px){
  main .v109-fallback-reveal{opacity:1!important;transform:none!important}

  /* Subpage cards must never become blank because GSAP/reveal state failed. */
  .v113-feature,
  .v113-feature .copy,
  .v113-feature .copy h3,
  .v113-feature .copy p,
  body.v112-subpage .v112-card,
  body.v112-subpage .v112-image-shell,
  body.v112-subpage .v112-image-shell img{
    opacity:1!important;
    visibility:visible!important;
  }
  .v113-feature .copy,
  .v113-feature .copy h3,
  .v113-feature .copy p{transform:none!important;filter:none!important}

  /* Temple-story photographs are sacred/documentary images: show the entire source image.
     Do not crop Buddha heads, bodies, altar tops or devotional details. */
  .v113-temple-story .v113-feature img,
  .v113-temple-story .v113-feature.hero-card img,
  .v113-temple-story .v113-sacred-grid .v113-feature img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    clip-path:none!important;
    will-change:auto!important;
    background:#0b2148!important;
  }

  /* The image wrapper must grow naturally with the actual photo instead of clipping it. */
  .v113-temple-story .v112-image-shell{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    transform:none!important;
  }
}

/* ------------------------------
   Desktop: 1200px+
   ------------------------------ */
@media (min-width:1200px){
  /* Restore Temple · Abbot · Dhamma to a stable premium 3-card composition. */
  #temple-overview.v109-story{overflow:visible!important;padding-top:92px!important;padding-bottom:92px!important}
  #temple-overview.v109-story .wrap{width:min(1180px,calc(100% - 32px))!important;max-width:1180px!important;padding-left:0!important;padding-right:0!important}
  #temple-overview.v109-story .feature-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:auto!important;
    gap:20px!important;
    transform:none!important;
    will-change:auto!important;
    margin-top:28px!important;
  }
  #temple-overview.v109-story .feature{
    flex:none!important;
    width:auto!important;
    height:auto!important;
    min-height:440px!important;
    aspect-ratio:4/5!important;
  }
  #temple-overview.v109-story .feature img{transform:none!important;will-change:auto!important}
  #temple-overview.v109-story .feature-copy{padding:26px!important}
  #temple-overview.v109-story .feature-copy h3{font-size:clamp(28px,2.35vw,40px)!important}

  /* General homepage/editorial photography can remain editorially cropped,
     but temple-story/sacred imagery is excluded above and remains fully visible. */
  main .grid2 > img.photo{max-height:620px!important;aspect-ratio:4/3!important;object-fit:cover!important}
  #abbot-overview .photo{aspect-ratio:4/3!important;object-fit:cover!important}

  /* Temple page cards should size to content, not reserve large blank panels. */
  .v113-temple-story .v113-feature{height:auto!important;min-height:0!important}
  .v113-temple-story .v113-feature .copy{padding:26px 32px 32px!important;height:auto!important;min-height:0!important}

  /* Keep section rhythm premium but avoid excessive vertical voids. */
  .section{padding-top:84px!important;padding-bottom:84px!important}
}

/* ------------------------------
   Tablet / compact laptop: 781px–1199px
   ------------------------------ */
@media (min-width:781px) and (max-width:1199px){
  /* Align all systems to one tablet state. */
  .desktop-nav{display:none!important}
  .menu-btn{display:block!important}

  .wrap{width:min(100% - 40px,1040px)!important}
  .section{padding:74px 0!important}
  h2{font-size:clamp(40px,5.5vw,58px)!important;line-height:1.02!important}
  h3{font-size:clamp(26px,3.4vw,38px)!important}

  /* Neutralise desktop-only horizontal cinematic track completely. */
  #temple-overview.v109-story{overflow:visible!important;padding:74px 0!important}
  #temple-overview.v109-story .wrap{width:min(100% - 40px,1040px)!important;max-width:1040px!important;padding:0!important}
  #temple-overview.v109-story .feature-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    width:auto!important;
    margin-top:24px!important;
    transform:none!important;
    will-change:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  #temple-overview.v109-story .feature{
    flex:none!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/5!important;
    border-radius:26px!important;
  }
  #temple-overview.v109-story .feature img{transform:none!important;will-change:auto!important;object-fit:cover!important}
  #temple-overview.v109-story .feature-copy{padding:24px!important}
  #temple-overview.v109-story .feature-copy h3{font-size:clamp(28px,4vw,38px)!important}

  /* Two-column editorial layouts remain two-column on landscape tablets/compact laptops. */
  .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:32px!important;align-items:center!important}
  .grid2 > img.photo{width:100%!important;max-height:520px!important;aspect-ratio:4/3!important;object-fit:cover!important}

  /* Temple story cards are content-sized and all explanatory copy stays visible. */
  .v113-temple-story .v113-feature{height:auto!important;min-height:0!important}
  .v113-temple-story .v113-feature .copy{padding:26px 28px 30px!important;height:auto!important;min-height:0!important}
  .v113-temple-story .v113-feature .copy p{font-size:17px!important}
  .v113-sacred-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}

  /* Ceremony/news/card media should not create blank lower halves. */
  .rich-card img{height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important}
  .rich-card{height:auto!important;min-height:0!important}

  /* Reduce heavy motion surfaces on tablet even if legacy classes are present. */
  .motion-card,.motion-image,#abbot-overview .photo,.v109-ornament{transform:none!important;will-change:auto!important}
}

/* Portrait tablets: single-column editorial flow with controlled photo size. */
@media (min-width:781px) and (max-width:899px){
  .grid2{grid-template-columns:1fr!important;gap:26px!important}
  .grid2 > img.photo{max-height:none!important;aspect-ratio:16/10!important}
  #temple-overview.v109-story .feature-grid{grid-template-columns:1fr!important}
  #temple-overview.v109-story .feature{aspect-ratio:16/10!important}
  .v113-sacred-grid{grid-template-columns:1fr!important}
}

/* Keep original mobile system untouched below 781px. */