/* ==========================================================================
   CrysMed — Homepage Showcase (Offers / Specialists / Products)
   Rebuilt to match the client-approved "Offers, Drs, Products" reference —
   see new-designs/Offers  Drs Prducts - Final.png. Replaces the former
   "Hot deals near you" section (index.html #deals). Reuses sitewide tokens,
   .section__head/.eyebrow/.tab-row/.tag-selfpay/.btn from main.css.
   ========================================================================== */

.showcase-panel { margin-bottom: var(--sp-8); }
.showcase-panel:last-child { margin-bottom: 0; }
.showcase-panel:not(:last-child) { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }

/* Pill-style category tabs (visual variant of the shared .tab-row/.tab-item) */
.showcase-tabs {
  border-bottom: none;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.showcase-tabs .tab-item {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  padding: .5rem var(--sp-4);
  margin-bottom: 0;
}
.showcase-tabs .tab-item.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--white);
}

.showcase-layout {
  display: flex;
  gap: var(--sp-5);
  align-items: stretch;
}

/* Offers panel: left column (title/desc/tabs/featured card, stacked as one
   flex item) fixed at 48% of the section width, 2% gap, right column (offer
   cards) at 50% — both columns top-aligned/stretched to the same height, per
   the client's exact math + flow spec (new-designs/homepage-layout-reference.jpg).
   The cards column stretches to match the left column's full stacked height
   (title+desc+tabs+featured card), not just the featured card alone. */
.showcase-layout--split, .showcase-layout--split-sm { gap: 1%; }
.showcase-layout--split .showcase-left-col { flex: 0 0 48%; display: flex; flex-direction: column; }
.showcase-layout--split .showcase-cards { flex: 0 0 50%; }
.showcase-left-col .feature-card { flex: 0 0 auto; width: 100%; min-height: 0; }
/* Specialist card fills the remaining left-col height (unlike the Offers
   card, which stays at natural content height) so it matches the stretched
   Doctors mini-card height instead of leaving dead space below it. */
.showcase-left-col .feature-card--specialist { flex: 1; }

/* Products panel: left column narrower (~one product card's width) so the
   promo tile reads as a compact banner, not a wide hero — per the client's
   correction to the shared split pattern (new-designs reference: promo tile
   is noticeably narrower than the Offers/Specialists featured cards). */
.showcase-layout--split-sm .showcase-left-col { flex: 0 0 32%; display: flex; flex-direction: column; }
.showcase-layout--split-sm .showcase-cards { flex: 0 0 66%; }
.showcase-left-col .promo-tile { flex: 1; width: 100%; min-height: 220px; }
.showcase-left-col .promo-tile__body { padding: var(--sp-4); gap: 4px; }
.showcase-left-col .promo-tile__body h3 { font-size: var(--fs-md); }
.showcase-left-col .promo-tile__body p { font-size: .6875rem; }

/* Title/subtitle use the same size as the Specialists panel's (unmodified
   .section__title/.section__sub) — only spacing below them stays compact. */
.showcase-left-col .section__head { margin-bottom: var(--sp-2); }
.showcase-left-col .showcase-tabs { margin-bottom: var(--sp-2); gap: var(--sp-2); }
.showcase-left-col .showcase-tabs .tab-item { padding: .375rem var(--sp-3); font-size: .6875rem; }

/* Shrink the featured card to the same size scale as the marketplace product
   card (backup #marketplace-preview .deal-card: var(--sp-4) body padding,
   fs-sm/fs-md font scale) so the panel height comes down — shared by every
   panel using the .showcase-left-col split layout (Offers, Specialists). */
.showcase-left-col .feature-card__body { padding: var(--sp-4); gap: 3px; }
.showcase-left-col .feature-card__tag { padding: 3px 9px; font-size: .625rem; margin-bottom: 2px; }
.showcase-left-col .feature-card__title { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.showcase-left-col .feature-card__meta { font-size: .6875rem; }
.feature-card--offer .feature-card__body { max-width: 260px; }
.feature-card--offer .feature-card__price { margin: var(--sp-1) 0 var(--sp-2); }
.feature-card--specialist .feature-card__body { max-width: 340px; }
.feature-card--specialist .feature-card__rating { font-size: .6875rem; margin-top: 0; }
.feature-card--specialist .feature-card__infobox { padding: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0; }
.feature-card--specialist .feature-card__infobox span { font-size: .625rem; }
.feature-card--specialist .feature-card__infobox b { font-size: .75rem; }
/* "Book appointment" on this one hero card only (not the mini doctor cards below, which stay
   orange) follows the same gold used on the Featured Offer badge — client, 2026-09-04. */
.feature-card--specialist .btn-cta { background: var(--ref-gold-500); color: var(--brand-900); }
.feature-card--specialist .btn-cta:hover { background: #e6a000; }
.showcase-left-col .feature-card__price .now { font-size: var(--fs-md); }

/* ---- Featured card (offer / specialist variants share this shell) ---- */
.feature-card {
  position: relative;
  flex: 0 0 400px;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
}
.feature-card__media { position: absolute; inset: 0; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--accent-700) 0%, var(--accent-700) 46%, rgba(30, 136, 184, .55) 66%, rgba(30, 136, 184, 0) 88%);
}
.feature-card__body {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  max-width: 300px;
  color: var(--white);
}
.feature-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--white);
  color: var(--brand-900);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.feature-card__tag svg { width: 12px; height: 12px; }
.feature-card__badge-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--premium-500);
  color: var(--brand-900);
  margin-right: 6px;
}
.feature-card__badge-dot svg { width: 12px; height: 12px; }
.feature-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2);
}
.feature-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  opacity: .95;
}
.feature-card__meta + .feature-card__meta { margin-top: 2px; }
.feature-card__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.feature-card__rating { font-size: .8125rem; opacity: .95; margin-top: 2px; }
.feature-card__rating b { color: var(--premium-500); }
.feature-card__price { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-3); }
.feature-card__price .now { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.feature-card__price s { color: rgba(255, 255, 255, .65); font-size: .8125rem; font-weight: var(--fw-medium); }
.feature-card__price .tag-selfpay { background: transparent; border: 1px solid rgba(255, 255, 255, .55); }

/* Title-row (title + %-off badge side by side, matching the mini cards' title-row pattern)
   and the off badge itself — shared shape across every hero card that uses them; each card
   variant below sets only its own accent color via currentColor. */
.feature-card__title-row { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.feature-card__title-row .feature-card__title { flex: 1; min-width: 0; margin: 0; }
.feature-card__off {
  flex: 0 0 auto;
  margin-top: 4px;
  background: transparent;
  border: 1px solid currentColor;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* Featured offer card (the one big hero card only — not the mini offer cards below, which
   keep their own white-bg/red-outline discount style): client asked (2026-09-04) for the
   FEATURED OFFER badge and price to use a gold accent instead of white, since an all-white
   badge/text treatment washed out against bright photo areas and gave the card no "screen
   presence". Discount %/strikethrough price are placeholder round numbers — this card is
   static demo content, not wired to a real offer, client said any reasonable numbers are fine. */
.feature-card--offer .feature-card__tag { background: var(--ref-gold-500); color: var(--brand-900); }
.feature-card--offer .feature-card__price .now { color: var(--ref-gold-500); }
.feature-card--offer .feature-card__off { color: var(--ref-gold-500); }

/* Featured product card (products panel) — same hero pattern as the offer card above. Client,
   2026-09-04: feature one real-feeling product (name/price/rating/delivery) instead of only
   generic marketing copy; numbers mirror the "Digital Blood Pressure Monitor" mini card below
   since this tile is static demo content too. Off badge and "Explore marketplace" button use
   the same gold as the Featured Offer card (corrected same day, 2026-09-04) — the mini product
   cards below keep their own orange off-badge/Add-to-cart styling, unaffected. */
.promo-tile__body .feature-card__off { color: var(--ref-gold-500); }
.promo-tile__body .feature-card__price .now { color: var(--ref-gold-500); }
.promo-tile__body .btn-cta { background: var(--ref-gold-500); color: var(--brand-900); }
.promo-tile__body .btn-cta:hover { background: #e6a000; }
.feature-card__infobox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
}
.feature-card__infobox svg { width: 16px; height: 16px; flex-shrink: 0; }
.feature-card__infobox span { display: block; font-size: .6875rem; opacity: .9; }
.feature-card__infobox b { display: block; font-size: .8125rem; font-weight: var(--fw-bold); }
.feature-card .btn-white { align-self: flex-start; background: var(--white); color: var(--brand-900); }
.feature-card .btn-white:hover { background: var(--surface); }
.feature-card .btn-cta { align-self: flex-start; }

/* Specialist card: Earliest-appointment box and Book appointment button sit
   inline in one row instead of stacked (per user correction, 2026-08-24). */
.feature-card__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.feature-card__actions .feature-card__infobox { margin: 0; flex: 1; min-width: 0; }
.feature-card__actions .btn-cta { align-self: center; flex: 0 0 auto; }

/* ---- Promo tile (products panel) ---- */
.promo-tile {
  position: relative;
  flex: 0 0 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
}
.promo-tile__media { position: absolute; inset: 0; }
.promo-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--accent-700) 0%, var(--accent-700) 58%, rgba(30, 136, 184, .6) 78%, rgba(30, 136, 184, .25) 100%);
}
.promo-tile__body {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--white);
}
.promo-tile__body h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; }
.promo-tile__body p { font-size: .8125rem; line-height: var(--lh-relaxed); opacity: .95; margin: 0; }
.promo-tile__body .btn { align-self: flex-start; margin-top: var(--sp-1); }

/* ---- Card rows ---- */
.showcase-cards {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--sp-3);
}
.showcase-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.showcase-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mini-offer-card__title, .mini-doc-card__name, .product-card__title { margin: 0; }

.mini-offer-card, .mini-doc-card, .product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.mini-offer-card:hover, .mini-doc-card:hover, .product-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}

/* Offer mini-cards */
.mini-offer-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface); }
.mini-offer-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-offer-card__cat {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: var(--brand-tint-strong);
  color: var(--brand-900);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-sm);
}
.mini-offer-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
.mini-offer-card .btn-block { margin-top: 0; }
.mini-offer-card .btn-outline-brand { color: var(--accent-700); border-color: var(--accent-700); }
.mini-offer-card .btn-outline-brand:hover { background: var(--accent-tint); border-color: var(--accent-700); }

.mini-offer-card__title-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.mini-offer-card__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-offer-card__off {
  flex: 0 0 auto;
  margin-top: 1px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

.mini-offer-card__info { display: flex; flex-direction: column; gap: 2px; }
.mini-offer-card__meta, .mini-offer-card__avail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-offer-card__meta { font-size: .6875rem; color: var(--ink-500); }
.mini-offer-card__avail { font-size: .6875rem; color: var(--brand-700); font-weight: var(--fw-medium); }
/* Card itself stays exactly the client-approved size — a real offer's price can run longer than
   the reference's own round demo numbers (e.g. "AED 523.95" vs. "AED 349") once VAT is added, so
   this row shrinks its own text just enough to always fit on one line instead of clipping the
   Self-pay tag. Fixed 2026-09-02, project lead's own call: dimensions untouchable, price text is
   what flexes. */
.mini-offer-card__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mini-offer-card__price .now { font-size: .75rem; font-weight: var(--fw-bold); color: var(--ink-900); flex-shrink: 0; }
.mini-offer-card__price s {
  font-size: .625rem; color: var(--ink-300);
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mini-offer-card__price .tag-selfpay {
  background: var(--white);
  color: var(--accent-700);
  border: 1px solid var(--accent-700);
  font-size: .5rem;
  padding: 1px 4px;
  flex-shrink: 0;
}

/* Doctor mini-cards */
.mini-doc-card__media { aspect-ratio: 1 / 1; background: var(--surface); }
.mini-doc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-doc-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
.mini-doc-card__spec, .mini-doc-card__rating {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-doc-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-doc-card__spec { font-size: .75rem; color: var(--ink-500); }
.mini-doc-card__rating {
    font-size: .55rem;
    color: var(--ink-700);
}
.mini-doc-card__rating b { color: #e5a223; }
.mini-doc-card__earliest { font-size: .6875rem; color: var(--ink-500); }
.mini-doc-card__earliest b { display: block; color: var(--accent-700); font-weight: var(--fw-bold); font-size: .8125rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-doc-card .btn-block { margin-top: 0; }
/* Matches the "Explore offer" button theme from the offers section above — solid orange CTA
   instead of the teal outline (client, 2026-09-04; corrected from an earlier gold attempt). */
.mini-doc-card .btn-outline-brand { background: var(--cta-orange, var(--danger)); color: var(--white); border-color: var(--cta-orange, var(--danger)); }
.mini-doc-card .btn-outline-brand:hover { background: var(--cta-orange-hover, #c94f08); border-color: var(--cta-orange-hover, #c94f08); }

/* Product mini-cards */
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  color: var(--brand-900);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--brand-tint-strong);
}
.product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
/* Badge stacks above the title (not beside it) — at this card's width
   (~144px) a side-by-side badge leaves too little room for the title to
   fit its full text within 3 lines, per the client's requirement that the
   name never truncate. */
.product-card__title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.product-card__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Discount tag — same treatment as .mini-offer-card__off in "Offers made
   for your wellbeing", reused here so both showcase panels share one
   visual language for percentage-off badges. */
.product-card__off {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.product-card__rating {
  font-size: .6875rem;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__rating b { color: #e5a223; }
/* Delivery info — same label/value treatment as .mini-doc-card__earliest
   in "Meet trusted specialists" (small label, bold value below). */
.product-card__delivery { font-size: .6875rem; color: var(--ink-500); }
.product-card__delivery b {
  display: block;
  color: var(--accent-700);
  font-weight: var(--fw-bold);
  font-size: .8125rem;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__price { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.product-card__price .now { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); }
.product-card__price s { font-size: .75rem; color: var(--ink-300); }
.product-card .btn-cta {
  width: 100%;
  padding: .25rem var(--sp-3);
  gap: var(--sp-1);
  margin-top: 6px;
}

/* Shared button variants used across the showcase panels */
.btn-outline-brand { background: var(--white); color: var(--brand-900); border-color: var(--line-strong); }
.btn-outline-brand:hover { border-color: var(--brand-700); }
.btn-cta { background: var(--cta-orange, var(--danger)); color: var(--white); }
.btn-cta:hover { background: var(--cta-orange-hover, #c94f08); }

@media (max-width: 1180px) {
  .showcase-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .showcase-layout { flex-direction: column; }
  .feature-card, .promo-tile { flex-basis: auto; min-height: 280px; }
  .showcase-layout--split .showcase-left-col, .showcase-layout--split .showcase-cards,
  .showcase-layout--split-sm .showcase-left-col, .showcase-layout--split-sm .showcase-cards { flex-basis: auto; }
}

/* Phone widths: featured card stacks full-width above a horizontal swipe
   carousel of cards — same pattern as .deal-grid's mobile treatment. */
@media (max-width: 640px) {
  .showcase-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .showcase-cards::-webkit-scrollbar { display: none; }
  .showcase-cards > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .feature-card, .promo-tile { min-height: 260px; }
  .feature-card__body, .promo-tile__body { max-width: none; padding: var(--sp-5) var(--sp-4); }
}