/*
 * PunjabiLibas — Occasion Landing Pages (shared layout)
 * One stylesheet for all six occasion pages (Punjabi Wedding Guest,
 * Anand Karaj, Mehndi, Karva Chauth, Vaisakhi, Lohri) — see
 * template-occasion.php + pl_occasion_pages_config() in functions.php.
 * Relies on style.css's sitewide --pl-* tokens (always loaded, this
 * template doesn't opt out of the base stylesheet) rather than
 * redefining a local copy.
 */

.plo-page {
  font-family: var(--pl-font-body);
  color: var(--pl-charcoal);
  background: var(--pl-warm-white);
}

/* Astra's header.php always wraps page content in #content > .ast-container
   regardless of template — this is the GENERIC .ast-container (Astra's
   default customizer container width, ~1200-1320px), a completely
   different element from the widened .site-primary-header-wrap.ast-container
   in the header (see style.css) or .pl-shop-page .ast-container on the
   shop page. Setting the "full-width-container" Astra layout meta (see
   pl_create_occasion_pages()) only removes the sidebar column — it does
   NOT widen this container — so without this override every section
   here (including the hero) stays boxed at Astra's default width no
   matter what .plo-wrap says. Same fix homepage-fix.css already applies
   for template-homepage.php, scoped here to this template's own body
   class instead. */
.page-template-template-occasion-php #content,
.page-template-template-occasion-php #primary,
.page-template-template-occasion-php .site-content,
.page-template-template-occasion-php .ast-container,
.page-template-template-occasion-php #content .ast-container,
.page-template-template-occasion-php .ast-article-single,
.page-template-template-occasion-php article {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.page-template-template-occasion-php #secondary,
.page-template-template-occasion-php .widget-area {
  display: none !important;
}
/* The ancestor-width fix above wasn't enough on its own — confirmed by
   an actual rendered screenshot, not just reading the cascade: Astra's
   .ast-container is display:flex (flex-direction:column-reverse, see
   astra-theme-css-inline-css), and our OWN top-level sections were
   never given an explicit width, so they were shrink-wrapping to their
   content's natural width as flex items instead of stretching to fill
   the now-100%-wide container. Same class of bug homepage-fix.css
   already had to solve for .pl-hero/.pl-section — fixed the same way. */
.page-template-template-occasion-php .plo-page,
.page-template-template-occasion-php .plo-section,
.page-template-template-occasion-php .plo-final-cta {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex: none !important;
}
/* .plo-hero is now a plain block section (the two-column layout lives
   entirely in .plo-hero-grid's own CSS grid, one level down) — no
   longer needs display:flex here. */
.page-template-template-occasion-php .plo-hero {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex: none !important;
}

.plo-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HERO (two-column: text + real product photo) ────────
   Deliberately not a copy of the homepage's own light/neutral hero —
   full-bleed per-occasion colour gradient stays (from .plo-theme-*
   further down), text sits in a left column, and the right column
   shows the FIRST live product this occasion's own query returns
   (see $plo_hero_img_url in template-occasion.php) inside a framed
   card, with a floating stat card showing a real, dynamically-counted
   number of styles — not a fabricated rating figure. ─────────────── */
.plo-hero {
  background: linear-gradient(135deg, var(--pl-maroon-dark) 0%, var(--pl-maroon) 100%);
  color: var(--pl-warm-white);
  padding: 72px 24px 88px;
  position: relative;
  overflow: hidden;
}
.plo-hero .plo-wrap {
  position: relative;
  z-index: 1;
}
.plo-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.plo-hero-badge {
  display: inline-block;
  font-family: var(--pl-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-gold-light);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 5px 16px;
  margin-bottom: 20px;
}
/* style.css forces "h1,h2,h3.. { color: var(--pl-maroon-dark) !important }"
   sitewide (dark text, meant for light backgrounds) — this hero sits on
   a dark gradient, so it needs an equal-specificity !important override. */
.plo-hero-h1-2 {
  font-family: var(--pl-font-display) !important;
  font-weight: 500 !important;
  color: var(--pl-warm-white) !important;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  margin: 0 0 14px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.plo-hero-h1-2 em {
  font-style: italic;
  color: var(--pl-gold-light);
}
.plo-hero-gur-2 {
  font-family: var(--pl-font-punjabi);
  font-size: 14.5px;
  color: var(--pl-gold-pale);
  margin: 0 0 16px;
}
.plo-hero-desc-2 {
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  margin: 0 0 30px;
}
.plo-hero-ctas-2 {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.plo-btn-primary-2 {
  display: inline-block;
  background: linear-gradient(135deg, #E7A13D 0%, #C9772A 100%);
  color: #fff;
  padding: 14px 30px;
  border-radius: var(--pl-r, 6px);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform .15s;
}
.plo-btn-primary-2:hover { transform: translateY(-1px); color: #fff; }
.plo-btn-text-2 {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 3px;
}
.plo-btn-text-2:hover { border-color: #fff; color: #fff; }
.plo-hero-stats-2 {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.plo-hero-stat-2 strong {
  display: block;
  font-family: var(--pl-font-display);
  font-size: 19px;
  font-weight: 500;
  color: #fff;
}
.plo-hero-stat-2 span {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,0.68);
  margin-top: 3px;
}

.plo-hero-col-visual { position: relative; }
.plo-hero-frame-2 {
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.plo-hero-frame-2 img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
}
.plo-hero-frame-2-empty {
  height: 420px;
}
.plo-hero-floatcard-2 {
  position: absolute;
  left: -16px;
  bottom: -20px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  text-align: left;
}
.plo-hero-floatcard-2 strong {
  display: block;
  font-family: var(--pl-font-display) !important;
  font-weight: 600 !important;
  font-size: 20px;
  color: var(--pl-maroon-dark) !important;
}
.plo-hero-floatcard-2 span {
  display: block;
  font-size: 11.5px;
  color: var(--pl-taupe);
  margin-top: 2px;
  white-space: nowrap;
}
.plo-hero-corner-2 {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(20,10,10,0.5);
  color: #fff;
  font-family: var(--pl-font-punjabi);
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}
@media (max-width: 900px) {
  .plo-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .plo-hero-col-visual { order: -1; max-width: 360px; margin: 0 auto; }
  .plo-hero-desc-2 { max-width: 100%; }
  .plo-hero-frame-2 img, .plo-hero-frame-2-empty { height: 320px; }
}

.plo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--pl-r, 6px);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s;
}
.plo-btn:hover { transform: translateY(-1px); }
.plo-btn-gold {
  background: linear-gradient(135deg, #E7A13D 0%, #C9772A 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201,119,42,0.35);
}
.plo-btn-outline {
  background: transparent;
  color: var(--pl-warm-white);
  border-color: rgba(255,253,248,0.5);
}
.plo-btn-outline:hover { border-color: var(--pl-warm-white); }
.plo-ico { width: 17px; height: 17px; flex: none; }

/* ── SECTION HEADINGS ─────────────────────────────────── */
.plo-section { padding: 52px 0; }
.plo-section-alt { background: var(--pl-cream); }
.plo-section-tag {
  display: block;
  font-family: var(--pl-font-punjabi);
  font-size: 13px;
  color: var(--pl-taupe);
  margin-bottom: 8px;
}
.plo-section h2 {
  font-family: var(--pl-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--pl-maroon-dark);
  margin: 0 0 10px;
}
.plo-section-lead {
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pl-charcoal);
  opacity: .88;
}

/* ── STYLE TIPS ───────────────────────────────────────── */
.plo-tips-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.plo-tip {
  background: var(--pl-warm-white);
  border: 1px solid var(--pl-border);
  border-radius: 10px;
  padding: 22px;
}
.plo-tip-num {
  font-family: var(--pl-font-display);
  font-size: 26px;
  color: var(--pl-gold);
  line-height: 1;
  margin-bottom: 10px;
}
.plo-tip h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--pl-maroon-dark);
}
.plo-tip p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-charcoal);
  opacity: .85;
  margin: 0;
}

/* ── PRODUCT GRID ─────────────────────────────────────── */
.plo-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .plo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .plo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.plo-empty {
  margin-top: 24px;
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--pl-border);
  border-radius: 10px;
  color: var(--pl-taupe);
}
.plo-view-all {
  margin-top: 30px;
  text-align: center;
}

/* ── FAQ ──────────────────────────────────────────────── */
.plo-faq { max-width: 800px; margin-top: 24px; }
.plo-faq-item {
  border-bottom: 1px solid var(--pl-border);
  padding: 18px 0;
}
.plo-faq-item h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--pl-maroon-dark);
  margin: 0 0 8px;
}
.plo-faq-item p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--pl-charcoal);
  opacity: .88;
  margin: 0;
}

/* ── CROSS-LINK OTHER OCCASIONS ──────────────────────────── */
.plo-cross { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.plo-cross a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--pl-border);
  background: var(--pl-warm-white);
  color: var(--pl-maroon-dark);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.plo-cross a:hover { background: var(--pl-gold-pale); border-color: var(--pl-gold); }

/* ── FINAL CTA BANNER ─────────────────────────────────── */
.plo-final-cta {
  background: var(--pl-maroon-dark);
  color: var(--pl-warm-white);
  text-align: center;
  padding: 48px 24px;
}
.plo-final-cta h2 {
  font-family: var(--pl-font-display) !important;
  font-weight: 600 !important;
  color: var(--pl-warm-white) !important;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 10px;
}
.plo-final-cta p {
  color: rgba(255,253,248,0.85);
  margin: 0 0 22px;
  font-size: 15px;
}

/* ── THEMED HERO BANNERS ──────────────────────────────────
   One flat gradient colour per occasion, per the brand's own
   request. (Earlier version also tiled a low-opacity icon pattern
   behind each gradient — removed per follow-up request; kept the
   colour-per-occasion mapping.) ─────────────────────────────────── */

/* Anand Karaj — bold red. */
.plo-theme-anand-karaj.plo-hero {
  background-image: linear-gradient(135deg, #5C0A0A 0%, #A31A1A 55%, #C42B2B 100%);
}

/* Mehndi — henna green. */
.plo-theme-mehndi.plo-hero {
  background-image: linear-gradient(135deg, #3E4A16 0%, #5E7024 55%, #7C8F33 100%);
}

/* Karva Chauth — maroon. */
.plo-theme-karva-chauth.plo-hero {
  background-image: linear-gradient(135deg, var(--pl-maroon-dark) 0%, var(--pl-maroon) 100%);
}

/* Vaisakhi — mustard yellow. */
.plo-theme-vaisakhi.plo-hero {
  background-image: linear-gradient(135deg, #6E5310 0%, #9A7418 55%, #C79A28 100%);
}
.plo-theme-vaisakhi.plo-hero .plo-hero-badge { border-color: rgba(255,255,255,0.45); color: #fff; }

/* Lohri — burnt orange. */
.plo-theme-lohri.plo-hero {
  background-image: linear-gradient(135deg, #5E2007 0%, #93380F 55%, #C1560F 100%);
}

/* Wedding Guest — multi-colour (functions span sangeet lights to
   reception gold). */
.plo-theme-wedding-guest.plo-hero {
  background-image: linear-gradient(120deg, #6B1E2E 0%, #C9772A 34%, #2D6A4F 67%, #4A2A6B 100%);
}