/* ================================================================
   PACKAGES PAGE — FULL STYLESHEET (v3 — auto-expand bug fixed)
   File: packages-page.css

   Load this AFTER your global style.css:
     <link rel="stylesheet" href="<?= $base ?>css/style.css">
     <link rel="stylesheet" href="<?= $base ?>css/packages-page.css">

   ----------------------------------------------------------------
   WHY THE BUG HAPPENED (v2)
   ----------------------------------------------------------------
   v2 used CSS Grid with named areas where Parivaar spanned two
   rows (row1 + row2). Because Parivaar is always force-expanded
   (tall), the grid track-sizing algorithm grew BOTH spanned rows
   to fit it. Combined with `height: 100%` + `align-items: stretch`
   on every card, Sakha/Bandhu (row1) and Sahara/Gati (row2) were
   then stretched to match that inflated row height — even though
   their own content was short. That's the "everything expands
   together" bug in the screenshot.

   ----------------------------------------------------------------
   THE FIX (v3)
   ----------------------------------------------------------------
   Desktop no longer uses row-spanning grid at all. Instead:
     - Sakha + Sahara are grouped in one flex COLUMN (.pkg-col)
     - Bandhu + Gati are grouped in another flex COLUMN (.pkg-col)
     - Parivaar sits between them as its own flex item
   These three flex items sit in one flex ROW, aligned to
   `flex-start` (not stretch), so each column's height is fully
   independent of the others. Expanding Sakha can only grow the
   left column — Parivaar and the right column are structurally
   unaffected, guaranteed by how flexbox sizes independent items.

   On tablet/mobile, the `.pkg-col` wrappers are neutralised with
   `display: contents` so the cards fall back to a plain grid /
   single column, exactly as before (Parivaar first, same width
   as everything else, normal tap-to-expand).

   Requires two small wrapper <div class="pkg-col">...</div>
   elements in packages.php around (Sakha, Sahara) and (Bandhu,
   Gati) — see the updated packages.php. No JS changes needed.
   ================================================================ */


/* ================================================================
   1) BASE CARD POLISH
   --------------------------------------------------------------
   IMPORTANT: no forced height:100% / stretch here anymore — every
   card sizes to its own content by default. Only Parivaar (below)
   is allowed to be as tall as it needs to be.
   ---------------------------------------------------------------- */
.packages-grid-featured .package-card,
.pkg-col .package-card {
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .4s cubic-bezier(0.25,0.8,0.25,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.packages-grid-featured .package-card:hover,
.pkg-col .package-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.packages-grid-featured .package-card-body,
.pkg-col .package-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.packages-grid-featured .package-card:not(.pkg-parivaar),
.pkg-col .package-card {
  border-color: rgba(30,38,86,.08);
}
.packages-grid-featured .package-card:not(.pkg-parivaar):hover,
.pkg-col .package-card:hover {
  border-color: rgba(30,38,86,.16);
}

.package-expand-content {
  transition: grid-template-rows .45s cubic-bezier(0.25, 0.8, 0.25, 1),
              margin-top .45s ease,
              border-color .35s ease .05s;
}
.package-expand-inner .package-includes { margin: 0 0 .9rem; }
.package-expand-inner .expand-text {
  padding-top: .9rem;
  border-top: 1px dashed rgba(30,38,86,.1);
}
.package-price-tag { margin-bottom: .0rem; letter-spacing: .01em; }
.package-name { letter-spacing: .01em; }
.package-type { font-weight: 600; }
.package-includes li { margin-bottom: .52rem; }
.view-more-btn { transition: color .3s ease, gap .3s ease; }
.view-more-btn:hover { gap: 8px; }

/* ================================================================
   2) PARIVAAR — "FAMILY CHOICE" RIBBON + HERO STYLING
   ---------------------------------------------------------------- */
.pkg-parivaar.package-card-featured {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  border-style: solid;
  border-color: var(--amber-gold);
  background: linear-gradient(180deg, #ffffff 0%, var(--amber-lt) 160%);
  box-shadow: 0 10px 34px rgba(227,176,65,.16), var(--shadow-card);
  text-align: center;
}
.pkg-parivaar.package-card-featured:hover {
  box-shadow: 0 14px 46px rgba(227,176,65,.22), var(--shadow-hover);
}
.package-ribbon {
  position: absolute;
  top: 22px;
  right: -42px;
  width: 168px;
  padding: .42rem 0;
  text-align: center;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--amber-gold) 0%, #cf9f38 100%);
  color: var(--regal-blue);
  font-family: var(--font-subheading);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(30,38,86,.18);
  z-index: 3;
  pointer-events: none;
}
.pkg-parivaar .package-card-top { text-align: center; padding-top: 2.5rem; }
.pkg-parivaar .package-accent { margin: 0 auto 1.1rem; width: 48px; }
.pkg-parivaar .package-name { font-size: 1.75rem; }
.pkg-parivaar .package-type { font-size: .78rem; }
.pkg-parivaar .package-desc { max-width: 320px; margin: .75rem auto 0; }
.pkg-parivaar .package-card-body { align-items: center; }
.pkg-parivaar .package-card-body > div { width: 100%; max-width: 330px; margin: 0 auto; }
.pkg-parivaar .package-price-tag { font-size: 1.4rem; text-align: center; }
.pkg-parivaar .package-includes { text-align: left; }
.pkg-parivaar .view-more-btn { margin-left: auto; margin-right: auto; }

@keyframes parivaarGlow {
  0%, 100% { box-shadow: 0 10px 34px rgba(227,176,65,.16), var(--shadow-card); }
  50%      { box-shadow: 0 16px 50px rgba(227,176,65,.32), var(--shadow-hover); }
}
.pkg-parivaar.package-card-featured { animation: parivaarGlow 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pkg-parivaar.package-card-featured { animation: none; }
  .package-card, .package-expand-content, .view-more-btn .arrow {
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   3) DESKTOP (≥992px) — INDEPENDENT FLEX COLUMNS
   --------------------------------------------------------------
     [ Sakha   ]                       [ Bandhu ]
     [ .......  ]     [ Parivaar ]     [ ....... ]
     [ Sahara  ]     (always open)     [ Gati   ]

   Three equal-width flex items in a row: left .pkg-col, Parivaar,
   right .pkg-col. `align-items: flex-start` means NONE of them
   stretch to match each other's height — this is what guarantees
   expanding one card can never inflate the others.
   ---------------------------------------------------------------- */
@media (min-width: 992px) {
  .packages-grid-featured {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
  }
  .pkg-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    flex: 1 1 0;
    min-width: 0;
  }
  .pkg-parivaar {
    flex: 1 1 0;
    min-width: 0;
  }

  #pkg-parivaar .package-expand-content { display: block !important; }
  #pkg-parivaar .view-more-btn .arrow { transform: rotate(180deg); }
}

/* ================================================================
   4) TABLET (768px – 991.98px)
   --------------------------------------------------------------
     [ Parivaar (full width) ]
     [ Sakha   ] [ Bandhu ]
     [ Sahara  ] [ Gati   ]

   The .pkg-col wrappers are neutralised with `display: contents`
   so Sakha/Sahara/Bandhu/Gati act as direct grid items again —
   the wrapper divs don't add any extra layer here. Two equal
   columns (1fr 1fr), independent rows (`auto`), so expanding one
   card cannot affect another's height (no shared spanning item).
   Parivaar collapses back to a normal tap-to-expand card here.
   ---------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
  .pkg-col { display: contents; }

  .packages-grid-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "parivaar parivaar"
      "sakha    bandhu"
      "sahara   gati";
    align-items: start;
    gap: 1.5rem;
  }
  .pkg-sakha    { grid-area: sakha; }
  .pkg-bandhu   { grid-area: bandhu; }
  .pkg-gati     { grid-area: gati; }
  .pkg-sahara   { grid-area: sahara; }
  .pkg-parivaar { grid-area: parivaar; }

  .pkg-parivaar .package-desc { max-width: 460px; }
  .pkg-parivaar .package-card-body > div { max-width: 460px; }

  #pkg-parivaar .package-expand-content { display: none; }
  #pkg-parivaar.expanded .package-expand-content { display: block; }
  #pkg-parivaar .view-more-btn .arrow { transform: none; }
  #pkg-parivaar.expanded .view-more-btn .arrow { transform: rotate(180deg); }
}

/* ================================================================
   5) MOBILE (<576px)
   --------------------------------------------------------------
     [ Parivaar ]
     [ Sakha    ]
     [ Bandhu   ]
     [ Gati     ]
     [ Sahara   ]

   Same `display: contents` trick on `.pkg-col`. Single column,
   every card exactly the same width, independent heights, and
   Parivaar placed first purely via grid-template-areas (no JS
   reordering). Parivaar behaves like every other card: collapsed
   until "View Details" is tapped.
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .pkg-col { display: contents; }

  .packages-grid-featured {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "parivaar"
      "sakha"
      "bandhu"
      "gati"
      "sahara";
    align-items: start;
    gap: 1.25rem;
  }
  .pkg-sakha    { grid-area: sakha; }
  .pkg-bandhu   { grid-area: bandhu; }
  .pkg-gati     { grid-area: gati; }
  .pkg-sahara   { grid-area: sahara; }
  .pkg-parivaar { grid-area: parivaar; }

  .pkg-parivaar .package-card-top { padding-top: 2.2rem; }

  #pkg-parivaar .package-expand-content { display: none; }
  #pkg-parivaar.expanded .package-expand-content { display: block; }
  #pkg-parivaar .view-more-btn .arrow { transform: none; }
  #pkg-parivaar.expanded .view-more-btn .arrow { transform: rotate(180deg); }
}


/* ================================================================
   ADDITIONAL SUPPORT — static showcase band, always fully open
   ================================================================ */
.addon-showcase {
  margin-top: 3.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--regal-blue) 0%, var(--regal-blue-lt) 100%);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  color: var(--ivory-cream);
}
.addon-showcase::before {
  content: '';
  position: absolute; top: -60px; left: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.08);
}
.addon-showcase::after {
  content: '';
  position: absolute; bottom: -80px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,176,65,.15) 0%, transparent 70%);
}
.addon-showcase-inner {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.addon-showcase-head { max-width: 720px; }
.addon-showcase-head .package-accent { margin-bottom: 1rem; }
.addon-showcase-head .package-name {
  color: var(--ivory-cream);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}
.addon-showcase-head .package-type {
  color: var(--amber-gold);
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  margin-top: .3rem;
}
.addon-showcase-head .package-desc {
  font-family: var(--font-body);
  font-style: normal;
  color: rgba(253,247,240,.78);
  font-size: .95rem;
  line-height: 1.8;
  margin-top: .9rem;
  max-width: 620px;
}

.addon-defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.addon-def-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
}
.addon-def-card h4 {
  color: var(--ivory-cream);
  font-size: 1.05rem;
  margin: 0 0 .5rem;
}
.addon-def-card p {
  color: rgba(253,247,240,.75);
  font-size: .88rem;
  line-height: 1.7;
  margin: 0;
}

.addon-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
}
.addon-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: rgba(255,255,255,.04);
}
.addon-table th,
.addon-table td {
  padding: .85rem 1.1rem;
  text-align: left;
  font-size: .88rem;
  color: rgba(253,247,240,.88);
  border-bottom: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.addon-table thead th {
  color: var(--amber-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  background: rgba(255,255,255,.05);
}
.addon-table tbody tr:last-child td { border-bottom: none; }
.addon-table tbody tr:hover { background: rgba(255,255,255,.05); }

.addon-notes {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.5rem;
}
.addon-notes h4 {
  color: var(--ivory-cream);
  font-size: 1rem;
  margin: 0 0 .75rem;
}
.addon-notes ul {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(253,247,240,.75);
  font-size: .88rem;
  line-height: 1.8;
}

@media (max-width: 767.98px) {
  .addon-showcase { padding: 2.2rem 1.4rem; }
  .addon-defs { grid-template-columns: 1fr; }
}