/* ==========================================================================
 * modules/offers/css/plan_card.css
 * --------------------------------------------------------------------------
 * Owner: main-domain offers UI/UX redesign
 *   (plan: ~/.claude/plans/main_domain_offers_uiux_redesign.md)
 *
 * Scope: visual rules for the <plan-card> component rendered by
 *   offers_render_plan_card() in modules/offers/render.php. Used in later
 *   batches by both landing.php (plan strip under the hero) and offers.php
 *   (full plan strip), as well as the dev preview at _dev/plan_card_preview.php.
 *
 * Boundaries:
 *   - Reads tokens from assets/css/theme_a/tokens.css ONLY (no raw hex).
 *   - All spacing / inset / border properties are LOGICAL
 *     (margin-inline, padding-block, inset-inline-*) so RTL "just works".
 *   - No JS dependency. Card is fully static HTML.
 *   - Dark mode parity is automatic: every color resolves through tokens that
 *     swap themselves under prefers-color-scheme: dark or [data-theme="dark"].
 *
 * Status: Batch 1 — full component CSS (badge + name + price hero + 3-feature
 *   checklist + recurring strip + CTA + footer link). Plan-strip layout
 *   (3-up grid, mobile switcher) lands in Batch 2.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Root container
 * ------------------------------------------------------------------------ */

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--plan-card-gap);
  padding-block: var(--plan-card-pad-block);
  padding-inline: var(--plan-card-pad-inline);
  border: var(--plan-card-border-w) solid var(--plan-card-border);
  border-radius: var(--plan-card-radius);
  background: var(--plan-card-bg);
  box-shadow: var(--plan-card-shadow);
  isolation: isolate;
  contain: layout paint;
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.plan-card > * {
  margin: 0;
}

/* Featured variant — branded ring + soft glow background. */
.plan-card--featured {
  border-width: var(--plan-card-border-w-featured);
  border-color: var(--plan-card-border-featured);
  background: var(--plan-card-bg-featured);
  box-shadow: var(--plan-card-shadow-featured);
}

/* Lift the recommended card on desktop only. Avoids reflow vs. margin-block. */
@media (min-width: 1024px) {
  .plan-card--featured {
    transform: translateY(calc(var(--plan-card-lift-featured) * -1));
  }
}

/* Out-of-stock — desaturate without losing legibility. */
.plan-card--out-of-stock {
  opacity: 0.78;
  filter: saturate(0.6);
}

/* Compact mode (used by landing-page strip in Batch 6). */
.plan-card--compact {
  padding-block: var(--space-6);
  padding-inline: var(--space-5);
  gap: var(--space-3);
}

.plan-card--compact .plan-card__price-amount {
  font-size: clamp(2rem, 4.5vw + 0.5rem, 2.6rem);
}

/* --------------------------------------------------------------------------
 * Cover banner (offers.image_path) — bleeds to the card edges, follows the
 * card's top corner radius. Compact mode uses a tighter aspect ratio so the
 * landing strip stays scannable.
 * ------------------------------------------------------------------------ */

.plan-card__media {
  display: block;
  margin-block-start: calc(var(--plan-card-pad-block) * -1);
  margin-inline: calc(var(--plan-card-pad-inline) * -1);
  margin-block-end: var(--space-1);
  border-start-start-radius: calc(var(--plan-card-radius) - var(--plan-card-border-w));
  border-start-end-radius: calc(var(--plan-card-radius) - var(--plan-card-border-w));
  overflow: hidden;
  background: var(--surface-2, var(--surface, #f3f4f6));
  aspect-ratio: 16 / 9;
}

.plan-card__media-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.plan-card--compact .plan-card__media {
  margin-block-start: calc(var(--space-6) * -1);
  margin-inline: calc(var(--space-5) * -1);
  border-start-start-radius: calc(var(--plan-card-radius) - var(--plan-card-border-w));
  border-start-end-radius: calc(var(--plan-card-radius) - var(--plan-card-border-w));
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
 * Header (badges + name + tagline)
 * ------------------------------------------------------------------------ */

.plan-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-1);
}

.plan-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: var(--plan-badge-h);
  padding-inline: var(--plan-badge-pad-x);
  border-radius: var(--plan-badge-radius);
  font-size: var(--plan-badge-font-size);
  font-weight: var(--plan-badge-font-weight);
  letter-spacing: var(--plan-badge-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: var(--plan-badge-tier-bg);
  color: var(--plan-badge-tier-text);
}

.plan-card__badge--featured {
  background: var(--plan-badge-featured-bg);
  color: var(--plan-badge-featured-text);
}

.plan-card__badge--out-of-stock {
  background: var(--status-archived-bg);
  color: var(--status-archived);
}

.plan-card__badge-icon {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}

.plan-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
}

.plan-card__tagline {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
 * Price hero
 * ------------------------------------------------------------------------ */

.plan-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: var(--space-2);
}

.plan-card__price-amount {
  font-size: var(--price-display);
  font-weight: var(--price-display-weight);
  line-height: var(--price-display-line);
  letter-spacing: var(--price-display-letter);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.plan-card__price-period {
  font-size: var(--price-period-size);
  font-weight: var(--price-period-weight);
  line-height: 1.4;
  color: var(--price-period-color);
}

/* --------------------------------------------------------------------------
 * Feature checklist (max 3 items)
 * ------------------------------------------------------------------------ */

.plan-card__features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--plan-feature-row-gap);
}

.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: var(--plan-feature-line);
  color: var(--text);
}

.plan-card__feature-icon {
  flex: none;
  inline-size: var(--plan-feature-icon-size);
  block-size: var(--plan-feature-icon-size);
  margin-block-start: 2px;
  color: var(--plan-feature-icon-color);
}

.plan-card__feature-text {
  min-inline-size: 0;
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
 * Recurring strip ("Danach: 29 € / Monat")
 * ------------------------------------------------------------------------ */

.plan-card__recurring {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--plan-recurring-pad);
  background: var(--plan-recurring-bg);
  border: 1px solid var(--plan-recurring-border);
  border-radius: var(--plan-recurring-radius);
}

.plan-card__recurring-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-card__recurring-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.plan-card__recurring-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
 * Footer — primary CTA + "Alle Details" link
 * ------------------------------------------------------------------------ */

.plan-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: auto; /* pin to bottom when card height is forced */
}

.plan-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: var(--plan-cta-h);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--plan-cta-radius);
  background: var(--plan-cta-bg);
  color: var(--plan-cta-text);
  font-size: 1rem;
  font-weight: var(--plan-cta-font-weight);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.plan-card__cta:hover {
  background: var(--plan-cta-bg-hover);
}

.plan-card__cta:active {
  transform: translateY(1px);
}

.plan-card__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.plan-card__cta--disabled,
.plan-card__cta[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.plan-card__details-link {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 4px;
  padding-block: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  /* Orange-on-white text needs WCAG AA contrast (4.5:1) — use the darker derivative. */
  color: var(--primary-on-light);
  text-decoration: none;
  border-radius: 4px;
  background: transparent;
}

.plan-card__details-link:hover,
.plan-card__details-link:focus-visible {
  text-decoration: underline;
}

.plan-card__details-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.plan-card__details-arrow {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-standard);
}

/* RTL — flip the chevron so it still points "forward" in reading direction. */
[dir="rtl"] .plan-card__details-arrow {
  transform: scaleX(-1);
}

.plan-card__details-link:hover .plan-card__details-arrow {
  transform: translateX(2px);
}

[dir="rtl"] .plan-card__details-link:hover .plan-card__details-arrow {
  transform: scaleX(-1) translateX(2px);
}

/* --------------------------------------------------------------------------
 * Print + reduced motion
 *   prefers-reduced-motion is already neutralised globally in tokens.css.
 * ------------------------------------------------------------------------ */

@media print {
  .plan-card {
    box-shadow: none;
    break-inside: avoid;
    transform: none !important;
  }
  .plan-card__cta,
  .plan-card__details-link {
    display: none;
  }
}

/* High-contrast (forced colors) — keep semantic structure visible. */
@media (forced-colors: active) {
  .plan-card,
  .plan-card--featured {
    border-color: CanvasText;
    background: Canvas;
  }
  .plan-card__cta {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .plan-card__feature-icon {
    color: CanvasText;
  }
}

/* ==========================================================================
 * Plan strip — Batch 2
 *
 * Three-column comparison strip on desktop / tablet, single-card switcher on
 * mobile. The strip reuses the .plan-card component above; layout and the
 * mobile chip switcher are isolated to this section so the card itself
 * stays usable in other surfaces (drawer, dev preview, future emails, ...).
 *
 * Layout breakpoints (per plan §5/Batch 2):
 *   ≥1024px   3 columns, recommended card lifted (handled by .plan-card--featured).
 *   768–1023  3 columns, card padding + price scale tightened.
 *   <768px    1 column; mobile chip switcher visible; only the active cell is
 *             displayed. Active state defaults to the featured cell.
 * ========================================================================== */

.plan-strip {
  display: block;
  isolation: isolate;
  /* Breathing room above the strip so it doesn't crowd the section
     heading + intro line directly above (offers.php and landing.php). */
  margin-block-start: var(--space-6, 32px);
  /* Sticky public header is 82px tall (.site-header). Land the strip a bit
     below that when scrolled to via fragment links (e.g. landing-hero CTA). */
  scroll-margin-block-start: calc(82px + var(--space-4, 16px));
}

/* Native smooth scroll for fragment links (hero "Pakete ansehen" → strip).
   The reduced-motion media inside theme_a/tokens.css already overrides this
   with `scroll-behavior: auto !important;` so accessibility is preserved. */
html:has(.plan-strip) {
  scroll-behavior: smooth;
}

.plan-strip__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--plan-strip-gap, var(--space-5));
  grid-template-columns: 1fr;
  align-items: stretch;
}

.plan-strip__cell {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.plan-strip__cell > .plan-card {
  flex: 1 1 auto;
  block-size: 100%;
}

/* --------------------------------------------------------------------------
 * Mobile switcher (≤767.98px only)
 * ------------------------------------------------------------------------ */

.plan-strip__switcher {
  display: none; /* default: hidden; mobile MQ flips this to flex below. */
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.plan-strip__switcher-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
}

.plan-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.plan-strip__chip {
  flex: 1 1 0;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px; /* touch target */
  padding-block: 8px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.plan-strip__chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.plan-strip__chip[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--text-strong);
}

.plan-strip__chip--featured {
  border-color: var(--primary);
  /* Orange-on-white text needs WCAG AA contrast (4.5:1) — use the darker derivative.
     Border keeps the brand orange because borders aren't subject to text contrast. */
  color: var(--primary-on-light);
}

.plan-strip__chip--featured[aria-pressed="true"] {
  /* Active state: white text on orange background — switch to --primary-strong (5.7:1). */
  background: var(--primary-strong);
  color: var(--primary-contrast);
  border-color: var(--primary-strong);
}

.plan-strip__chip-icon {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}

/* --------------------------------------------------------------------------
 * Tablet — 768 ≤ w < 1024 — 3 cards in one row, slightly compressed
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) {
  .plan-strip__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Center the row when fewer than 3 offers are returned (e.g. testing). */
  .plan-strip__cards:has(> :only-child) {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .plan-strip__cards {
    gap: var(--space-3);
  }
  .plan-strip .plan-card {
    padding-block: var(--space-5);
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }
  .plan-strip .plan-card__price-amount {
    font-size: clamp(1.9rem, 4vw + 0.4rem, 2.4rem);
  }
  .plan-strip .plan-card__tagline {
    font-size: 0.88rem;
  }
  .plan-strip .plan-card__feature {
    font-size: 0.88rem;
  }
}

/* --------------------------------------------------------------------------
 * Mobile — w < 768 — chip switcher + single visible cell
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {
  .plan-strip__switcher {
    display: flex;
  }
  .plan-strip__cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .plan-strip__cell {
    display: none;
  }
  .plan-strip__cell[data-plan-active="true"] {
    display: flex;
  }
  .plan-strip .plan-card {
    /* Full-bleed feel on tiny screens — keep hairline border visible. */
    border-radius: var(--plan-card-radius);
  }
  /* On mobile the lift would push the card off-screen on first paint;
     undo it so the active cell sits flush with the chip group. */
  .plan-strip .plan-card--featured {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * Out-of-stock + reduced motion fall-throughs
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .plan-strip__chip,
  .plan-strip__cell {
    transition: none;
  }
}

@media print {
  .plan-strip__switcher {
    display: none !important;
  }
  .plan-strip__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .plan-strip__cell {
    display: flex !important;
  }
}