/* responsive.css - tablet, laptop and large desktop rules for the public site */

/* Small tablets and up */
@media (min-width: 600px) {
  .masonry { columns: 3; column-gap: 12px; }
  .masonry .gi { margin-bottom: 12px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .tri { grid-template-columns: repeat(2, 1fr); }
  .tri .tcard.today { grid-column: 1 / -1; }
  .hero-nav { display: block; }
}

/* Tablets */
@media (min-width: 820px) {
  .wrap { padding: 0 28px; }
  .sec { padding: 68px 0; }
  .grid.c3, .grid.c4 { grid-template-columns: repeat(3, 1fr); }
  .tri { grid-template-columns: repeat(3, 1fr); }
  .tri .tcard.today { grid-column: auto; }
  .grid.hscroll { display: grid; overflow-x: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .grid.hscroll > * { flex: initial; max-width: none; }
  .split { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .darshan { grid-template-columns: 1fr 1fr; }
  .darshan-text { text-align: left; }
  .darshan .arch { justify-self: end; }
  .slide-body { padding-bottom: 88px; }
  .slide-body h1, .slide-body h2 { font-size: clamp(2.6rem, 5vw, 4rem); }
  .slide-body p { font-size: 1.1rem; margin-bottom: 1.1rem; }
  .slide-body .btn { min-height: 46px; padding: .6rem 1.4rem; font-size: .95rem; }
  /* From tablet width up, switch to a full-bleed hero: the box is now wide enough that
     object-fit:cover shows the whole photo anyway, without the letterboxed mobile card. */
  .hero { margin: 0; border-radius: 0; aspect-ratio: auto; height: clamp(440px, 60vh, 620px); box-shadow: none; }
  .slide img { object-fit: cover; object-position: 68% 32%; background: none; }
  .slide::after { background: linear-gradient(90deg, rgba(43, 10, 16, .88) 0%, rgba(43, 10, 16, .4) 45%, rgba(43, 10, 16, 0) 75%); }
  .slide-body { top: 0; display: flex; align-items: center; padding-bottom: 0; }
  .slide-body .in { width: 100%; }
  .fgrid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .masonry { columns: 4; }
}

/* Laptops: show full navigation, hide mobile navigation */
@media (min-width: 1500px) {
  body { padding-bottom: 0; }
  .nav { display: flex; }
  .hdr-actions { margin-left: 0; }
  .hdr-actions .btn-donate { display: inline-flex; }
  .menu-btn { display: none; }
  .bottomnav { display: none; }
  .floater { bottom: 24px; }
  #toasts { bottom: 24px; }
  .grid.c4 { grid-template-columns: repeat(4, 1fr); }
  .hero { height: clamp(520px, 78vh, 760px); }
}

/* Large desktop */
@media (min-width: 1500px) {
  .wrap { max-width: 1320px; }
  body { font-size: 16.5px; }
}

/* Small phones */
@media (max-width: 380px) {
  .brand-text b { font-size: 1rem; }
  .btn { padding: .55rem 1.1rem; }
}