/* ==========================================================================
   Hari Prakash Swami — hariprakashswami.org
   Hand-written HTML / CSS / JS rebuild.
   Colours sampled from the live site + Elementor kit post-26.css / post-292.css
   ========================================================================== */

:root{
  --red:        #C40C0C;   /* brand red  — footer, side panel, buttons     */
  --red-deep:   #AA1517;   /* inactive month pills                          */
  --red-dark:   #8E0808;
  --gold:       #F0A93D;   /* gold accent — active tabs, table head, lines  */
  --gold-dark:  #C9862A;

  --paper:      #F2F2F2;   /* light textured page background                */
  --paper-2:    #FFFFFF;
  --row:        #FAFBFF;
  --ink:        #22262E;
  --ink-soft:   #5B6270;
  --line:       rgba(0,0,0,.09);
  --navy:       #1E293B;   /* table borders + pagination                    */

  --white:      #FFFFFF;

  --font: "Hind Vadodara", "Noto Sans Gujarati", "Shruti", system-ui, sans-serif;

  /* One fluid scale for the whole site. Each step grows smoothly from its
     phone size at 390px wide to its desktop size at 1440px, so headings and
     body copy match on every page and every screen without step changes. */
  --h1:    clamp(30px,   20.3px + 2.48vw, 56px);
  --h2:    clamp(25px,   18.7px + 1.62vw, 42px);
  --h3:    clamp(21px,   16.9px + 1.05vw, 32px);
  --h4:    clamp(19px,   16.4px + 0.67vw, 26px);
  --h5:    clamp(17px,   15.5px + 0.38vw, 21px);
  --body:  clamp(16px,   14.9px + 0.29vw, 19px);   /* every paragraph        */
  --small: clamp(15px,   14.3px + 0.19vw, 17px);   /* nav, buttons, fields   */
  --tiny:  clamp(13.5px, 12.9px + 0.14vw, 15px);   /* meta, captions, tables */
  --micro: clamp(12.5px, 12.1px + 0.10vw, 13.5px); /* pills and badges       */

  --container: 1240px;
  --gap: 26px;
  --radius: 20px;
  --radius-pill: 82px;
  --shadow: 0 8px 26px rgba(0,0,0,.09);
  --shadow-lg: 2px 8px 23px 3px rgba(0,0,0,.20);
  --header-h: 92px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:var(--body);line-height:1.75;color:var(--ink);
  background-color:var(--paper);
  /* the paper texture: a JPEG copy of Background-1.png (329 KB instead of 1.5 MB) */
  background-image:url("../../assets/media/sized/banner/Background-1.jpg");
  background-repeat:repeat;background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold-dark)}
button{font-family:inherit}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.3;font-weight:600;color:var(--ink)}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3);font-weight:500} h4{font-size:var(--h4);font-weight:500}
p{margin:0 0 1.1em}
::selection{background:var(--gold);color:#2a1500}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   HEADER  (transparent over the hero photo)
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:900;background:transparent;transition:all .3s ease}
.site-header.is-stuck{background:rgba(18,6,6,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 26px rgba(0,0,0,.35)}
/* logo, menu and tools ride together as one block in the middle of the bar,
   with matching empty space to its left and right */
.header-inner{max-width:1600px;margin-inline:auto;padding:0 40px;height:var(--header-h);
  display:flex;align-items:center;justify-content:center;gap:34px}
.brand{flex:0 0 auto;display:flex;align-items:center}
.brand img{height:72px;width:auto}
.main-nav{flex:0 0 auto}
.main-nav ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.main-nav a{display:block;padding:10px 14px;color:#fff;font-size:var(--small);font-weight:500;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.main-nav a:hover{color:var(--gold)}
.main-nav a[aria-current="page"]{color:#F05A28}
.header-tools{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.icon-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:transparent;border:0;color:#fff;cursor:pointer;transition:all .2s ease}
.icon-btn:hover{color:var(--gold);background:rgba(255,255,255,.12)}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
.nav-toggle svg{width:28px;height:28px}
.wa-btn{border:2px solid rgba(255,255,255,.85)}
.wa-btn:hover{background:#fff;color:var(--red)}

/* ---- red side panel ---- */
.mobile-panel{position:fixed;inset:0;z-index:1000;display:none;background:rgba(0,0,0,.55)}
.mobile-panel.is-open{display:block}
.mobile-panel__inner{
  position:absolute;top:16px;right:16px;bottom:16px;width:min(430px,90vw);
  background:var(--red);border-radius:26px;box-shadow:var(--shadow-lg);
  padding:22px 44px 30px;display:flex;flex-direction:column;overflow-y:auto;
  animation:slideIn .45s cubic-bezier(.22,1,.36,1);
}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.mobile-panel__close{align-self:flex-end;background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0}
.mobile-panel .logo{width:250px;max-width:78%;margin:6px auto 20px}
.mobile-panel nav ul{list-style:none;margin:0;padding:0}
.mobile-panel nav li{border-bottom:1px solid rgba(255,255,255,.35)}
.mobile-panel nav a{display:block;padding:11px 2px;color:#fff;font-size:var(--body);font-weight:500}
.mobile-panel nav a:hover{color:#3d0000}
.mobile-panel nav a[aria-current="page"]{color:var(--gold)}
.mobile-panel nav li:has(a[aria-current="page"]){border-bottom-color:var(--gold);border-bottom-width:2px}
.mobile-panel hr{border:0;border-top:2px solid var(--gold);width:100%;margin:22px 0 20px}
.mobile-panel .socials{display:flex;justify-content:center;gap:14px;margin:0}
.mobile-panel .socials a{width:44px;height:44px;border:2px solid #fff;background:transparent}
.mobile-panel .socials a:hover{background:#fff}
.mobile-panel .socials a:hover svg{fill:var(--red)}

/* ---- search overlay ---- */
.search-overlay{position:fixed;inset:0;z-index:1100;display:none;background:rgba(0,0,0,.86);padding-top:16vh}
.search-overlay.is-open{display:block}
.search-overlay form{max-width:680px;margin-inline:auto;display:flex;gap:10px;padding:0 20px}
.search-overlay input{flex:1;padding:16px 24px;border-radius:var(--radius-pill);border:0;font-family:var(--font);font-size:var(--body)}
.search-overlay button{padding:16px 30px;border-radius:var(--radius-pill);border:0;background:var(--gold);color:#3a1d00;font-size:var(--small);font-weight:600;cursor:pointer}
.search-results{max-width:680px;margin:22px auto 0;padding:0 20px;max-height:54vh;overflow:auto}
.search-results a{display:block;background:#fff;border-radius:12px;padding:12px 18px;margin-bottom:8px;color:var(--ink)}
.search-results a:hover{background:var(--gold);color:#3a1d00}
.search-results .muted{color:var(--ink-soft);font-size:var(--tiny)}

/* ==========================================================================
   HEROES
   ========================================================================== */
main{min-height:60vh}

/* home — dark full-screen photo */
.home-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 90px;overflow:hidden;background:#060404}
.home-hero__photo{position:absolute;inset:0;z-index:0;background-position:center right;background-size:cover;background-repeat:no-repeat}
.home-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,4,4,.94) 0%,rgba(6,4,4,.80) 38%,rgba(6,4,4,.30) 66%,rgba(6,4,4,.72) 100%)}
.home-hero__mark{position:absolute;top:5%;left:50%;transform:translateX(-50%);z-index:1;width:min(560px,58vw);opacity:.10;pointer-events:none}
.home-hero .container{position:relative;z-index:2}
.home-hero__text{max-width:640px}
.home-hero h1{font-size:var(--h1);color:#fff;margin-bottom:.45em;font-weight:500}
.home-hero p{color:rgba(255,255,255,.84);font-size:var(--body);line-height:1.65;margin:0 0 .3em}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.play-link{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:var(--small)}
.play-link i{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;transition:all .25s ease}
.play-link i::before{content:"";border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:4px}
.play-link:hover i{background:var(--gold);border-color:var(--gold)}
.play-link:hover i::before{border-left-color:#3a1d00}

/* inner pages — photo banner with the site's curved bottom edge */
.page-hero{
  /* 700px tall — the banner pictures are 692px, so they sit almost 1:1.
     The uneven padding is what drops the title below the middle (~62% down);
     the smaller screens below reuse the same proportion. */
  position:relative;min-height:700px;display:grid;place-items:center;text-align:center;
  padding:calc(var(--header-h) + 170px) 0 90px;
  /* The 15 article/magazine pages have no banner picture, so they keep this
     deep red panel to carry their white title. */
  background:#2a0f0a center/cover no-repeat;color:#fff;overflow:hidden;
  border-bottom-left-radius:50% 90px;border-bottom-right-radius:50% 90px;
  margin-bottom:25px;
}
/* Where a banner picture IS set, nothing may sit behind it: those PNGs carry the
   curved bottom as transparency, and a colour there would show as a dark band. */
.page-hero[style*="background-image"]{background-color:transparent}
/* No dark wash over the photo — the banner shows the picture as it is, and the
   words carry their own shadow so they stay readable on a light one. */
.page-hero > .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:var(--h1);margin-bottom:.1em;font-weight:600;
  text-shadow:0 2px 6px rgba(0,0,0,.7),0 6px 30px rgba(0,0,0,.55)}
.page-hero .crumb{color:#fff;font-size:var(--body);
  text-shadow:0 2px 5px rgba(0,0,0,.75),0 4px 18px rgba(0,0,0,.6)}
.page-hero .crumb a{color:#fff}
.page-hero .crumb a:hover{color:var(--gold)}
.page-hero p{color:rgba(255,255,255,.9);max-width:880px;margin:14px auto 0}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-block;padding:11px 30px;border-radius:10px;border:2px solid rgba(255,255,255,.85);font-size:var(--small);font-weight:500;color:#fff;background:transparent;cursor:pointer;transition:all .25s ease}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#3a1d00;transform:translateY(-2px)}
.btn--solid{background:var(--red);border-color:var(--red);color:#fff}
.btn--solid:hover{background:var(--gold);border-color:var(--gold);color:#3a1d00}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#3a1d00;border-radius:var(--radius-pill);padding:12px 34px}
.btn--gold:hover{background:#fff;border-color:#fff;color:var(--red)}
.btn--sm{padding:7px 20px;font-size:var(--tiny)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:56px 0;position:relative}
.section--tight{padding:30px 0}
.section__head{text-align:center;margin-bottom:38px}
.section__head h2{margin-bottom:.15em;color:var(--ink)}
.section__head .sub{color:var(--gold-dark);font-size:var(--small);font-weight:600}
.divider{width:110px;height:4px;background:var(--gold);border-radius:4px;margin:0 auto 16px}
/* centred heading above tabbed galleries */
.arrowed{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:34px}
.arrowed h2{margin:0;font-size:var(--h2);font-weight:600}

.block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;box-shadow:var(--shadow)}
.block + .block{margin-top:22px}
.prose{max-width:960px;margin-inline:auto}
.prose p{font-size:var(--body);color:var(--ink)}

.quote{background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);color:#fff;border-radius:40px;padding:44px 50px;text-align:center;box-shadow:var(--shadow)}
.quote p{font-size:var(--h4);line-height:1.75;color:#fff}
.quote .attrib{color:var(--gold);font-weight:600;font-size:var(--small)}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(0,0,0,.16)}
.card__media{aspect-ratio:16/10;overflow:hidden;background:#e9e9e9}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__body h3{font-size:var(--h4);font-weight:600;margin:0;color:var(--ink)}
.card__body p{font-size:var(--body);color:var(--ink-soft);margin:0}
.card__meta{font-size:var(--tiny);color:var(--gold-dark);font-weight:600}
.card__foot{margin-top:auto;padding-top:10px}

/* photo + caption tiles (હરિનો માર્ગ) */
.photo-grid{display:grid;gap:30px;grid-template-columns:repeat(3,1fr)}
.photo-card{text-align:center}
.photo-card img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:10px;box-shadow:var(--shadow);cursor:zoom-in;transition:transform .35s ease}
.photo-card img:hover{transform:translateY(-5px)}
.photo-card figcaption{margin-top:14px;font-size:var(--small);font-weight:600;color:var(--ink)}

.tile{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s ease}
.tile:hover{transform:translateY(-5px)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* download gallery (હરિ દર્શન) — image, size caption, red Download button */
.gallery{display:grid;gap:26px;grid-template-columns:repeat(4,1fr)}
/* caption and Download button sit centred under the picture */
.gallery figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gallery figure img{width:100%;object-fit:cover;border-radius:8px;box-shadow:var(--shadow);cursor:zoom-in}
/* the size caption was set in --micro and read as fine print — --small is the
   same step the buttons and nav use, so it carries at arm's length */
.gallery figcaption{font-size:var(--small);line-height:1.5;font-weight:500;color:var(--ink)}
.gallery .dl{align-self:center;background:var(--red);color:#fff;font-size:var(--small);font-weight:500;padding:9px 24px;border-radius:5px}
.gallery .dl:hover{background:var(--gold);color:#3a1d00}
.gallery--plain{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gallery--plain figure img{border-radius:12px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1200;display:none;background:rgba(0,0,0,.94);place-items:center}
.lightbox.is-open{display:grid}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:10px}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;background:rgba(255,255,255,.16);border:0;color:#fff;cursor:pointer;width:54px;height:54px;border-radius:50%;font-size:26px}
.lightbox__close{top:24px;right:24px}
.lightbox__prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:var(--gold);color:#3a1d00}

/* tabs — red pills, active gold */
.tabs{margin-bottom:34px}
.tabs__bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0}
.tab-btn{border:0;background:var(--red-deep);color:#fff;font-size:var(--small);font-weight:500;padding:9px 24px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .22s ease}
.tab-btn:hover{background:var(--red)}
.tab-btn.is-active{background:var(--gold);color:#3d2200}
.tab-panel[hidden]{display:none}

/* video */
.video-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:var(--shadow);cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video__play span{width:72px;height:72px;border-radius:50%;background:rgba(196,12,12,.92);display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.video__play span::before{content:"";border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;margin-left:5px}

/* ==========================================================================
   DATA TABLE  (હરિ કથા / વિચરણ હિસ્ટ્રી)
   ========================================================================== */
.katha-board{max-width:1200px;margin-inline:auto}
.table-tools{display:flex;justify-content:flex-end;margin-bottom:14px}
.table-tools input{
  width:100%;max-width:260px;padding:9px 14px;border:1px solid var(--navy);border-radius:4px;
  background:#f1f5f9;font-family:var(--font);font-size:var(--small);color:var(--navy);
}
.table-tools input::placeholder{color:#94a3b8}
.table-tools .count{display:none}
.data-table-wrap{border:1px solid var(--navy);border-radius:4px;overflow:auto;background:#fff;min-height:545px}
.data-table{width:100%;border-collapse:collapse;font-family:var(--font);font-size:var(--tiny);min-width:720px}
.data-table th{background:var(--gold);color:#20232b;text-align:center;padding:15px 16px;font-weight:600;border-inline-end:1px solid rgba(0,0,0,.10)}
.data-table th:last-child{border-inline-end:0}
.data-table td{padding:13px 18px;border-top:1px solid #e6e8ee;color:#2f3542}
.data-table td:nth-child(2),.data-table td:nth-child(3),.data-table td:nth-child(4){text-align:start}
.data-table tbody tr{background:var(--row)}
.data-table tbody tr:nth-child(even){background:#fff}
.data-table tbody tr:hover{background:#fdf3e3}
.pager{display:flex;gap:6px;justify-content:flex-end;align-items:center;padding:18px 0 0;flex-wrap:wrap}
.pager button{border:0;background:var(--navy);color:#fff;border-radius:4px;padding:7px 13px;cursor:pointer;font-size:var(--tiny);font-family:var(--font);min-width:34px}
.pager button:first-child,.pager button:last-child{background:#94a3b8}
.pager button.is-active{background:var(--gold);color:#20232b}
.pager button:hover:not(:disabled){background:var(--red);color:#fff}
.pager button:disabled{opacity:.45;cursor:default}

/* audio playlist */
.player{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.player__now{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;padding:22px 26px}
.player__now h3{color:#fff;margin:0 0 12px;font-size:var(--h4)}
.player__now audio{width:100%}
.player__list{max-height:540px;overflow:auto}
.track{display:flex;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid var(--line);cursor:pointer;transition:background .2s ease}
.track:hover{background:#fdf3e3}
.track.is-playing{background:rgba(196,12,12,.08)}
.track__no{width:36px;color:var(--ink-soft);font-size:var(--tiny);flex:0 0 auto}
.track__title{flex:1;font-size:var(--small);color:var(--ink)}
/* the arrow glyph alone is only ~9px wide, far too narrow to tap */
.track__dl{flex:0 0 auto;color:var(--red);font-size:17px;font-weight:600;
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  margin:-6px 0;transition:background .2s ease}
.track__dl:hover{background:rgba(196,12,12,.1)}

/* letters / tributes */
.letter{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 38px;box-shadow:var(--shadow);margin-bottom:24px}
.letter h3{color:var(--red);border-bottom:3px solid var(--gold);display:inline-block;padding-bottom:6px}
.letter .scan{margin-top:20px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.letter .scan img{border-radius:10px;box-shadow:var(--shadow);cursor:zoom-in}
.tribute{background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--gold);border-radius:14px;padding:24px 28px;box-shadow:var(--shadow)}
.tribute .attrib{color:var(--red);font-weight:600;font-size:var(--small);margin-top:10px;display:block}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 34px;box-shadow:var(--shadow);max-width:800px;margin-inline:auto}
.form .row{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-bottom:16px}
.form label{display:block;font-size:var(--small);font-weight:500;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--line);font-family:var(--font);font-size:var(--small);color:#676767}
.form textarea{min-height:130px;resize:vertical}

/* lists / anchor nav */
.link-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.link-list a{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 22px;color:var(--ink);font-size:var(--small);box-shadow:var(--shadow)}
.link-list a:hover{background:var(--red);color:#fff}
.anchor-nav{position:sticky;top:calc(var(--header-h) + 14px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;max-height:74vh;overflow:auto;box-shadow:var(--shadow)}
.anchor-nav h4{font-size:var(--h4);color:var(--red);margin-bottom:10px}
.anchor-nav a{display:block;padding:7px 10px;border-radius:8px;font-size:var(--small);color:var(--ink)}
.anchor-nav a:hover,.anchor-nav a.is-active{background:var(--red);color:#fff}
.with-aside{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.note{background:rgba(240,169,61,.14);border:1px solid rgba(240,169,61,.5);border-radius:12px;padding:14px 20px;font-size:var(--small);color:var(--ink-soft)}

/* ==========================================================================
   FOOTER  — red block, 180px top corners, contact form, logo, socials
   ========================================================================== */
.site-footer{
  background:var(--red);color:#fff;border-radius:180px 180px 0 0;margin-top:70px;
  padding:100px 0 30px;position:relative;overflow:hidden;
}
.site-footer::after{
  content:"";position:absolute;right:3%;top:96px;width:min(430px,30vw);height:min(430px,30vw);
  background:url("../../assets/media/uploads/2024/10/Asset-2-1.png") center right/contain no-repeat;
  pointer-events:none;z-index:1;
}
.site-footer .container{position:relative;z-index:2}
.footer-form{max-width:460px;margin-inline:auto;display:grid;gap:14px;position:relative;z-index:2}
.footer-form input,.footer-form textarea{
  width:100%;padding:13px 20px;border-radius:10px;border:0;background:#fff;color:#676767;
  font-family:var(--font);font-size:var(--small);
}
.footer-form textarea{min-height:120px;resize:vertical}
.footer-form .btn--gold{justify-self:center;margin-top:6px}
.footer-logo{width:min(430px,72%);margin:54px auto 0}
.footer-rule{width:min(430px,72%);height:3px;background:var(--gold);border-radius:3px;margin:18px auto 26px}
.footer-contact{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;font-size:var(--small)}
.footer-contact a{color:#fff;display:inline-flex;align-items:center;gap:10px}
.footer-contact a:hover{color:#3d0000}
.footer-contact svg{width:22px;height:22px;fill:#fff}
.socials{display:flex;gap:16px;justify-content:center;margin-top:24px}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.9);transition:all .25s ease}
.socials a:hover{background:#fff;transform:translateY(-3px)}
.socials svg{width:20px;height:20px;fill:#fff}
.socials a:hover svg{fill:var(--red)}
.footer-ornament{width:min(320px,60%);margin:30px auto 14px;opacity:.95}
.footer-bottom{text-align:center;font-size:var(--small);color:#fff}

.to-top{position:fixed;right:22px;bottom:22px;z-index:800;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;border:0;cursor:pointer;display:none;place-items:center;box-shadow:var(--shadow-lg);font-size:22px}
.to-top.is-visible{display:grid}
.to-top:hover{background:var(--gold);color:#3a1d00}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  .main-nav a{padding:10px 10px;font-size:var(--small)}
  .header-inner{padding:0 20px;gap:16px}
  .brand img{height:58px}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  .main-nav{display:none}
  /* with the menu gone there is nothing to centre — logo left, buttons right */
  .header-inner{justify-content:space-between}
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .with-aside{grid-template-columns:1fr}
  .anchor-nav{position:static;max-height:none}
  .footer-form{margin-inline:auto}
  .site-footer::after{opacity:.3;right:-4%;top:70px}
  .home-hero::after{background:linear-gradient(180deg,rgba(6,4,4,.70) 0%,rgba(6,4,4,.86) 55%,rgba(6,4,4,.95) 100%)}
  .page-hero{min-height:520px;padding:calc(var(--header-h) + 100px) 0 70px}
}
@media (max-width:767px){
  :root{--gap:18px;--header-h:74px}
  .brand img{height:46px}
  .section{padding:36px 0}
  .grid--2,.grid--3,.grid--4,.photo-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);gap:16px}
  .block{padding:22px 20px}
  .quote{padding:28px 22px;border-radius:24px}
  .site-footer{border-radius:100px 100px 0 0;padding:70px 0 24px}
  .footer-form{padding-inline:6px}
  .footer-contact{gap:14px;flex-direction:column;align-items:center}
  .form .row{grid-template-columns:1fr}
  .home-hero{min-height:auto;padding-top:calc(var(--header-h) + 24px)}
  .home-hero__mark{width:72vw;top:2%}
  .page-hero{min-height:360px;padding:calc(var(--header-h) + 60px) 0 50px;
    border-bottom-left-radius:50% 40px;border-bottom-right-radius:50% 40px}
  .mobile-panel__inner{padding:20px 24px 26px;border-radius:22px}
  .data-table{font-size:var(--tiny)}
}
@media print{.site-header,.site-footer,.to-top,.mobile-panel,.search-overlay{display:none!important}body{background:#fff}}

/* ==========================================================================
   v4 — additions: uniform media grids, sliders, vandana rows, icon cards
   ========================================================================== */

/* one uniform row of media tiles (photo + video posters together) */
.media-grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.media-grid > *{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#111}
.media-grid img{width:100%;height:100%;object-fit:cover;display:block}
.media-grid figure{margin:0;cursor:zoom-in}

/* a lone image inside a text block — centred, readable size */
.figure-one{max-width:430px;margin:26px auto 0}
.figure-one img{width:100%;border-radius:12px;box-shadow:var(--shadow);cursor:zoom-in}
.figure-wide{max-width:760px;margin:26px auto 0}

/* letter scans (આશીર્વાદ અને પ્રાર્થના) */
.letter .scan{grid-template-columns:repeat(auto-fit,minmax(300px,420px));justify-content:center}
.letter .scan img{width:100%;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:10px}

/* line-art icon cards (ડાઉનલોડ) — never crop the artwork.
   The round icon stands on its own above a white panel: the panel used to be
   pulled up over the artwork and sliced its bottom off, so it now sits clear
   and the two are tied together by the shadow and the gold rule instead. */
.card--icon{border:0;background:transparent;box-shadow:none;
  /* the icon's shadow reaches past the card, so nothing here may clip */
  overflow:visible;text-align:center;transition:transform .35s ease}
.card--icon .card__media{aspect-ratio:1/1;background:transparent;display:grid;place-items:center;
  /* the circle filled the whole column and read as heavy — hold it a little
     narrower and centre it, so the panel below carries its own weight */
  padding:0;overflow:visible;max-width:300px;margin-inline:auto}
.card--icon .card__media img{width:100%;height:100%;object-fit:contain;
  /* a red-tinted glow under the circle, so it reads as lifted off the paper */
  filter:drop-shadow(0 14px 26px rgba(196,12,12,.26));
  transition:transform .35s ease,filter .35s ease}
/* the picture is a link as well as the button — the clickable area is the
   round icon itself, not the transparent corners of the square PNG */
.card--icon .card__media a{display:block;width:100%;height:100%;border-radius:50%}
.card--icon .card__body{background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-top:14px;
  align-items:center;gap:0;padding:24px 22px 26px;
  transition:border-color .35s ease,box-shadow .35s ease}
/* gold rule under the title — it widens as the card is hovered */
.card--icon .card__body h3{padding-bottom:14px;position:relative}
.card--icon .card__body h3::after{content:"";position:absolute;left:50%;bottom:0;
  width:44px;height:3px;margin-left:-22px;border-radius:3px;background:var(--gold);
  transition:width .35s ease,margin-left .35s ease}
.card--icon .card__foot{padding-top:16px}

.card--icon:hover{transform:translateY(-6px)}
.card--icon:hover .card__media img{transform:scale(1.05);
  filter:drop-shadow(0 22px 34px rgba(196,12,12,.38))}
.card--icon:hover .card__body{border-color:var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.15)}
.card--icon:hover .card__body h3::after{width:88px;margin-left:-44px}
/* the button picks up the same gold the rest of the site uses on hover */
.card--icon:hover .btn--solid{background:var(--gold);border-color:var(--gold);color:#3a1d00}
/* વૉલપેપર has only two of these cards — left alone they would take half the
   container each, so hold the pair to the ડાઉનલોડ grid's column width */
.grid--icon-pair{max-width:820px;margin-inline:auto}

/* ---------------------------------------------------------------- slider */
.slider{position:relative;--per:3}
.slider__track{
  display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__slide{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
.slider__slide img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;box-shadow:var(--shadow);cursor:zoom-in;display:block}
.slider--square .slider__slide img{aspect-ratio:1/1}
.slider__prev,.slider__next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(196,12,12,.88);color:#fff;font-size:24px;line-height:1;
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:background .2s ease;
}
.slider__prev{left:10px}
.slider__next{right:10px}
.slider__prev:hover,.slider__next:hover{background:var(--gold);color:#3a1d00}
.slider__dots{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.slider__dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(0,0,0,.2);cursor:pointer;padding:0;
  position:relative;transition:all .25s ease}
/* the dot stays 10px; what a finger can hit is 32px, and nothing moves */
.slider__dots button::after{content:"";position:absolute;inset:-11px}
.slider__dots button.is-active{background:var(--red);width:26px;border-radius:6px}

/* ------------------------------------------------------- હરિ વંદના rows */
.vandana{display:grid;gap:36px}
.vandana__row{display:grid;grid-template-columns:210px 1fr;gap:30px;align-items:center}
.vandana__row--rev{grid-template-columns:1fr 210px}
.vandana__row--rev .vandana__pic{order:2}
.vandana__row--noimg{grid-template-columns:1fr}
.vandana__pic img{width:100%;max-width:210px;aspect-ratio:201/251;object-fit:cover;border-radius:8px;box-shadow:var(--shadow);cursor:zoom-in}
.vandana__text{background:#fff;border:1px solid var(--line);border-inline-start:5px solid var(--gold);border-radius:18px;padding:26px 30px;box-shadow:var(--shadow)}
.vandana__text p{margin:0 0 .6em}
.vandana__text .attrib{color:var(--red);font-weight:600;display:block;margin-top:10px}
.vandana__text .src{color:var(--gold-dark);font-size:var(--tiny);display:block;margin-top:4px}

@media (max-width:1080px){
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .slider{--per:2!important}
  .vandana__row,.vandana__row--rev{grid-template-columns:170px 1fr}
  .vandana__row--rev .vandana__pic{order:0}
  /* a row with no picture keeps its single full-width column — without this the
     rule above squeezes its text into the 170px picture column */
  .vandana__row--noimg{grid-template-columns:1fr}
}
@media (max-width:767px){
  .media-grid{grid-template-columns:1fr}
  .slider{--per:1!important}
  .slider__prev,.slider__next{width:38px;height:38px;font-size:20px}
  .vandana__row,.vandana__row--rev{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:start}
  .vandana__pic img{max-width:200px}
  /* one card per row down here — keep the circle a sensible size, not the
     full width of the screen */
  .card--icon .card__media{max-width:230px;margin-inline:auto}
}

/* document scans / single artwork inside a text block — never cropped */
.scan-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,400px));justify-content:center;margin-top:28px}
.scan-grid figure{margin:0}
.scan-grid img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow);border:1px solid var(--line);cursor:zoom-in;background:#fff}
@media (max-width:767px){.scan-grid{grid-template-columns:1fr}}

/* single-slide square sliders (હરિ સંગ હેત) — keep them a sane size */
.slider--square{max-width:820px;margin-inline:auto}

/* ==========================================================================
   HOME PAGE — rebuilt to match page 28 section for section
   ========================================================================== */
.hero28{
  position:relative;min-height:min(1750px,100vh);display:flex;align-items:center;
  padding:calc(var(--header-h) + 60px) 0 90px;overflow:hidden;background:#0b0605;
}
.hero28__bg{position:absolute;inset:0;background-position:top center;background-size:cover;background-repeat:no-repeat}
.hero28::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,4,.93) 0%,rgba(8,5,4,.72) 34%,rgba(8,5,4,.22) 56%,rgba(8,5,4,.78) 100%)}
.hero28 .container{position:relative;z-index:2;max-width:1500px}
.hero28__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero28__text{max-width:620px}
.hero28__text h1{color:#fff;font-size:var(--h1);font-weight:500;margin-bottom:.5em}
.hero28__text p{color:rgba(255,255,255,.86);font-size:clamp(15px,1.15vw,19px);line-height:1.7;margin:0 0 .3em}
.hero28__actions{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.hero28__side{display:grid;gap:26px;justify-items:end}
.quote-card{
  background:rgba(10,6,5,.42);backdrop-filter:blur(3px);border-radius:26px;padding:26px 30px;
  color:#fff;max-width:520px;text-align:center;
}
.quote-card p{font-size:var(--body);line-height:1.7;color:#fff;margin:0 0 12px}
.quote-card .attrib{display:block;font-size:var(--small);font-weight:600;color:#fff}
.quote-card__pic{width:120px;margin:0 auto 16px}
.quote-card__pic img{width:100%;border-radius:14px}
.live-card{background:rgba(10,6,5,.42);border-radius:26px;padding:20px 24px;max-width:520px;color:#fff;width:100%}
.live-card h3{color:#fff;font-size:var(--h4);margin:0 0 12px}
.live-card__tag{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;border-radius:50px;padding:7px 18px;font-size:var(--tiny);font-weight:500}
.live-card__tag i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center}
.live-card__tag i::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff;margin-left:2px}
.live-card .slider__slide img{aspect-ratio:16/10;border-radius:16px}

/* saffron poster carousel band */
.band-saffron{background:var(--gold);border-radius:30px 0 0 30px;padding:50px 0 50px 50px;margin-left:calc((100vw - min(100vw,var(--container)))/2 + 24px)}
.band-saffron .slider__slide img{aspect-ratio:1/1;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.band-saffron .slider__prev,.band-saffron .slider__next{background:rgba(196,12,12,.92)}

/* updates header bar + bento */
.updates-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid var(--red);padding-bottom:14px;margin-bottom:34px}
.updates-head h2{margin:0;font-size:var(--h2)}
.date-pill{display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;border-radius:50px;padding:10px 26px 10px 14px}
.date-pill img{width:44px;height:auto}
.date-pill span{font-size:var(--micro);font-weight:500;color:#fff}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bento > :first-child{grid-column:span 2}
.bento{align-items:start}
.bento > :first-child .card__media{aspect-ratio:16/9}
.bento .card__media{aspect-ratio:4/3}

/* saffron band with two cards */
.band-updates{background:var(--gold);padding:70px 0;margin-top:90px}
.band-updates .card{background:#fff}

/* હરિ વાણી block */
.harivani{
  position:relative;min-height:640px;display:flex;flex-direction:column;justify-content:space-evenly;
  align-items:center;text-align:center;padding:70px 0;margin-top:90px;
  background-position:center right;background-repeat:no-repeat;background-size:cover;border-radius:30px;overflow:hidden;
}
.harivani::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55)}
.harivani > *{position:relative;z-index:2}
.harivani img.mark{width:min(280px,60%);margin:0 auto}
.harivani h2{margin:18px 0 12px}
.harivani p{max-width:760px;margin-inline:auto}
.harivani__row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.harivani__row img{width:min(210px,40vw);border-radius:14px;box-shadow:var(--shadow)}
.harivani img.orn{width:min(300px,60%);margin:22px auto 0}

/* મહત્વપૂર્ણ તારીખો */
.dates-block{
  position:relative;margin-top:110px;padding:80px 0 90px;overflow:hidden;
  background-position:top right;background-size:cover;background-repeat:no-repeat;
  border-radius:200px 0 0 0;
}
.dates-block::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55)}
.dates-block > .container{position:relative;z-index:2}
.dates-block img.orn{width:min(300px,60%);margin:0 auto 14px}
.dates-block h2{text-align:center;margin-bottom:34px}
.dates-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 34px}
.date-row{
  display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 22px;box-shadow:var(--shadow);
}
.date-row .d{flex:0 0 auto;min-width:170px;color:var(--red);font-weight:600;font-size:var(--tiny)}
.date-row .t{font-size:var(--tiny);color:var(--ink)}

@media (max-width:1080px){
  .hero28__grid{grid-template-columns:1fr;gap:34px}
  .hero28__side{justify-items:stretch}
  .quote-card,.live-card{max-width:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > :first-child{grid-column:span 2;grid-row:auto}
  .band-saffron{margin-left:24px;padding:36px 0 36px 30px}
  .dates-grid{grid-template-columns:1fr}
  .dates-block{border-radius:110px 0 0 0}
}
@media (max-width:767px){
  .hero28{min-height:auto;padding-top:calc(var(--header-h) + 26px)}
  .bento{grid-template-columns:1fr}
  .bento > :first-child{grid-column:auto}
  .band-saffron{margin-left:14px;border-radius:22px 0 0 22px;padding:26px 0 26px 20px}
  .updates-head{flex-direction:column;align-items:flex-start}
  .date-row{flex-direction:column;align-items:flex-start;gap:6px}
  .date-row .d{min-width:0}
  .dates-block{border-radius:60px 0 0 0;padding:50px 0 60px}
}

/* ==========================================================================
   HOME PAGE — full responsive pass.  EVERY rule below is scoped to
   `.home-page`, so no other page in the site is affected.
   ========================================================================== */

/* the mobile-only portrait the live site swaps in below 767px */
.home-page .hero28__mobile-photo{display:none}
@media (min-width:768px){.home-page .hero28__mobile-photo{display:none!important}}

/* ---------- fluid base: the hero never needs a breakpoint to look right --- */
.home-page .hero28{
  min-height:auto;
  padding:calc(var(--header-h) + clamp(28px,5vw,70px)) 0 clamp(40px,7vw,90px);
}
.home-page .hero28__grid{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,60px);
}
.home-page .hero28__text{max-width:min(620px,100%)}
.home-page .hero28__text h1{font-size:var(--h1);line-height:1.25}
.home-page .hero28__text p{font-size:clamp(14.5px,1.25vw,19px)}
.home-page .hero28__actions{gap:clamp(14px,2vw,24px)}
.home-page .quote-card,.home-page .live-card{max-width:min(520px,100%);width:100%}
.home-page .quote-card p{font-size:var(--body)}
.home-page .hero28__side{min-width:0}

/* poster band: use % of the section, never 100vw (100vw includes the scrollbar) */
.home-page .band-saffron{
  margin-left:clamp(14px,calc((100% - var(--container))/2 + 24px),160px);
  padding:clamp(24px,3.4vw,50px) 0 clamp(24px,3.4vw,50px) clamp(18px,3vw,50px);
  border-radius:clamp(18px,2.4vw,30px) 0 0 clamp(18px,2.4vw,30px);
}

.home-page .updates-head h2,.home-page .harivani h2,.home-page .dates-block h2{
  font-size:var(--h2);
}
.home-page .date-pill{padding:8px clamp(14px,2vw,26px) 8px 12px}
.home-page .date-pill img{width:clamp(30px,3vw,44px)}
.home-page .date-pill span{font-size:var(--micro)}

.home-page .harivani{min-height:clamp(340px,52vw,640px);padding:clamp(34px,5vw,70px) clamp(16px,3vw,40px)}
.home-page .dates-block{
  border-radius:clamp(50px,14vw,200px) 0 0 0;
  padding:clamp(44px,6vw,80px) 0 clamp(50px,6vw,90px);
  margin-top:clamp(50px,8vw,110px);
}
.home-page .band-updates{padding:clamp(40px,6vw,70px) 0;margin-top:clamp(46px,7vw,90px)}
.home-page .date-row{padding:clamp(12px,1.6vw,16px) clamp(14px,2vw,22px)}
.home-page .date-row .d{font-size:var(--tiny)}
.home-page .date-row .t{font-size:var(--tiny)}

/* ---------------------------------------------------- ≥1600px : wide desks */
@media (min-width:1600px){
  .home-page .hero28 .container{max-width:1560px}
  .home-page .hero28{min-height:min(1750px,94vh)}
}

/* ---------------------------------------------------------- 1281–1440 ---- */
@media (max-width:1440px){
  .home-page .hero28{min-height:min(1750px,96vh)}
}

/* ------------------------------------------------------------- ≤1280 ----- */
@media (max-width:1280px){
  .home-page .band-saffron .slider{--per:3!important}
  .home-page .bento{grid-template-columns:repeat(3,1fr)}
}

/* ------------------------------------------------- ≤1080 : tablet land --- */
@media (max-width:1080px){
  .home-page .hero28{min-height:auto}
  .home-page .hero28__grid{grid-template-columns:1fr;gap:30px}
  .home-page .hero28__side{justify-items:stretch}
  .home-page .hero28::after{
    background:linear-gradient(180deg,rgba(6,4,4,.62) 0%,rgba(6,4,4,.80) 45%,rgba(6,4,4,.94) 100%);
  }
  .home-page .hero28__bg{background-position:top center}
  .home-page .header-tools{margin-inline-start:auto}
  .home-page .band-saffron .slider{--per:3!important}
  .home-page .bento{grid-template-columns:repeat(2,1fr)}
  .home-page .bento > :first-child{grid-column:span 2}
  .home-page .dates-grid{grid-template-columns:1fr;gap:14px}
}

/* --------------------------------------------------- ≤900 : small tablet - */
@media (max-width:900px){
  .home-page .band-saffron .slider{--per:2!important}
  .home-page .updates-head{gap:14px}
  .home-page .header-tools{margin-inline-start:auto}
}

/* ------------------------------------------------------ ≤767 : phones ---- */
@media (max-width:767px){
  /* phones: the live site swaps the background photo for mo-1.png, and the
     whole hero stays DARK so the white logo + icons in the header stay readable */
  .home-page .hero28{
    display:block;background:#170b06;
    padding:calc(var(--header-h) + 12px) 0 30px;
  }
  .home-page .hero28__bg{display:none}
  .home-page .hero28::after{display:none}
  .home-page .hero28__mark{display:none}
  .home-page .hero28 .container{width:100%;padding-inline:14px}
  .home-page .hero28__mobile-photo{
    display:block!important;width:100%;height:min(58vh,86vw);border-radius:14px;
    object-fit:cover;object-position:center top;
  }
  .home-page .hero28__grid{gap:14px}
  .home-page .hero28__text{
    background:rgba(38,20,12,.72);border:1px solid rgba(255,255,255,.10);
    border-radius:14px;padding:18px 16px 20px;max-width:none;text-align:center;
  }
  .home-page .hero28__text h1{
    font-size:var(--h1);color:#fff;text-align:center;
    font-weight:600;margin-bottom:.6em;
  }
  .home-page .hero28__text p{
    color:rgba(255,255,255,.90);font-size:clamp(12.5px,3.4vw,14.5px);
    line-height:1.6;text-align:center;margin:0 0 .35em;
  }
  .home-page .hero28__actions{justify-content:center;margin-top:18px;gap:14px;flex-wrap:nowrap}
  .home-page .hero28__actions .btn{padding:8px 18px;font-size:var(--tiny);border-width:1.5px;white-space:nowrap}
  .home-page .play-link{font-size:var(--tiny);gap:8px;white-space:nowrap}
  .home-page .play-link i{width:32px;height:32px;border-width:1.5px}
  .home-page .play-link i::before{border-width:6px 0 6px 10px}

  /* the phone header carries the logo, the menu button and WhatsApp */
  .home-page .site-header{background:transparent}
  .home-page .header-tools{margin-inline-start:auto}
  .home-page .header-tools [data-search-open]{display:none}
  .home-page .nav-toggle,
  .home-page .header-tools .wa-btn{width:42px;height:42px}

  .home-page .quote-card{
    background:rgba(38,20,12,.72);border:1px solid rgba(255,255,255,.10);
    border-radius:14px;padding:20px 16px;text-align:center;
  }
  .home-page .quote-card p{font-size:var(--body);line-height:1.7}
  .home-page .quote-card__pic{width:96px}
  .home-page .live-card{
    background:rgba(38,20,12,.72);border:1px solid rgba(255,255,255,.10);
    border-radius:14px;padding:16px 14px;
  }
  .home-page .live-card h3{font-size:var(--h4)}

  /* one poster at a time here, so the band sits evenly instead of running off
     the right edge the way it does on a wide screen */
  .home-page .band-saffron{margin-left:12px;margin-right:12px;padding:22px 16px;border-radius:18px}
  .home-page .band-saffron .slider{--per:1!important}
  .home-page .band-saffron .slider__prev,.home-page .band-saffron .slider__next{width:36px;height:36px;font-size:19px}
  .home-page .band-saffron .slider__prev{left:6px}
  .home-page .band-saffron .slider__next{right:6px}

  .home-page .updates-head{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:10px}
  .home-page .bento{grid-template-columns:1fr;gap:18px}
  .home-page .bento > :first-child{grid-column:auto}
  .home-page .bento .card__media,
  .home-page .bento > :first-child .card__media{aspect-ratio:16/10}
  .home-page .band-updates .grid--2{grid-template-columns:1fr}

  .home-page .harivani{border-radius:22px;min-height:0;background-position:center}
  .home-page .harivani img.mark{width:min(190px,58%)}
  .home-page .harivani p{font-size:var(--body)}
  .home-page .harivani__row{gap:14px}
  .home-page .harivani__row img{width:calc(50% - 7px)}
  .home-page .harivani img.orn{width:min(220px,62%)}

  .home-page .dates-block{border-radius:44px 0 0 0}
  .home-page .dates-block img.orn{width:min(220px,62%)}
  .home-page .date-row{flex-direction:row;align-items:flex-start;gap:12px;padding:13px 15px}
  .home-page .date-row .d{min-width:96px;font-size:var(--tiny);line-height:1.45}
  .home-page .date-row .t{font-size:var(--tiny);line-height:1.45}
}

/* ------------------------------------------------- ≤480 : small phones --- */
@media (max-width:480px){
  .home-page .container{padding-inline:16px}
  .home-page .hero28__text{padding:17px 14px 19px;border-radius:14px}
  .home-page .hero28__actions{gap:12px}
  .home-page .hero28__mobile-photo{border-radius:12px;height:min(56vh,92vw)}
  .home-page .quote-card p{font-size:var(--body)}
  .home-page .quote-card__pic{width:80px}
  .home-page .date-pill{width:100%;justify-content:center}
  .home-page .updates-head h2{font-size:var(--h2)}
  .home-page .card__body{padding:15px 16px}
  .home-page .card__body p{font-size:var(--body)}
  .home-page .harivani__row img{width:100%}
  .home-page .date-row{flex-direction:column;gap:4px}
  .home-page .date-row .d{min-width:0}
  .home-page .dates-block{border-radius:34px 0 0 0}
}

/* ------------------------------------------------- ≤360 : tiny phones ---- */
@media (max-width:360px){
  .home-page .container{padding-inline:13px}
  .home-page .hero28__text h1{font-size:var(--h1)}
  .home-page .hero28__text p{font-size:13.5px}
  .home-page .quote-card p{font-size:var(--body)}
  .home-page .band-saffron{margin-left:9px;margin-right:9px;padding:18px 12px}
  .home-page .updates-head h2{font-size:var(--h2)}
}

/* --------------------------------- short landscape phones (height-driven) - */
@media (max-height:520px) and (orientation:landscape){
  .home-page .hero28{min-height:auto;padding-top:calc(var(--header-h) + 16px)}
}

/* the LIVE card's slider is always one slide wide, at every breakpoint */
.home-page .live-card .slider{--per:1!important}
.home-page .live-card .slider__prev{left:8px}
.home-page .live-card .slider__next{right:8px}

/* ==========================================================================
   v10 — page-specific layouts rebuilt from the live site
   ========================================================================== */


/* ---------------------------------------------------- હરિ વાણી : 15 posts */
.vani-list{display:flex;flex-direction:column;gap:50px}
.vani-post{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.vani-post--rev .vani-post__media{order:2}
.vani-post__media{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.vani-post__media img{width:100%;border-radius:8px;cursor:zoom-in}
.vani-post__text{display:flex;flex-direction:column;gap:10px}
.vani-post__name{font-family:var(--font);font-size:var(--h4);font-weight:500;color:var(--red);margin:0}
.vani-post__date{font-size:var(--body);font-weight:500;color:var(--red);margin:0}
.vani-post__body p{text-align:justify;font-size:var(--body);line-height:28px;color:#000;margin:0 0 14px}
.vani-more{border:0;padding:0;margin-top:4px}
.vani-more > summary{
  list-style:none;cursor:pointer;color:var(--red);font-weight:600;font-size:var(--small);
  display:inline-flex;align-items:center;gap:8px;
}
.vani-more > summary::-webkit-details-marker{display:none}
.vani-more > summary::after{content:"▾";transition:transform .25s ease}
.vani-more[open] > summary::after{transform:rotate(180deg)}
.vani-more[open] > summary .lbl-closed{display:none}
.vani-more:not([open]) > summary .lbl-open{display:none}
.vani-more__inner{padding-top:12px}

/* ------------------------------------------------- હરિ પોડકાસ્ટ : 2-up ---- */
.podcast-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.podcast-grid .video{border-radius:0;box-shadow:none}

/* ------------------------------- સ્વામિનારાયણ સંપ્રદાય : menu + one panel - */
.sl-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}
/* Accordion side menu — colours and metrics taken from the live site's
   Essential-Addons menu widget: row #F1ECEC, hover #CAC9C9, sub-menu #DADADA,
   red indicator box #C40C0C that turns #F44336 while its group is open. */
.sl-menu{--sl-row:#F1ECEC;--sl-row-hover:#CAC9C9;--sl-sub:#DADADA;--sl-ind:#C40C0C;--sl-ind-open:#F44336;
  max-height:calc(100vh - var(--header-h) - 40px);overflow:auto;position:sticky;top:calc(var(--header-h) + 16px);
  overscroll-behavior:contain}
.sl-list,.sl-sub{list-style:none;margin:0;padding:0}

.sl-menu button{
  position:relative;display:flex;align-items:center;width:100%;text-align:start;border:0;cursor:pointer;
  font-family:var(--font);color:var(--ink);background:var(--sl-row);
  min-height:50px;padding:6px 52px 6px 20px;font-size:var(--small);line-height:1.45;
  border-bottom:1px solid rgba(0,0,0,.07);transition:background .15s,color .15s;
}
.sl-menu .sl-parent,.sl-list > li > .sl-leaf{font-weight:600}
.sl-menu button:hover{background:var(--sl-row-hover);color:var(--red)}
.sl-menu .sl-leaf{padding-right:20px}
.sl-list > li:last-child > button:last-child{border-bottom:0}

/* the red chevron box on a group row */
.sl-ind{position:absolute;top:50%;right:10px;translate:0 -50%;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:#fff;border:1px solid var(--sl-ind);border-radius:2px;transition:border-color .2s}
.sl-ind::before{content:"";width:8px;height:8px;margin-top:-3px;
  border-right:2px solid var(--sl-ind);border-bottom:2px solid var(--sl-ind);
  rotate:45deg;transition:rotate .3s,border-color .2s}
.sl-parent[aria-expanded="true"] + .sl-sub{display:block}
.sl-parent[aria-expanded="true"] .sl-ind{border-color:var(--sl-ind-open)}
.sl-parent[aria-expanded="true"] .sl-ind::before{rotate:225deg;margin-top:3px;
  border-right-color:var(--sl-ind-open);border-bottom-color:var(--sl-ind-open)}

.sl-sub{display:none;background:var(--sl-sub)}
.sl-sub button{background:transparent;font-size:var(--tiny);font-weight:400;
  min-height:40px;padding:8px 20px 8px 28px;border-bottom:1px solid #f2f2f2}
.sl-sub li:last-child button{border-bottom:0}
.sl-sub button:hover{background:#fff;color:var(--red)}
.sl-menu button.is-active{background:var(--red);color:#fff;border-bottom-color:transparent}

/* the whole menu folds away behind one bar on phones — as it does on the live site */
.sl-menu .sl-menu__toggle{display:none}
.sl-panel{display:none}
.sl-panel.is-active{display:block;animation:slFade .35s ease}
/* swapping panels changes the page height; without this the browser shifts the
   scroll position to compensate and the reader is moved somewhere they did not ask for */
.sl-panels{overflow-anchor:none}
@keyframes slFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sl-panel h2{text-align:center;color:var(--ink);margin-bottom:.4em}
.sl-panel .divider{margin-bottom:16px}
.sl-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 32px;box-shadow:var(--shadow)}
.sl-card p{text-align:justify;font-size:var(--body);line-height:1.85;color:var(--ink)}
.sl-pics{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,260px));justify-content:center;margin-top:22px}
/* the picture strip leads the panel, so it needs no gap above it */
.sl-panel > .sl-pics:first-child{margin-top:0;margin-bottom:26px}
.sl-pics img{width:100%;border-radius:10px;border:3px solid var(--gold);box-shadow:var(--shadow);cursor:zoom-in}
.sl-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

@media (max-width:1080px){
  .sl-wrap{grid-template-columns:1fr;gap:22px}
  /* one bar the reader opens when they want the list, so the article stays on screen */
  .sl-menu{position:static;max-height:none;overflow:visible}
  .sl-menu .sl-menu__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--red);color:#fff;font-weight:600;font-size:var(--h5);padding:12px 18px;border-bottom:0}
  .sl-menu__toggle:hover{background:var(--red);color:#fff}
  .sl-menu__toggle::after{content:"";width:9px;height:9px;flex:none;margin-top:-4px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;transition:rotate .3s}
  .sl-menu__toggle[aria-expanded="true"]::after{rotate:225deg;margin-top:4px}
  .sl-menu__toggle[aria-expanded="false"] + .sl-list{display:none}
  .sl-list{max-height:min(60vh,460px);overflow:auto;overscroll-behavior:contain}
  .vani-post{grid-template-columns:1fr;gap:18px}
  .vani-post--rev .vani-post__media{order:0}
}
@media (max-width:767px){
  .vani-list{gap:34px}
  .vani-post__name{font-size:var(--h4)}
  .vani-post__date{font-size:var(--body)}
  .vani-post__body p{font-size:var(--body);line-height:26px}
  .podcast-grid{grid-template-columns:1fr}
  .sl-card{padding:20px 18px;border-radius:16px}
  .sl-card p{font-size:var(--body);line-height:1.8}
  /* rows stay a comfortable 44px+ tap target on a phone */
  .sl-menu button{font-size:var(--small);padding:12px 48px 12px 16px}
  .sl-menu .sl-leaf{padding-right:16px}
  .sl-sub button{font-size:var(--tiny);padding:11px 16px 11px 24px}
  .sl-ind{right:8px;width:26px;height:26px}
  .sl-nav{flex-direction:column}
  .sl-nav .btn{width:100%}
}

/* ==========================================================================
   v11 — curved hero bottoms + spacing fixes
   (.hero28 = home, plus that page's own blocks — no other page uses it)
   ========================================================================== */

.home-page .hero28{
  border-bottom-left-radius:50% 90px;
  border-bottom-right-radius:50% 90px;
  margin-bottom:-30px;
}

/* ------------------------------------------------ હરિ વાણી : breathing room */
.vani-list{gap:70px;padding-top:20px}
.vani-post{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:50px;align-items:center;
}
.vani-post__media{gap:18px;align-items:center}
.vani-post__media img{
  aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);
}
.vani-post__media .btn{align-self:center}
.vani-post__text{gap:12px}
.vani-post__name{line-height:1.35}
.vani-post__date{margin-bottom:6px}
.vani-post__body p{margin:0 0 16px}
.vani-post__body p:last-child{margin-bottom:0}
.vani-more{margin-top:8px}
.vani-more__inner{padding-top:14px;border-top:1px solid var(--line);margin-top:12px}

/* ---------------------------------------------- હરિ પોડકાસ્ટ : spacing ---- */
.podcast-grid{gap:34px;padding-block:10px}
.podcast-grid .video{
  border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line);
}

@media (max-width:1080px){
  .vani-list{gap:52px}
  .vani-post{gap:26px;align-items:start}
  .vani-post__media img{aspect-ratio:16/10}
}
@media (max-width:767px){
  .home-page .hero28{
    border-bottom-left-radius:50% 40px;border-bottom-right-radius:50% 40px;margin-bottom:-18px;
  }
  .vani-list{gap:40px}
  .vani-post{gap:18px}
  .podcast-grid{gap:20px}
  .vani-more__inner{padding-top:12px}
}

/* ==========================================================================
   v12 — home page "હરિ વાણી" block rebuilt to the live spec
   (container e167a17: photo background, WHITE 65px/600 heading, min-height 800,
    flex column, space-evenly, align centre, margin-top 120px)
   ========================================================================== */
.home-page .harivani{
  position:relative;
  min-height:min(800px,88vh);
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;
  text-align:center;
  padding:clamp(44px,5vw,70px) clamp(18px,4vw,60px);
  margin-top:clamp(56px,9vw,120px);
  background-position:center right;background-repeat:no-repeat;background-size:cover;
  border-radius:clamp(20px,2.6vw,34px);
  overflow:hidden;
}
/* a soft scrim so the white type stays readable on any part of the photo */
.home-page .harivani::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,6,4,.62) 0%,rgba(12,6,4,.42) 42%,rgba(12,6,4,.70) 100%);
}
.home-page .harivani__inner{
  position:relative;z-index:2;width:100%;max-width:900px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.4vw,26px);
}
.home-page .harivani img.mark{width:clamp(150px,20vw,260px);margin:0}
.home-page .harivani h2{
  color:#fff;font-size:var(--h2);font-weight:600;margin:0;
  text-shadow:0 4px 26px rgba(0,0,0,.45);
}
.home-page .harivani__text{max-width:820px}
.home-page .harivani__text p{
  color:rgba(255,255,255,.94);font-size:var(--body);line-height:1.75;margin:0 0 .5em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.home-page .harivani__text p:last-child{margin-bottom:0}
.home-page .harivani__row{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:0}
.home-page .harivani__row img{
  width:min(420px,100%);height:auto;border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.35);cursor:zoom-in;
}
.home-page .harivani img.orn{width:clamp(170px,22vw,300px);margin:0}

@media (max-width:767px){
  .home-page .harivani{min-height:0;padding:34px 18px;border-radius:20px;background-position:center}
  .home-page .harivani__inner{gap:16px}
  .home-page .harivani__row img{width:100%}
}

/* ==========================================================================
   v13 — home "તાજેતરના અપડેટ્સ": saffron band, 4 RED cards, 2-column mosaic
   (matches page 28: band 848bbba #F0A93D pad 100px, cards #C40C0C radius 30px,
    heading 65px #C40C0C over a 2px red rule)
   ========================================================================== */
.home-page .date-pill-row{max-width:var(--container);margin:0 auto clamp(16px,2vw,26px);
  padding-inline:24px;display:flex;justify-content:flex-end}

.home-page .band-updates{
  background:var(--gold);padding:clamp(46px,7vw,100px) 0;margin-top:clamp(56px,9vw,120px);
}
.home-page .band-updates .updates-head{
  border-bottom:2px solid var(--red);padding-bottom:12px;margin-bottom:clamp(24px,3vw,40px);
  display:block;
}
.home-page .band-updates .updates-head h2{
  color:var(--red);font-size:var(--h2);font-weight:600;margin:0;
}

.home-page .upd-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);align-items:stretch}
.home-page .upd-col{display:grid;grid-template-rows:auto 1fr;gap:clamp(16px,2vw,26px);min-width:0}
.home-page .upd-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);min-width:0}

.home-page .upd-card{
  background:var(--red);border-radius:30px;padding:0;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
  transition:transform .3s ease;
}
.home-page .upd-card:hover{transform:translateY(-4px)}
.home-page .upd-card__pic{overflow:hidden}
.home-page .upd-card__pic img{width:100%;height:100%;object-fit:cover;display:block}
.home-page .upd-card p{
  color:#fff;font-size:var(--body);line-height:1.6;margin:0;
  padding:clamp(12px,1.5vw,20px) clamp(14px,1.6vw,22px) clamp(16px,1.8vw,24px);
}
.home-page .upd-card--tall .upd-card__pic{aspect-ratio:680/760}
.home-page .upd-card--wide .upd-card__pic{aspect-ratio:690/291}
.home-page .upd-pair .upd-card__pic{aspect-ratio:330/295}

@media (max-width:900px){
  .home-page .upd-mosaic{grid-template-columns:1fr}
  .home-page .upd-card--tall .upd-card__pic{aspect-ratio:16/10}
}
@media (max-width:560px){
  .home-page .upd-pair{grid-template-columns:1fr}
  .home-page .upd-card{border-radius:22px}
  .home-page .upd-pair .upd-card__pic{aspect-ratio:16/10}
  .home-page .upd-card--wide .upd-card__pic{aspect-ratio:16/9}
}

/* ==========================================================================
   v14 — home poster carousel: show the artwork exactly as authored
   (the white card, date bar and red ↗ button are baked into the PNGs,
    342x391 — so no cropping, no extra radius, no shadow)
   ========================================================================== */
.home-page .slider--posters .slider__slide img{
  aspect-ratio:342/391;object-fit:contain;border-radius:0;box-shadow:none;background:transparent;
}
.home-page .slider--posters .slider__slide{padding-inline:0}
.home-page .band-saffron .slider__prev{left:-6px}
.home-page .band-saffron .slider__next{right:14px}
@media (max-width:1080px){.home-page .slider--posters{--per:3!important}}
@media (max-width:767px){.home-page .slider--posters{--per:1!important}}

/* ==========================================================================
   v15 — home: the red "હરિનો માર્ગ" panel (01abe66) — logo + date range
   + its own 5-photo carousel, exactly as on the live site
   ========================================================================== */
.home-page .hm-panel{
  background:var(--red);
  border-radius:clamp(24px,3.4vw,50px);
  padding:clamp(20px,2.6vw,34px) clamp(18px,2.4vw,32px) clamp(24px,3vw,38px);
  box-shadow:0 18px 46px rgba(140,10,10,.28);
  position:relative;overflow:hidden;
}
.home-page .hm-panel::after{                 /* soft sheen, keeps it eye-catching */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 260px at 12% -10%, rgba(255,255,255,.16), transparent 70%);
}
.home-page .hm-panel > *{position:relative;z-index:2}
.home-page .hm-panel__head{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:0 0 clamp(16px,2vw,24px) clamp(4px,1.4vw,18px);
}
.home-page .hm-panel__head img{width:clamp(46px,4.6vw,74px);height:auto;flex:0 0 auto}
.home-page .hm-panel__head h3{
  margin:0;color:#fff;font-weight:600;line-height:1.3;
  font-size:var(--h4);
}
.home-page .slider--hm .slider__slide img{
  aspect-ratio:302/350;object-fit:cover;width:100%;
  border-radius:clamp(10px,1.2vw,16px);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  transition:transform .35s ease;
}
.home-page .slider--hm .slider__slide a{display:block;overflow:hidden;border-radius:clamp(10px,1.2vw,16px)}
.home-page .slider--hm .slider__slide a:hover img{transform:scale(1.05)}
.home-page .slider--hm .slider__prev,
.home-page .slider--hm .slider__next{
  background:rgba(255,255,255,.92);color:var(--red);width:40px;height:40px;font-size:22px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.home-page .slider--hm .slider__prev:hover,
.home-page .slider--hm .slider__next:hover{background:var(--gold);color:#3a1d00}
.home-page .slider--hm .slider__prev{left:6px}
.home-page .slider--hm .slider__next{right:6px}

@media (max-width:1080px){ .home-page .slider--hm{--per:3!important} }
@media (max-width:767px){
  .home-page .slider--hm{--per:2!important}
  .home-page .hm-panel{border-radius:22px}
  .home-page .hm-panel__head{padding-left:4px;gap:10px}
}
@media (max-width:480px){ .home-page .slider--hm{--per:1!important} }

/* ==========================================================================
   કથા વિચાર — category picker + square thought cards
   The pictures carry Gujarati text, so they are never cropped: every one is
   square, and the grid keeps them square end to end.
   ========================================================================== */
.kt-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:38px}
.kt-bar__label{font-size:var(--h5);font-weight:600;color:var(--red);white-space:nowrap}
.kt-select{
  width:260px;max-width:100%;padding:13px 46px 13px 16px;
  font-family:var(--font);font-size:var(--small);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.10);cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s,box-shadow .25s,transform .25s;
  /* the arrow, drawn rather than loaded */
  background-image:linear-gradient(45deg,transparent 50%,var(--red) 50%),
                   linear-gradient(135deg,var(--red) 50%,transparent 50%);
  background-position:calc(100% - 24px) calc(50% - 2px),calc(100% - 18px) calc(50% - 2px);
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;
}
.kt-select:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.15)}
.kt-select:focus-visible{border-color:var(--red);box-shadow:0 0 0 3px rgba(196,12,12,.18)}

.kt-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.kt-card{background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.15);transition:transform .35s ease,box-shadow .35s ease}
.kt-card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.25)}
.kt-card__link{display:block;position:relative;line-height:0}
.kt-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* The card opens a video, so it wears a play button rather than a share icon.
   It sits where the live page puts its share icon, and stays visible on every
   device so the card reads as something you can tap. */
.kt-card__link::after{content:"";position:absolute;inset:0;background:rgba(14,7,7,.32);
  opacity:0;transition:opacity .3s ease}
.kt-card__play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;
  background:rgba(196,12,12,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.4);transition:background .3s ease,scale .3s ease}
.kt-card__play::before{content:"";margin-inline-start:3px;
  border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff}
.kt-card:hover .kt-card__link::after,
.kt-card__link:focus-visible::after{opacity:1}
.kt-card:hover .kt-card__play,
.kt-card__link:focus-visible .kt-card__play{background:var(--red);scale:1.12}
.kt-card__link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.kt-empty{text-align:center;color:var(--ink-soft);font-size:var(--body);padding:46px 0 10px}

@media (max-width:767px){
  .kt-bar{flex-direction:column;gap:10px;margin-bottom:26px}
  .kt-bar__label{font-size:var(--h5)}
  .kt-select{width:100%}
  .kt-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .kt-card{border-radius:16px}
  .kt-card__play{width:38px;height:38px;right:10px;bottom:10px}
  .kt-card__play::before{border-width:7px 0 7px 12px}
}

/* ==========================================================================
   Touch targets — two inline links sit on a single text line, which leaves
   them under the 44px a finger needs. The pseudo-element widens what can be
   tapped without moving anything on the page.
   ========================================================================== */
.page-hero .crumb a,
.footer-contact a{position:relative}
.page-hero .crumb a::after,
.footer-contact a::after{content:"";position:absolute;inset:-10px -8px}

/* ==========================================================================
   v16 — responsive hardening.  Every rule here is either a guard that stops
   a layout escaping the screen, or a small-screen refinement.  Nothing
   changes how the site looks on a desktop.
   ========================================================================== */

/* ---- 1. nothing may ever be wider than the box it sits in --------------- */
img,svg,video,iframe,canvas,audio,object,embed,table{max-width:100%}
audio{width:100%}

/* Gujarati compounds, mail addresses and pasted links are single unbreakable
   runs; one of them wider than a phone is enough to push the whole page out. */
body{overflow-wrap:break-word}
h1,h2,h3,h4,h5,p,li,td,th,figcaption,summary,label,.crumb{overflow-wrap:anywhere}

/* `1fr` means `minmax(auto,1fr)`: a long word makes the column grow past its
   share and the grid past the screen.  `min-width:0` lets it wrap instead —
   the same cure as `minmax(0,1fr)`, without restating every template. */
.grid > *,.photo-grid > *,.gallery > *,.media-grid > *,.bento > *,
.dates-grid > *,.form .row > *,.podcast-grid > *,.video-grid > *,
.vandana__row > *,.with-aside > *,.vani-post > *,.kt-grid > *,
.scan-grid > *,.sl-pics > *,.letter .scan > *,.link-list > *,
.sl-wrap > *,.hero28__grid > *,.upd-mosaic > *,.upd-pair > *,.upd-col > *,
.slider__slide,.vani-post__text,.vani-post__media,.vandana__text{min-width:0}

/* flex rows whose text must be allowed to wrap rather than stretch the row */
.track__title,.date-row .t,.link-list a > *,.updates-head > *,
.footer-contact a,.harivani__inner,.hm-panel__head h3{min-width:0}

/* ---- 2. auto-fill minima that are wider than a phone -------------------- */
/* `minmax(330px,1fr)` keeps a 330px track on a 320px screen and overflows.
   `min(330px,100%)` caps the minimum at the width actually available. */
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.gallery--plain{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.video-grid{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.kt-grid{grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
.scan-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),400px))}
.sl-pics{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),260px))}
.letter .scan{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),420px))}
@media (max-width:767px){
  .kt-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
}

/* ---- 3. one fluid gutter, from a 280px phone to a 4K desk --------------- */
.container{padding-inline:clamp(14px,3.6vw,24px)}
.header-inner{padding-inline:clamp(12px,3vw,40px)}
.home-page .date-pill-row{padding-inline:clamp(14px,3.6vw,24px)}

/* ---- 4. phones: forms stay tappable and never trigger iOS zoom ---------- */
/* Safari zooms the page in whenever a focused field is under 16px. */
@media (max-width:767px){
  input,select,textarea,
  .form input,.form textarea,
  .footer-form input,.footer-form textarea,
  .table-tools input,
  .search-overlay input,
  .kt-select{font-size:16px}
  .table-tools{justify-content:stretch}
  .table-tools input{max-width:none}
  .pager{justify-content:center}
  .search-overlay{padding-top:10vh}
  .search-overlay form{flex-direction:column}
  .search-overlay button{width:100%}
  .search-results{max-height:60vh}
}

/* every control keeps a finger-sized target */
.pager button,.gallery .dl,.tab-btn,.vani-more > summary{min-height:40px}
.pager button{display:inline-flex;align-items:center;justify-content:center}
.gallery .dl{display:inline-flex;align-items:center}

/* ---- 5. the long data table becomes a card list on a phone -------------- */
/* 720px of columns cannot be read on a 360px screen, and a sideways scroll
   inside a page that scrolls down is easy to miss.  Each row becomes its own
   labelled card instead — main.js writes the label onto every cell. */
@media (max-width:640px){
  .data-table-wrap{border:0;background:transparent;min-height:0;overflow:visible}
  .data-table{min-width:0;display:block;font-size:var(--small)}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  /* the zebra striping is what tells rows apart in a table; as cards each row
     already stands alone, so every card is plain white */
  .data-table tbody tr,
  .data-table tbody tr:nth-child(even),
  .data-table tbody tr:hover{
    background:#fff;border:1px solid var(--navy);border-radius:12px;
    margin-bottom:12px;padding:4px 2px;box-shadow:var(--shadow);
  }
  .data-table td{
    border:0;border-top:1px solid #eef0f5;padding:9px 14px;
    display:grid;grid-template-columns:minmax(84px,36%) 1fr;gap:12px;align-items:start;
  }
  .data-table tr td:first-child{border-top:0}
  .data-table td::before{
    content:attr(data-label);font-weight:600;color:var(--red);font-size:var(--tiny);
  }
  .data-table td:empty{display:none}
  .data-table td[colspan]{display:block;text-align:center;color:var(--ink-soft)}
  .data-table td[colspan]::before{content:none}
}

/* Between the card list and a full desk the table still asked for 720px and
   scrolled sideways inside its frame.  Tighter cells let all four columns fit
   the screen instead, so the only scroll on the page is the page's own. */
@media (min-width:641px) and (max-width:1000px){
  .data-table{min-width:0}
  .data-table th{padding:13px 9px}
  .data-table td{padding:11px 10px}
  .data-table-wrap{min-height:0}
}

/* ---- 6. short landscape phones ----------------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .page-hero{min-height:min(400px,94vh);padding:calc(var(--header-h) + 46px) 0 40px}
  .home-hero{min-height:auto;padding-top:calc(var(--header-h) + 20px)}
  .mobile-panel__inner{padding-block:14px 18px}
  .mobile-panel .logo{width:170px;margin-block:2px 12px}
  .mobile-panel nav a{padding-block:8px}
  .sl-menu .sl-list{max-height:56vh}
}

/* ---- 7. small phones: give the ink room rather than the padding --------- */
@media (max-width:420px){
  .block{padding:20px 16px}
  .letter{padding:22px 17px}
  .form{padding:22px 17px}
  .sl-card{padding:19px 15px}
  .tribute{padding:19px 17px}
  .vandana__text{padding:20px 17px}
  .player__now{padding:18px 17px}
  .track{padding-inline:15px}
  .link-list a{padding:13px 16px}
  .gallery{gap:13px}
  .lightbox__close,.lightbox__prev,.lightbox__next{width:44px;height:44px;font-size:22px}
  .lightbox__close{top:14px;right:14px}
  .lightbox__prev{left:8px}
  .lightbox__next{right:8px}
  .to-top{right:14px;bottom:14px;width:44px;height:44px}
}

/* ---- 8. real viewport units on phones ----------------------------------- */
/* 100vh on a phone counts the space behind the browser's own toolbars. */
@supports (height:100svh){
  .home-hero{min-height:100svh}
  .search-overlay{height:100svh}
  .mobile-panel{height:100svh}
}

/* ---- 9. respect the reader's motion and focus settings ------------------ */
/* zero-specificity, so anything that already styles its own focus still wins;
   the outline follows whatever radius the element already has */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .card:hover,.tile:hover,.photo-card img:hover,.kt-card:hover,
  .upd-card:hover,.socials a:hover,.btn:hover{transform:none}
}

/* ---- 10. the header bar itself, down to a 280px phone ------------------- */
/* The logo keeps its height while the bar shrinks, so on the narrowest
   phones the logo and the three round buttons together were wider than the
   screen and pushed the whole page sideways. */
@media (max-width:430px){
  .brand img{height:38px}
  .header-tools{gap:0}
  .icon-btn{width:40px;height:40px}
  .icon-btn svg{width:20px;height:20px}
  .nav-toggle svg{width:25px;height:25px}
}
@media (max-width:320px){
  .brand img{height:32px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:18px;height:18px}
  .nav-toggle svg{width:23px;height:23px}
}
.header-inner{min-width:0}
.brand,.header-tools{min-width:0}
.brand img{max-width:100%}
/* the shrunken logo is still the link home, so the link keeps a full-size
   target even where the picture inside it is only 32px tall */
.brand{min-height:44px}

/* the home hero's play link is a control too, not just a line of text */
.play-link{min-height:40px}

/* ---- 11. breathing room under every slider ----------------------------- */
/* Whatever follows a carousel — dots, a heading, the next block — sits 25px
   below it, on every page and at every width. */
.slider{margin-bottom:25px}

/* The hero's curved bottom pulled the next section up by exactly as much as
   that section padded itself down (-30px against 30px), so the saffron poster
   band touched the hero with no gap at all on a desk, and 18px on a phone.
   Both halves are set here instead, so the gap is 25px at every width. */
.home-page .hero28{margin-bottom:0}
.home-page .hero28 + .section--tight{padding-top:25px}


/* આશીર્વાદ અને પ્રાર્થના — desktop only: each letter's scan on the left and
   its text on the right, instead of the text stacked above the picture.
   Tablet and phone keep the stacked layout untouched. */
@media (min-width:1081px){
  [data-panel-group="patra-nav"] > .section > .container{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  [data-panel-group="patra-nav"] .scan-grid{grid-column:1;grid-row:1;margin-top:0;
    grid-template-columns:1fr;justify-content:stretch}
  [data-panel-group="patra-nav"] .block{grid-column:2;grid-row:1}
}

/* પુસ્તકો — each book shown with its cover (the PDF's first page) */
.books-grid{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.card--book .card__media{display:block;aspect-ratio:707/1000;background:#efe9df}
.card--book .card__media img{object-fit:cover}
.book-blank{display:grid;place-items:center;height:100%;padding:18px;text-align:center;font-weight:600;color:#6b4a2a}
@media (max-width:767px){ .books-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} }

/* ઇદમ્ સર્વમ articles: the photos under the article sit centred, as wide as
   the article box above them, three to a row (two on a phone), all the same
   size. A click still opens the whole photo. */
.prose + .gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;max-width:960px;margin:30px auto 0}
.prose + .gallery figure{flex:0 1 calc((100% - 44px) / 3)}
.prose + .gallery figure img{aspect-ratio:4/3;height:auto;border-radius:14px;border:3px solid #fff}
@media (max-width:640px){
  .prose + .gallery{gap:12px;margin-top:22px}
  .prose + .gallery figure{flex-basis:calc((100% - 12px) / 2)}
}

/* ==========================================================================
   હરિ મંત્ર — the year / month collection
   ========================================================================== */
.hm-years{margin-bottom:18px}
.hm-years .tab-btn{background:#fff;color:var(--red);border:2px solid var(--red);font-weight:700;padding:8px 22px;border-radius:999px}
.hm-years .tab-btn.is-active{background:var(--red);color:#fff}
.hm-count{display:inline-block;margin-inline-start:6px;min-width:24px;padding:0 7px;border-radius:999px;font-size:var(--micro);
  background:rgba(196,12,12,.1);line-height:1.6}
.hm-years .tab-btn.is-active .hm-count{background:rgba(255,255,255,.22)}
.hm-months{margin-bottom:28px}
.hm-months .tab-btn.is-empty{opacity:.55}
.hm-months .tab-btn.is-empty.is-active{opacity:1}

.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hm-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:22px 24px 20px;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.hm-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--red),var(--gold))}
.hm-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -14px rgba(120,10,10,.35)}
.hm-card__date{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed rgba(0,0,0,.12)}
.hm-card__day{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(150deg,var(--red),#7a0707);color:#fff;font-size:24px;font-weight:700;line-height:1}
.hm-card__meta{font-size:var(--tiny);color:var(--ink-soft);line-height:1.45}
.hm-badge{margin-inline-start:auto;align-self:flex-start;background:var(--gold);color:#3d2200;font-size:var(--micro);font-weight:700;
  padding:3px 12px;border-radius:999px}
.hm-card__text{margin:0;flex:1;font-size:var(--body);line-height:1.75;color:var(--ink)}
.hm-card__by{margin:14px 0 0;color:var(--red);font-weight:600;font-size:var(--tiny)}
.hm-card.is-today{border-color:rgba(240,169,61,.8);box-shadow:0 0 0 3px rgba(240,169,61,.25),var(--shadow)}
.hm-empty{max-width:520px;margin:0 auto;text-align:center}

@media (max-width:1024px){ .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .hm-grid{grid-template-columns:1fr;gap:16px}
  .hm-card{padding:18px 18px 16px}
}
@media (prefers-reduced-motion:reduce){ .hm-card{transition:none} }

/* ==========================================================================
   હરિ સંગ હેત — each picture series is read page by page
   ========================================================================== */
.shh .section__head{margin-bottom:38px}
.story{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(18px,2.6vw,34px);border-radius:32px;margin-bottom:clamp(34px,5vw,64px);
  background:linear-gradient(135deg,#fff6f1 0%,#fde7dd 100%);border:1px solid #f6d3c4;
  box-shadow:0 30px 60px -34px rgba(150,40,20,.45)}
.story:last-child{margin-bottom:0}
.story--rev .story__viewer{order:2}

.story__viewer{position:relative}
.story__frame{overflow:hidden;border-radius:22px;background:#fff;aspect-ratio:1/1;
  box-shadow:0 18px 40px -18px rgba(90,20,10,.45),0 0 0 6px #fff}
.story__track{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.story__page{flex:0 0 100%;margin:0;height:100%}
.story__page img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.story__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);color:var(--red);font-size:30px;line-height:1;padding-bottom:4px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background .2s,color .2s,transform .2s}
.story__nav:hover{background:var(--red);color:#fff}
.story__nav--prev{left:-14px}
.story__nav--next{right:-14px}
.story__count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(34,20,16,.72);color:#fff;
  font-size:var(--tiny);padding:4px 14px;border-radius:999px;letter-spacing:.5px;backdrop-filter:blur(4px)}
.story__count b{font-weight:700}

.story__side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.story__eyebrow{display:inline-block;background:var(--red);color:#fff;font-size:var(--micro);font-weight:600;
  padding:5px 14px;border-radius:999px;letter-spacing:.3px}
.story__title{margin:0;font-size:var(--h3);line-height:1.3;font-weight:700;color:#8e1a10}
.story__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin-top:6px}
.story__thumb{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;
  aspect-ratio:1/1;box-shadow:0 0 0 2px transparent,0 4px 12px -6px rgba(0,0,0,.3);opacity:.72;
  transition:opacity .2s,transform .2s,box-shadow .2s}
.story__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.story__thumb span{position:absolute;right:6px;bottom:6px;background:rgba(255,255,255,.92);color:var(--red);
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.story__thumb:hover{opacity:1;transform:translateY(-2px)}
.story__thumb.is-active{opacity:1;box-shadow:0 0 0 3px var(--gold),0 8px 18px -8px rgba(0,0,0,.35)}
.story__thumb.is-active span{background:var(--gold);color:#3d2200}
.story__open{margin-top:8px}

/* tablets and small laptops: one column, the page kept to a readable size and centred */
@media (max-width:1023px){
  .story{grid-template-columns:minmax(0,1fr);border-radius:24px;justify-items:center}
  .story--rev .story__viewer{order:0}
  .story__viewer,.story__side{width:100%;max-width:600px}
  .story__side{align-items:center;text-align:center}
  .story__nav--prev{left:8px}
  .story__nav--next{right:8px}
  .story__nav{width:40px;height:40px;font-size:26px}
  .story__thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
}
/* phones: the thumbnails become a strip you slide sideways */
@media (max-width:600px){
  .story__side{align-items:stretch;text-align:left}
  .story__eyebrow{align-self:flex-start}
  .story__open{align-self:center}
  .story__thumbs{display:flex;overflow-x:auto;gap:8px;padding:4px 2px 8px;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .story__thumbs::-webkit-scrollbar{display:none}
  .story__thumb{flex:0 0 68px;scroll-snap-align:start}
}
/* small phones: less frame around the page, so the page itself is bigger */
@media (max-width:420px){
  .story{padding:10px 10px 18px;border-radius:20px;gap:18px}
  .story__frame{border-radius:16px;box-shadow:0 12px 26px -14px rgba(90,20,10,.45),0 0 0 4px #fff}
  .story__nav{width:34px;height:34px;font-size:22px;padding-bottom:3px}
  .story__nav--prev{left:6px}
  .story__nav--next{right:6px}
  .story__count{bottom:10px;padding:3px 11px}
  .story__side{padding:0 6px;gap:10px}
  .story__thumb{flex-basis:60px}
  .story__open{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .story__track,.story__thumb,.story__nav{transition:none} }

/* હરિ મંત્ર વિડિયો: the 2025 / 2026 switch — always side by side, same shape */
.year-tabs{display:flex;flex-wrap:nowrap;justify-content:center;gap:12px}
.year-tabs .btn{flex:0 1 260px;min-width:0;text-align:center;white-space:nowrap;border-radius:var(--radius-pill);padding:12px 22px}
@media (max-width:480px){
  .year-tabs{gap:10px}
  .year-tabs .btn{flex-basis:50%;padding:10px 10px;font-size:var(--tiny)}
}

/* tabs in one sliding row (.tabs--scroll) — ‹ › show only when they do not all fit */
.tabs-scroll{display:flex;align-items:center;gap:8px}
.tabs-scroll:not(.tabs-scroll--sm) .tabs__bar{position:relative;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs-scroll:not(.tabs-scroll--sm) .tabs__bar::-webkit-scrollbar{display:none}
.tabs-scroll:not(.tabs-scroll--sm) .tab-btn{flex:0 0 auto}
.tabs-scroll--sm .tabs__bar{flex:1 1 auto;min-width:0}
/* .tabs--scroll-sm: the sliding row on phones and tablets; wide screens keep wrapping */
@media (max-width:1023px){
  .tabs-scroll--sm .tabs__bar{position:relative;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs-scroll--sm .tabs__bar::-webkit-scrollbar{display:none}
  .tabs-scroll--sm .tab-btn{flex:0 0 auto}
}
.tabs-scroll.is-scrollable .tabs__bar{justify-content:flex-start}
.tabs-scroll__btn{display:none;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;padding:0 0 3px;
  background:var(--red);color:#fff;font-size:24px;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.22);transition:background .2s,opacity .2s}
.tabs-scroll__btn:hover{background:var(--gold);color:#3a1d00}
.tabs-scroll__btn:disabled{opacity:.3;cursor:default;background:var(--red);color:#fff}
.tabs-scroll.is-scrollable .tabs-scroll__btn{display:grid;place-items:center}

/* આશીર્વાદ અને પ્રાર્થના — phone and tablet: the letter's scan comes first,
   its typed text below it. (From 1081px up the two sit side by side, above.) */
@media (max-width:1080px){
  [data-panel-group="patra-nav"] > .section > .container{display:flex;flex-direction:column}
  [data-panel-group="patra-nav"] .scan-grid{order:-1;margin-top:0;margin-bottom:26px}
}

/* હરિ વંદના — the two tabs sit under the heading */
.vandana-tabs{margin-bottom:30px}
.vnd-empty{max-width:560px;margin:0 auto;text-align:center}