/* ═══════════════════════════════════════════════════════════
   ManaHindu — YouTube-style horizontal ROW layout
   For main home + all sub-home/section pages. Mobile-first.
   ═══════════════════════════════════════════════════════════ */

/* Attractive page-wide ribbon banner */
.ribbon-band{
  position:relative;
  background:linear-gradient(135deg,#4a2c18,#241a12);
  padding:26px 18px;
  overflow:hidden;
  border-bottom:1px solid rgba(212,175,55,0.3);
}
.ribbon-band::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(212,175,55,0.05) 0 12px,transparent 12px 24px);
  pointer-events:none;
}
.ribbon-band .rb-om{
  position:absolute; right:-8px; top:-24px; font-size:120px;
  color:rgba(212,175,55,0.09); font-family:serif; pointer-events:none; line-height:1;
}
.ribbon-band h1{
  position:relative; font-family:'Tiro Telugu',serif; font-size:1.6rem;
  color:#e8cf8a !important; font-weight:400; margin:0;
}
.ribbon-band p{
  position:relative; color:#e8dcc4 !important; font-size:0.9rem; margin-top:5px;
}
.ribbon-deco{
  position:relative; height:16px; margin-top:14px;
  display:flex; align-items:center; justify-content:center;
}
.ribbon-deco::before,.ribbon-deco::after{
  content:''; height:2px; flex:1;
  background:linear-gradient(90deg,transparent,#d4af37);
}
.ribbon-deco::after{ background:linear-gradient(90deg,#d4af37,transparent); }
.ribbon-deco span{ color:#d4af37; font-size:15px; margin:0 12px; }

/* Breadcrumb (row pages) — fixed bar directly under the ribbon */
.row-bc{
  padding:11px 18px;
  font-size:0.8rem;
  color:#8a7f6e;
  background:#f4ecdd;
  border-bottom:1px solid #ecd9a8;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  line-height:1.5;
}
.row-bc a{ color:#a8862a; text-decoration:none; font-weight:600; }
.row-bc a:hover{ text-decoration:underline; }
.row-bc span{ margin:0 5px; color:#c9b896; }
.row-bc .bc-current{ color:#5a2e14; }

/* Row section */
.row-sec{ margin:20px 0; }
.row-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px 10px;
}
.row-head h2{
  font-family:'Tiro Telugu',serif; font-size:1.2rem; color:#5a2e14 !important;
  font-weight:400; margin:0; display:flex; align-items:center; gap:8px;
}
.row-more{
  color:#a8862a !important; font-size:0.82rem; text-decoration:none;
  font-family:'Tiro Telugu',serif; white-space:nowrap; font-weight:600;
}
.row-wrap{ position:relative; }
.row{
  display:flex; gap:12px; overflow-x:auto;
  padding:4px 18px 10px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.row::-webkit-scrollbar{ display:none; }

/* Cards */
.rcard{
  flex:0 0 auto; width:152px;
  background:linear-gradient(135deg,#fff,#fdf6e8);
  border:1px solid #ecd9a8; border-radius:14px; overflow:hidden;
  text-decoration:none; transition:transform .2s,box-shadow .2s;
  box-shadow:0 3px 12px rgba(124,28,28,0.06);
}
.rcard:active{ transform:scale(0.97); }
.rcard .rc-img{
  height:88px; background:linear-gradient(135deg,#5a2e14,#3a2416);
  display:flex; align-items:center; justify-content:center; font-size:34px;
}
.rcard .rc-body{ padding:10px 12px; background:#fff; }
.rcard .rc-ti{ color:#2a2320 !important; font-size:0.92rem; font-family:'Tiro Telugu',serif; line-height:1.3; }
.rcard .rc-st{ color:#8a7f6e !important; font-size:0.72rem; margin-top:3px; }
.rcard.more{
  display:flex; align-items:center; justify-content:center; width:104px;
  background:linear-gradient(135deg,#4a2c18,#2a2018); border-color:rgba(212,175,55,0.35);
}
.rcard.more .m{ color:#e8cf8a; text-align:center; font-family:'Tiro Telugu',serif; font-size:0.86rem; }

/* Side arrows */
.row-arrow{
  position:absolute; top:34px; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(13,11,18,0.82); color:#e8cf8a; font-size:17px;
  cursor:pointer; z-index:5; box-shadow:0 2px 10px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
}
.row-arrow.l{ left:8px; }
.row-arrow.r{ right:8px; }
@media (hover:none){ .row-arrow{ opacity:0.85; } }

/* Desktop: wider cards, show more */
@media (min-width:900px){
  .rcard{ width:180px; }
  .rcard .rc-img{ height:110px; font-size:42px; }
  .ribbon-band h1{ font-size:2rem; }
}

/* ═══ Consistent padding + header match for row/detail pages ═══ */
/* Ensure detail page content has proper edge padding */
.article-body, .article-layout{ padding-left:0; padding-right:0; }
.container{ padding-left:18px !important; padding-right:18px !important; box-sizing:border-box; }

/* Breadcrumb bar sits flush below hero, consistent everywhere */
.article-hero + .row-bc,
.page-hero + .row-bc{ margin-top:0; }

/* Section spacing on detail pages */
.article-layout{ padding-top:1.5rem !important; padding-bottom:2rem !important; }

@media (max-width:640px){
  .container{ padding-left:16px !important; padding-right:16px !important; }
  .row{ padding-left:16px; padding-right:16px; }
  .row-head{ padding-left:16px; padding-right:16px; }
  .ribbon-band{ padding:22px 16px; }
  .row-bc{ padding-left:16px; padding-right:16px; }
}

/* ═══ Detail pages: EXACT same ribbon-band as hub pages ═══ */
.article-hero, .page-hero, .life-hero, .satakam-hero{
  position:relative !important;
  background:linear-gradient(135deg,#4a2c18,#241a12) !important;
  padding:18px 0 !important;
  overflow:hidden !important;
  border-bottom:none !important;
}
/* Gold separation line at the bottom — EXACT same as hub ribbon */
.article-hero::before, .page-hero::before, .life-hero::before, .satakam-hero::before{
  content:'' !important; position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  top:auto !important; height:3px !important; width:auto !important; inset:auto 0 0 0 !important;
  background:linear-gradient(90deg,#a8862a,#d4af37,#e8cf8a,#d4af37,#a8862a) !important;
  pointer-events:none !important; z-index:2 !important;
}
.article-hero::after, .page-hero::after, .life-hero::after, .satakam-hero::after{
  content:'ॐ' !important;
  position:absolute !important; right:-8px !important; top:-24px !important;
  font-size:120px !important; color:rgba(212,175,55,0.09) !important;
  font-family:serif !important; line-height:1 !important; pointer-events:none !important;
  background:none !important; height:auto !important; width:auto !important;
}
.article-hero .container, .article-hero-inner,
.page-hero .container, .life-hero .container, .satakam-hero .container{
  position:relative !important; z-index:1 !important;
  padding-top:0 !important; padding-bottom:0 !important;
}
.article-hero h1, .satakam-hero h1{ color:#e8cf8a !important; margin:0 0 4px !important; }
.article-hero-sub, .satakam-hero p{ color:#e8dcc4 !important; margin:0 !important; }
.article-hero-inner::after{
  content:'❖'; display:block; text-align:center; color:#d4af37; font-size:13px;
  margin-top:8px;
}

/* ═══ Meta badges — compact, single-line-friendly, mobile-adjusting ═══ */
.article-hero .article-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  justify-content:flex-end !important;
  margin-top:12px !important;
}
.article-hero .meta-badge{
  background:rgba(212,175,55,0.18) !important;
  border:1px solid rgba(212,175,55,0.45) !important;
  color:#e8cf8a !important;
  font-size:0.72rem !important;
  padding:5px 12px !important;
  border-radius:20px !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  line-height:1.2 !important;
}
/* Map/directions buttons slightly stronger */
.article-hero .meta-badge[href]{
  background:rgba(212,175,55,0.25) !important;
  font-weight:500 !important;
}
@media (max-width:640px){
  .article-hero .article-meta{ gap:6px !important; }
  .article-hero .meta-badge{ font-size:0.68rem !important; padding:5px 10px !important; }
}

/* ═══ Quick Facts map/direction buttons ═══ */
.qf-btn{
  display:block;
  background:linear-gradient(135deg,#e8cf8a,#d4af37);
  color:#2a1810 !important;
  text-decoration:none;
  text-align:center;
  padding:10px 14px;
  border-radius:10px;
  font-size:0.88rem;
  font-weight:600;
  font-family:'Tiro Telugu',serif;
  transition:transform .15s;
}
.qf-btn:active{ transform:scale(0.97); }
.qf-btn:hover{ filter:brightness(1.05); }

/* ═══ Simple footer (master) ═══ */
.footer-simple{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 18px 24px; text-align:center;
}
.footer-om{ font-size:1.9rem; color:#d4af37; line-height:1; }
.footer-name{ color:#e8cf8a; font-family:'Tiro Telugu',serif; font-size:1.05rem; }
.footer-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  margin-top:4px;
}
.footer-nav a{
  color:#c9b896 !important; text-decoration:none;
  font-family:'Tiro Telugu',serif; font-size:0.88rem;
  transition:color .15s;
}
.footer-nav a:hover{ color:#e8cf8a !important; }
.footer-copy{ color:#8a7f6e; font-size:0.8rem; margin-top:8px; font-family:'Tiro Telugu',serif; }
.footer-visits{ color:#8a7f6e; font-size:0.78rem; }
.footer-visits strong{ color:#d4af37; }

/* ═══ Floating side navigation (prev/next while reading) ═══ */
.side-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:900;
  display:flex; align-items:center; gap:0;
  height:56px;
  background:linear-gradient(135deg,#4a2c18,#2a2018);
  border:1px solid rgba(212,175,55,0.45);
  color:#e8cf8a; text-decoration:none;
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
  overflow:hidden;
  transition:width .28s ease, background .2s;
  width:44px;
}
.side-prev{ left:0; border-left:none; border-radius:0 14px 14px 0; }
.side-next{ right:0; border-right:none; border-radius:14px 0 0 14px; flex-direction:row-reverse; }
.sn-arrow{
  flex:0 0 44px; width:44px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1;
}
.sn-tip{
  white-space:nowrap; font-family:'Tiro Telugu',serif; font-size:0.86rem;
  padding-right:14px; opacity:0; transition:opacity .2s .06s;
}
.side-next .sn-tip{ padding-right:0; padding-left:14px; }
/* expand on hover (desktop) */
@media (hover:hover){
  .side-nav:hover{ width:auto; max-width:260px; background:linear-gradient(135deg,#5a3620,#3a2418); }
  .side-nav:hover .sn-tip{ opacity:1; }
}
.side-nav:active{ transform:translateY(-50%) scale(0.96); }
/* last card -> back to category, highlighted gold */
.side-end{
  background:linear-gradient(135deg,#d4af37,#a8862a);
  color:#2a1810; border-color:#e8cf8a;
}
@media (hover:hover){
  .side-end:hover{ background:linear-gradient(135deg,#e8cf8a,#d4af37); }
}
/* Mobile: smaller, tucked to the edges, no hover expand */
@media (max-width:640px){
  .side-nav{ width:36px; height:48px; }
  .sn-arrow{ flex:0 0 36px; width:36px; height:48px; font-size:1.3rem; }
  .sn-tip{ display:none; }
}

/* ═══ Article body as a proper card (was flat / borderless) ═══ */
.article-layout > .article-body{
  background:#fff !important;
  border:1px solid #ecd9a8 !important;
  border-radius:16px !important;
  padding:26px 28px !important;
  box-shadow:0 4px 18px rgba(124,28,28,0.07) !important;
  box-sizing:border-box;
}
@media (max-width:640px){
  .article-layout > .article-body{
    padding:20px 18px !important;
    border-radius:14px !important;
  }
}

/* ═══ Content card — covers BOTH layout types (article-layout & life-story-layout) ═══ */
.life-story-layout > .chapter-content{
  background:#fff !important;
  border:1px solid #ecd9a8 !important;
  border-radius:16px !important;
  padding:26px 28px !important;
  box-shadow:0 4px 18px rgba(124,28,28,0.07) !important;
  box-sizing:border-box;
}
/* Chapter nav sidebar gets a matching card */
.life-story-layout > .chapter-nav{
  background:linear-gradient(135deg,#fff,#fdf6e8) !important;
  border:1px solid #ecd9a8 !important;
  border-radius:16px !important;
  padding:18px 16px !important;
  box-shadow:0 4px 18px rgba(124,28,28,0.06) !important;
  box-sizing:border-box;
  align-self:flex-start;
}
@media (max-width:640px){
  .life-story-layout > .chapter-content{ padding:20px 18px !important; border-radius:14px !important; }
  .life-story-layout > .chapter-nav{ padding:14px 12px !important; }
}

/* ═══ Plain text pages (about, contact, privacy, sanatana-dharma, hubs) ═══ */
.page-card{
  background:#fff !important;
  border:1px solid #ecd9a8 !important;
  border-radius:16px !important;
  padding:28px 30px !important;
  box-shadow:0 4px 18px rgba(124,28,28,0.07) !important;
  box-sizing:border-box;
}
.page-card > *:first-child{ margin-top:0 !important; }
.page-card > *:last-child{ margin-bottom:0 !important; }
@media (max-width:640px){
  .page-card{ padding:20px 18px !important; border-radius:14px !important; }
}