/* ================================================================
   HOME.CSS — homepage sections below the hero, + shared card/tab
   components used by home.html, puja.html, and package.html
   ================================================================ */

/* ================================================================
   PROCESS DESIGN — "From Booking to Divine Blessings"
   Compact horizontal layout to fit in one scroll with Our Pujas
   ================================================================ */
.process-section {
  background-color: transparent; /* lets the soft cream body background show through */
  padding: 20px 0 10px !important; /* extremely compact */
  position: relative;
}

.process-section .section-title {
  color: var(--ink);
  margin-bottom: 25px;
  font-size: 2rem; /* slightly smaller to save space */
  letter-spacing: -0.02em;
}

.process-section .section-title em {
  color: var(--gold);
  font-style: normal;
}



.process-horizontal {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  gap: 15px;
}

.process-horizontal .process-step {
  width: 23%;
  text-align: center;
  position: relative;
}

.step-connector {
  position: absolute;
  top: 45px; /* half of 90px circle */
  left: 65%;
  width: 70%;
  height: 1px;
  border-top: 1px dashed rgba(201,162,39,0.5);
  z-index: 0;
}

.step-connector::after {
  content: "▶";
  position: absolute;
  right: -6px;
  top: -8.5px;
  color: rgba(201,162,39,0.8);
  font-size: 12px;
}

.process-horizontal .step-circle {
  width: 90px; /* reduced from 110px */
  height: 90px;
  margin: 0 auto 12px; /* reduced from 20px */
  border: 1px solid rgba(201,162,39,0.2);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.03);
}

.process-horizontal .step-circle::after {
  content: "";
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 1.5px solid rgba(201,162,39,0.6);
  border-radius: 50%;
}

.process-horizontal .step-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: #3A2318; /* Dark brown */
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.process-horizontal .step-icon {
  color: #3A2318; /* Dark brown */
  z-index: 3;
}

.process-horizontal .step-icon svg {
  width: 32px; height: 32px; /* reduced from 42px */
}

.process-horizontal h4 {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.process-horizontal p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

/* Ensure Puja Section pulls up tight to Process Section */
.puja-section {
  padding-top: 5px !important;
  padding-bottom: 60px !important;
}

.puja-section .section-title {
  margin-bottom: 25px;
  color: var(--ink);
}

.puja-section .section-title em {
  color: #E85A1C;
  font-style: normal;
}

.puja-section .section-sub {
  margin-bottom: 20px;
}

/* Responsive Mobile Layout (Ultra-Compact Vertical Grid) */
@media (max-width: 767px) {
  .process-section {
    padding: 15px 0 5px !important;
  }
  .process-section .section-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
  .process-horizontal {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .process-horizontal .process-step {
    width: 100%;
    max-width: 400px;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    text-align: left;
    align-items: center;
  }
  .process-horizontal .step-circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    margin: 0;
  }
  .process-horizontal .step-num {
    width: 18px; height: 18px; font-size: 0.6rem; top: -4px;
  }
  .process-horizontal .step-icon svg {
    width: 22px; height: 22px;
  }
  .process-horizontal h4 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 0.9rem;
    margin: 0;
  }
  .process-horizontal p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0;
  }
  .step-connector {
    top: 56px;
    left: 28px;
    width: 1px;
    height: 15px;
    border-top: none;
    border-left: 1px dashed rgba(201,162,39,0.5);
    transform: none;
  }
  .step-connector::after {
    display: none;
  }
}

.puja-section{background:var(--bg-soft);background-image:radial-gradient(rgba(201,162,39,.07) 1.5px,transparent 1.5px);background-size:26px 26px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%, 310px),1fr));gap:26px}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:none;display:flex;flex-direction:column;transition:transform .18s, box-shadow .18s;position:relative}

/* signature accent bar — draws in from the left on hover, a small
   but deliberate premium touch — a thin gold border accent, one of
   gold's few selective uses on the site alongside prices/headings/
   icons/logo, per the palette ratio (mostly maroon, gold used
   sparingly for accents rather than large fills) */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out, ease);
}
.card:hover::before{transform:scaleX(1)}

.card:hover{transform:translateY(-5px)}

.card-media{height:240px;display:flex;align-items:center;justify-content:center;color:#fff}

.card-media svg{width:80px;height:80px;opacity:.9}

.cm-a{background:linear-gradient(150deg,#4A0C16,#C9A227)}

.cm-b{background:linear-gradient(150deg,#4A0C16,#6B1220)}

.cm-c{background:linear-gradient(150deg,#7A4A00,#B8860B)}

.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}

.card-body h3{font-size:1.08rem;color:var(--ink)}

.card-desc{font-size:.86rem;color:var(--muted);flex:1}

.card-meta{font-size:.82rem;color:var(--ink);font-weight:500;display:flex;flex-direction:column;gap:6px}

.card-meta span{display:flex;gap:8px;align-items:flex-start}

.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}

.price{font-size:1.5rem;font-weight:900;color:var(--red);letter-spacing:-.01em}

.price small{display:block;font-size:.68rem;font-weight:600;color:var(--muted)}

/* ============================================================
   BOOK NOW — the one canonical button style used EVERYWHERE a
   "Book Now" / "Subscribe" CTA appears (card grids on home/puja/
   package pages, the puja-details page's main button and sticky
   bar). Matches the reference exactly: solid maroon pill, bold
   white text, and a circular white arrow badge on the right —
   not a gradient, not a plain text link. See puja-details.css for
   the two other spots this same treatment reaches.
   ============================================================ */
.book-link{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--booking-gradient);color:#fff;
  font-weight:700;font-size:.95rem;
  border:none;border-radius:999px;
  padding:6px 6px 6px 22px;
  box-shadow:0 10px 24px rgba(107,18,32,.28);
  transition:transform .15s,box-shadow .15s;
}
.book-link:hover{background:var(--brand-gradient-hover);transform:translateY(-2px)}
.book-link .arrow{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:none;
  background:#fff;color:var(--red);font-size:.85rem;
}

.view-all{text-align:center;margin-top:38px}

.detail-info .card-meta{margin:14px 0;font-size:.92rem}

.pkg-badge{display:inline-block;background:var(--red-soft);color:var(--red);border-radius:999px;padding:4px 14px;font-size:.74rem;font-weight:700;margin-bottom:10px}

.card-media{position:relative}

.card-act{position:absolute;right:10px;width:36px;height:36px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.18);font-size:1rem;color:#3A3F4C;cursor:pointer;transition:transform .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .18s;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}

.card-act:hover{transform:scale(1.05) translateZ(0);box-shadow:0 4px 16px rgba(0,0,0,.22)}

.card-heart{top:10px}

.card-share{top:54px}

.card-heart.liked{color:#6B1220}

.card-tagline{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--red);text-transform:uppercase;margin-bottom:2px}

@media (max-width: 600px) {
  .card-tagline { font-size:.82rem; letter-spacing:.06em; }
  .pkg-badge { font-size:.82rem; padding:5px 14px; }
}

/* ================================================================
   "OUR PUJAS" — NEW LIGHT CENTERED DESIGN
   ================================================================
   Matches the user's latest light-theme screenshot.
   Cards are centered, have an overlapping icon, outline buttons, 
   and meta information (price/date) is hidden for a clean look.
   ================================================================ */

.puja-section .tab {
  background: #fff;
  border: 1px solid #eaeaea;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}

.puja-section .tab.active {
  background: #E85A1C; 
  color: #fff;
  border-color: #E85A1C;
}

.puja-section .card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.03);
}

.puja-section .card-media {
  height: 180px; 
}

.puja-section .card-body {
  padding: 20px 22px 22px; 
  position: relative;
}

.puja-section .card-desc {
  font-size: 0.82rem;
  margin-bottom: 12px;
}

/* Stack the footer vertically */
.puja-section .card-foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 14px;
}

/* Make the book button full-width with the arrow on the right */
.puja-section .book-link {
  width: 100%;
  justify-content: space-between;
  padding: 6px 6px 6px 22px;
}

/* ================================================================
   "OUR PUJAS" CAROUSEL — horizontal scroll-snap with dot pagination
   ================================================================
   Scoped to .puja-carousel (only used inside .puja-section on the
   home page) so puja.html / package.html keep their normal grids.
   Pure CSS scrolling (native, works with touch/trackpad out of the
   box) — the JS in home.js only builds the dots and keeps them
   synced to scroll position, it doesn't drive the scrolling itself,
   so the carousel still works even if JS is slow to load.
   ================================================================ */
.puja-carousel{
  display:flex!important;
  grid-template-columns:none;
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:10px 4px 12px;
  scrollbar-width:none; /* Firefox */
}
.puja-carousel::-webkit-scrollbar{display:none} /* Chrome/Safari/Edge */
.puja-carousel .card{
  flex:0 0 320px;
  scroll-snap-align:start;
}

.puja-dots{display:flex;justify-content:center;gap:9px;margin-top:22px;}
.puja-dots .dot{
  width:9px;height:9px;border-radius:50%;border:none;padding:0;
  background:rgba(107,18,32,.25);cursor:pointer;
  transition:background var(--dur-fast,.22s) ease,width var(--dur-med,.5s) ease;
}
.puja-dots .dot.active{background:var(--maroon,#6B1220);width:24px;border-radius:5px}

/* ================================================================
   WHY SHUBHA SANKALPAM — value-prop grid
   ================================================================ */
.why-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0, 1fr));gap:24px;margin-top:36px;
}
.why-card{
  background: var(--bg);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: var(--radius);
  padding: 34px 24px;
  text-align: center;
  box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(155, 28, 28, 0.1);
  border-color: rgba(155, 28, 28, 0.3);
}
.why-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--red-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 12px rgba(155, 28, 28, 0.06);
}
.why-card h3{
  font-family: 'Fraunces', 'Noto Serif Devanagari', 'Noto Serif Telugu', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.why-card p{
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ================================================================
   SACRED TEMPLES — grid of temple cards
   ================================================================ */
.temple-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0, 1fr));gap:24px;margin-top:36px;
}
.temple-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.temple-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(74, 12, 22, 0.10)}
.temple-card-media{position:relative;aspect-ratio:4/3}
.temple-card-media .demo-media{width:100%;height:100%}
.temple-card-body{padding:18px 20px 22px}
.temple-card-body h3{
  font-family:'Fraunces','Noto Serif Devanagari','Noto Serif Telugu',Georgia,serif;
  font-weight:700;font-size:1.05rem;margin-bottom:6px;color:var(--ink);
}
.temple-card-body p{font-size:.88rem;color:var(--muted);line-height:1.5}

/* ================================================================
   TESTIMONIALS — "What Devotees Say"
   ================================================================ */
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0, 1fr));gap:24px;margin-top:36px;
}
.testimonial-card{
  background:#fff;border:none;border-radius:var(--radius);
  padding:32px 28px;position:relative;box-shadow:var(--shadow);
}
.testimonial-quote{
  font-family:'Fraunces',Georgia,serif;font-size:3rem;line-height:1;
  color:var(--gold);opacity:.5;margin-bottom:4px;
}
.testimonial-text{font-size:.92rem;color:var(--ink);line-height:1.6;margin-bottom:14px;min-height:4.8em}
.testimonial-rating{color:var(--gold);letter-spacing:1px;margin-bottom:10px;font-size:.9rem}
.testimonial-who{display:flex;flex-direction:column}
.testimonial-who b{font-family:'Fraunces','Noto Serif Devanagari','Noto Serif Telugu',Georgia,serif;font-weight:700;font-size:.95rem;color:var(--ink)}
.testimonial-who span{font-size:.8rem;color:var(--muted)}