/* ================================================================
   PACKAGES LAYOUT — used by packages.php AND the homepage packages block
   File: css/packages-page.css   (load AFTER style.css via $extraCss)

   Desktop (≥992px) — "X" format, three independent flex items:
       [ Sakha   ]                       [ Bandhu ]
       [ ....... ]     [ Parivaar ]      [ ...... ]
       [ Sahara  ]                       [ Gati   ]
   Tablet / mobile — .pkg-col wrappers vanish (display: contents) and
   Parivaar is placed FIRST via grid-template-areas.

   FIXES in this version
   - Parivaar no longer force-expanded on desktop (removed the
     `display:block !important` rule) — it collapses/expands like
     every other card.
   - Hover effect removed from the Additional Support table rows.
   - Added .packages-grid-home for the simplified homepage cards.
   ================================================================ */

/* ---------- 1) CARDS INSIDE THE GRID ---------- */
.packages-grid-featured .package-card,
.pkg-col .package-card { height: auto; }
.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 { justify-content: flex-start; }
.package-expand-content { transition: border-color .35s ease .05s; }

/* ---------- 2) PARIVAAR — "FAMILY CHOICE" ---------- */
.pkg-parivaar.package-card-featured {
  position: relative; overflow: hidden;
  border: 2px solid 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;
  animation: parivaarGlow 5s ease-in-out infinite;
}
.pkg-parivaar.package-card-featured:hover { box-shadow: 0 14px 46px rgba(227,176,65,.22), var(--shadow-hover); }
@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); }
}
.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: .7rem; font-weight: 700; 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.9rem; }
.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.5rem; text-align: center; }
.pkg-parivaar .package-includes { text-align: left; }
.pkg-parivaar .view-more-btn { margin-left: auto; margin-right: auto; }

/* ---------- 3) DESKTOP (≥992px) ---------- */
@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; }

  /* Homepage: simplified cards, so the centre card stretches to match
     the two side columns and the "X" reads as one balanced shape */
  .packages-grid-home { align-items: stretch; }
  .packages-grid-home .pkg-col .package-card { flex: 1; }
  .packages-grid-home .pkg-parivaar { justify-content: center; }
}

/* ---------- 4) TABLET (576–991px) ---------- */
@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; }
}

/* ---------- 5) MOBILE (<576px) — Parivaar first ---------- */
@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; }
  .package-ribbon { top: 18px; right: -46px; width: 158px; font-size: .64rem; }
}

/* ---------- 6) ADDITIONAL SUPPORT — static showcase band ---------- */
.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.8rem, 3vw, 2.3rem); }
.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: 1.05rem; margin-top: .3rem; font-weight: 500; }
.addon-showcase-head .package-desc { font-family: var(--font-body); font-style: normal; color: rgba(253,247,240,.8); font-size: 1rem; 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-family: var(--font-subheading); font-weight: 700; font-size: 1.15rem; margin: 0 0 .5rem; }
.addon-def-card p { color: rgba(253,247,240,.78); font-size: .92rem; 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: .92rem; color: rgba(253,247,240,.9); border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.addon-table thead th { color: var(--amber-gold); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; background: rgba(255,255,255,.05); }
.addon-table tbody tr:last-child td { border-bottom: none; }
/* (row hover effect intentionally removed) */
.addon-notes { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; }
.addon-notes h4 { color: var(--ivory-cream); font-family: var(--font-subheading); font-weight: 700; font-size: 1.15rem; margin: 0 0 .75rem; }
.addon-notes ul { margin: 0; padding-left: 1.2rem; list-style: disc; color: rgba(253,247,240,.78); font-size: .92rem; line-height: 1.8; }

@media (max-width: 767.98px) {
  .addon-showcase { padding: 2.2rem 1.4rem; }
  .addon-defs { grid-template-columns: 1fr; }
}
@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; }
}

/* ============================================================
   CENTER ALIGNMENT FOR ALL PACKAGE CARDS
   ============================================================ */

.packages-grid-featured .package-card,
.pkg-col .package-card {
  text-align: center;
}

.packages-grid-featured .package-card-top,
.pkg-col .package-card-top {
  text-align: center;
}

.packages-grid-featured .package-card-body,
.pkg-col .package-card-body {
  text-align: center;
  align-items: center;
}

.packages-grid-featured .package-accent,
.pkg-col .package-accent {
  margin-left: auto;
  margin-right: auto;
}
.packages-grid-featured .package-includes,
.pkg-col .package-includes {
  text-align: left;
}
.packages-grid-featured .package-desc,
.pkg-col .package-desc {
  margin-left: auto;
  margin-right: auto;
}

.packages-grid-featured .package-price-tag,
.pkg-col .package-price-tag {
  text-align: center;
}

.packages-grid-featured .view-more-btn,
.pkg-col .view-more-btn {
  margin-left: auto;
  margin-right: auto;
}