/* ==========================================================================
   ARADHNAA — sections.css
   Homepage content bands below the hero. Section types follow the structure
   of pujashree.com's homepage; the palette, type, art and copy are ours.
   ========================================================================== */

/* Shared section heading -------------------------------------------------- */
.band-head{ text-align:center; max-width:56ch; margin-inline:auto; }
.band-head__kicker{
  font-family:var(--font-deva); font-size:15px;
  color:var(--sindoor); margin-bottom:var(--space-2);
}
.band-head__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px, 3.2vw, 36px); line-height:1.18;
  color:var(--ink); text-wrap:balance;
}
.band-head__title em{ font-style:normal; color:var(--marigold); }
.band-head__sub{
  font-family:var(--font-accent); font-style:italic;
  font-size:17px; color:var(--ink-muted);
  margin-top:var(--space-3); text-wrap:pretty;
}
.on-dark .band-head__kicker{ color:var(--marigold); }
.on-dark .band-head__title{ color:var(--text); }
.on-dark .band-head__title em{ color:var(--ember); }
.on-dark .band-head__sub{ color:var(--text-muted); }

/* ==========================================================================
   RITUAL PILLARS — the four moments of a puja
   ========================================================================== */
.rituals{
  position:relative; overflow:hidden;
  /* Glow kept at .06: at .10 it lifted the backdrop enough that the Marigold
     Devanagari accents fell to 4.41:1, just under AA. */
  background:
    radial-gradient(ellipse 60% 60% at 18% 15%, rgba(240,169,62,.06), transparent 62%),
    radial-gradient(ellipse 60% 60% at 82% 85%, rgba(163,44,30,.10), transparent 62%),
    linear-gradient(180deg, var(--void), var(--deep) 55%, var(--void));
  border-block:1px solid var(--line);
  padding-block:var(--space-8);
}
.rituals__grid{
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(2, 1fr);
  margin-top:var(--space-7);
}
@media (min-width:820px){ .rituals__grid{ grid-template-columns:repeat(4, 1fr); gap:var(--space-6); } }

.ritual{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-3); padding:var(--space-3) var(--space-2);
}
.ritual__disc{
  display:grid; place-items:center;
  width:104px; height:104px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:radial-gradient(circle at 50% 40%, rgba(240,169,62,.18), transparent 68%);
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.ritual__disc svg{ width:54px; height:54px; }
.ritual:hover .ritual__disc{ border-color:var(--ember); transform:translateY(-4px); }
.ritual__deva{
  font-family:var(--font-deva); font-size:15px; color:var(--marigold);
}
.ritual__name{
  font-family:var(--font-display); font-weight:600;
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text);
}
.ritual__note{
  font-family:var(--font-accent); font-style:italic;
  font-size:15px; line-height:1.5; color:var(--text-muted);
  max-width:24ch;
}

/* ==========================================================================
   OUR PROMISE — trust pillars
   ========================================================================== */
.promise{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--void), var(--deep) 50%, var(--void));
  border-block:1px solid var(--line);
  padding-block:var(--space-8);
}
.promise__grid{
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(2, 1fr);
  margin-top:var(--space-7);
}
@media (min-width:700px){ .promise__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1040px){ .promise__grid{ grid-template-columns:repeat(5, 1fr); gap:var(--space-4); } }

.promise__item{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--space-3);
}
.promise__ring{
  display:grid; place-items:center;
  width:72px; height:72px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(201,161,90,.07);
}
.promise__ring svg{ width:32px; height:32px; stroke:var(--brass); fill:none; }
.promise__item h3{
  font-family:var(--font-display); font-weight:600;
  font-size:15px; color:var(--text); line-height:1.3;
}
.promise__item p{
  font-size:13.5px; line-height:1.55; color:var(--text-muted); max-width:26ch;
}

/* ==========================================================================
   PRESENCE MARQUEE — where we deliver
   ========================================================================== */
.presence{
  background:var(--deep);
  border-block:1px solid var(--line);
  padding-block:var(--space-5);
  overflow:hidden;
}
.presence__label{
  text-align:center; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:var(--space-4);
}
.presence__track{
  display:flex; width:max-content;
  animation:presence-scroll 34s linear infinite;
}
.presence:hover .presence__track,
.presence:focus-within .presence__track{ animation-play-state:paused; }
@keyframes presence-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
  .presence__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}
.presence__item{
  display:inline-flex; align-items:center; gap:14px;
  padding-inline:22px; flex:none;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(16px, 2vw, 22px); letter-spacing:.06em;
  color:var(--sandalwood); white-space:nowrap;
}
.presence__item::after{
  content:"\2726"; color:var(--brass); font-size:12px; opacity:.75;
}

/* Two rows that scroll sideways rather than four stacked rows — same twelve
   tiles, roughly half the height. Columns fill top-to-bottom, so reading
   order down each pair matches what you see. */
@media (min-width:1000px){
  /* Six columns fit, so nothing needs to scroll on a wide screen. */
}

/* ==========================================================================
   COMPACT BANDS ON PHONES
   The promise band was running to about a third of the screen at 375px.
   ========================================================================== */
@media (max-width:599px){
  /* Stacked icon-over-text needs three rows of two on a phone and ran to
     about a third of the screen. One column of icon-left rows carries the
     same five promises, with their specifics intact, in far less height. */
  .promise{ padding-block:var(--space-5); }
  .promise__grid{
    grid-template-columns:1fr;
    margin-top:var(--space-4); gap:var(--space-3);
  }
  .promise__item{
    flex-direction:row; align-items:flex-start; text-align:left;
    gap:var(--space-3);
  }
  .promise__ring{ width:44px; height:44px; flex:none; }
  .promise__ring svg{ width:21px; height:21px; }
  .promise__item h3{ font-size:13.5px; margin-bottom:2px; }
  .promise__item p{ font-size:12.5px; line-height:1.45; max-width:none; }
  .promise .band-head__title{ font-size:22px; }

  .presence{ padding-block:var(--space-4); }
  .band-head__sub{ font-size:15px; margin-top:var(--space-2); }
}

/* ==========================================================================
   NEWSLETTER BAND
   Same treatment as the newsletter drawer behind the profile icon: dark
   panel, brass uppercase label, underline field, Marigold-to-Sindoor CTA.
   ========================================================================== */
.signup{
  position:relative; overflow:hidden;
  background:var(--grad-surface);
  border-block:1px solid var(--line-strong);
  padding-block:var(--space-7);
  color:var(--text);
}
.signup__inner{ position:relative; z-index:2; text-align:center; max-width:560px; }
.signup__kicker{
  font-family:var(--font-deva); color:var(--marigold);
  font-size:15px; margin-bottom:var(--space-2);
}
.signup__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px, 2.6vw, 28px); line-height:1.24;
  color:var(--text); text-wrap:balance;
}
.signup__title em{ font-style:normal; color:var(--ember); }
.signup__lede{
  font-family:var(--font-accent); font-style:italic;
  font-size:16px; color:var(--text-muted); margin-top:var(--space-2);
}
.signup__form{
  display:flex; align-items:flex-end; gap:var(--space-4);
  margin-top:var(--space-5); text-align:left;
}
.signup__field{ flex:1 1 auto; min-width:0; }
.signup__label{
  display:block; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:var(--space-2);
}
/* Underline field, exactly as in the drawer */
.signup__input{
  width:100%; min-height:48px; padding:12px 2px;
  background:transparent; border:none;
  border-bottom:1px solid var(--line-strong);
  color:var(--text); font-family:var(--font-body);
  font-size:16px;                      /* 16px = no iOS zoom */
  transition:border-color var(--dur-fast) var(--ease-out);
}
.signup__input::placeholder{ color:rgba(241,231,211,.42); }
.signup__input:focus{ outline:none; border-bottom-color:var(--ember); }
.signup__btn{
  flex:none; min-height:48px; padding:15px 30px;
  border:none; border-radius:var(--radius-sm);
  background:var(--grad-cta); color:var(--sandalwood);
  box-shadow:var(--glow-cta);
  font-family:var(--font-body); font-weight:600;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.signup__btn:hover{ transform:translateY(-2px); box-shadow:var(--glow-cta-hi); }
.signup__perk{
  margin-top:var(--space-4); padding-top:var(--space-3);
  border-top:1px dashed var(--line-strong);
  font-size:12.5px; color:var(--text-subtle); line-height:1.55;
}
.signup__perk b{ color:var(--brass); }
/* Collapses to nothing until there is a message, so an empty status line
   does not sit between the button and the perk as dead space. */
.signup__status{ font-size:13.5px; color:var(--ember); }
.signup__status:not(:empty){ margin-top:var(--space-2); }

@media (max-width:599px){
  .signup{ padding-block:var(--space-6); }
  .signup__form{ flex-direction:column; align-items:stretch; gap:var(--space-4); }
  .signup__btn{ width:100%; }
}

/* ==========================================================================
   SOCIAL ROW
   ========================================================================== */
.social{ padding-block:var(--space-5) var(--space-4); text-align:center; }
.social__title{
  font-family:var(--font-accent); font-style:italic;
  font-size:18px; color:var(--ink-muted);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.social__title em{ font-style:normal; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
.social__flourish{ color:var(--brass-deep); font-size:12px; }
.social__links{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--space-3); margin-top:var(--space-4);
}
.social__link{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--paper-line-strong);
  color:var(--brass-deep); background:var(--paper-surface);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.social__link svg{ width:22px; height:22px; }
.social__link:hover{
  color:var(--sandalwood); background:var(--deep);
  border-color:var(--deep); transform:translateY(-3px);
}

/* ==========================================================================
   HOMEPAGE FAQ
   The details/summary styling already exists in page.css; this only gives
   the band its rhythm and lets the answers use the full column, since the
   70ch cap that suits a policy page leaves the homepage looking half-empty.
   ========================================================================== */
.home-faq{ padding-block:var(--space-6) var(--space-5); }
.home-faq .faq{ max-width:78ch; margin-inline:auto; }

@media (max-width:599px){
  .home-faq{ padding-block:var(--space-5); }
  .home-faq .faq{ margin-top:var(--space-3); }
  .home-faq .band-head__title{ font-size:22px; }
}