/* public/page-studio-assets/runtimes/content-card.css */

@layer ps-components {

  /* ── Overlay opacity bridge ──────────────────────────────────────────── */
  /*
   * cssParts writes --ps-card-img-overlay-opacity-raw (0–100 integer).
   * The bridge converts it to 0–1 for use in opacity.
   * Applied on .ps-card-media-inner so it's available to .ps-card-overlay.
   */
  .ps-card-media-inner {
    --ps-card-img-overlay-opacity: calc(var(--ps-card-img-overlay-opacity-raw, 0) / 100);
  }

  /* ── Hover image transform bridge ────────────────────────────────────── */
  /*
   * CardRenderer writes --ps-card-img-hover-transform resolved from
   * the hoverScale enum. The cssStatic rule on .ps-card:hover .ps-card-img
   * uses this var. Default is scale(1.04).
   */
  .ps-card--minimal .ps-card-img { transform: none !important; }
  .ps-card--minimal:hover .ps-card-img { transform: none !important; }

  /* ── Responsive: collapse grid to 1 column on mobile ─────────────────── */
  @media (max-width: 480px) {
    .ps-card-group {
      grid-template-columns: 1fr !important;
    }
  }

  /* ── Responsive: tablet — 2 columns max when 3+ set ─────────────────── */
  @media (max-width: 768px) {
    .ps-card-group:not(.ps-card-group--list):not(.ps-card-group--horizontal) {
      grid-template-columns: repeat(
        min(var(--ps-card-cols, 3), 2),
        1fr
      );
    }
  }

  /* ── Landscape: stack on mobile ──────────────────────────────────────── */
  @media (max-width: 640px) {
    .ps-card-group--horizontal .ps-card,
    .ps-card--landscape {
      flex-direction: column !important;
    }
    .ps-card-group--horizontal .ps-card .ps-card-media,
    .ps-card--landscape .ps-card-media {
      width: 100% !important;
      min-height: 0 !important;
    }
    .ps-card-group--horizontal .ps-card .ps-card-media-inner,
    .ps-card--landscape .ps-card-media-inner {
      aspect-ratio: 16/9 !important;
      height: auto !important;
    }
    .ps-card-group--horizontal .ps-card .ps-card-icon-media,
    .ps-card--landscape .ps-card-icon-media {
      width: 100% !important;
      min-height: 80px !important;
    }
  }

  /* ── Pricing: featured card scale ───────────────────────────────────── */
  /* The renderer writes --ps-card-featured-scale on the card element.
   * Scale is applied via cssStatic on .ps-card--featured.
   * We add a z-index so it lifts visually above neighbors. */
  .ps-card--featured {
    z-index: 1;
    position: relative;
  }

  /* ── Pricing: features list divider ─────────────────────────────────── */
  /* The divider-style var controls border-style on the separator rule. */
  .ps-card--pricing .ps-card-feature + .ps-card-feature {
    border-top-style: var(--ps-card-feature-divider-style, solid);
    border-top-width: 1px;
    border-top-color: var(--ps-card-feature-divider-color, rgba(0,0,0,0.06));
  }

  /* ── Minimal: no transform on hover ─────────────────────────────────── */
  .ps-card--minimal:hover {
    transform: translateY(var(--ps-card-hover-lift, 0px));
  }

  /* ── Equal-height cards ──────────────────────────────────────────────── */
  /* When content.equalHeight is true, cssParts writes
   * --ps-card-equal-h on the group element.
   * We detect it via the presence of the var in a known slot. */

  /* ── Button full-width variant ───────────────────────────────────────── */
  /*
   * When btnStyle.width === 'full', cssParts writes
   * --ps-card-btn-width: full on data-tree-sub="btn".
   * We convert 'full' to 100% here since CSS var can't hold 'full' as keyword.
   * Note: --ps-card-btn-width is either 'auto' or 'full' (string values from enum).
   * We use a workaround: the cssStatic sets width: var(--ps-card-btn-width, auto).
   * For the enum approach to work, each card type's cssStatic must set:
   *   & .ps-card-btn { width: var(--ps-card-btn-width, auto); }
   * The renderer should instead write width: 100% when full, or auto otherwise.
   * Since we use CSS vars, we handle this with a dedicated full-width class:
   */
  .ps-card-btn--full {
    width: 100% !important;
  }

  /* ── Hero gradient fallback ──────────────────────────────────────────── */
  /* Ensure gradient element covers the card even if no vars set */
  .ps-card--hero .ps-card-gradient,
  .ps-card--overlay .ps-card-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* ── Overlay content above gradient ─────────────────────────────────── */
  .ps-card--overlay .ps-card-body,
  .ps-card--hero .ps-card-body {
    position: relative;
    z-index: 2;
  }

  /* ── Landscape equal-stretch body ───────────────────────────────────── */
  .ps-card--landscape .ps-card-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ── Icon media: icon type cards ─────────────────────────────────────── */
  .ps-card-icon-media i.material-icons-round,
  .ps-card-icon-media i.material-icons {
    font-size: inherit;
    line-height: 1;
    color: inherit;
  }

  /* ── Btn icon: material icons support ───────────────────────────────── */
  .ps-card-btn-icon i.material-icons-round,
  .ps-card-btn-icon i.material-icons {
    font-size: var(--ps-card-btn-icon-size, 1.1em);
    line-height: 1;
    color: var(--ps-card-btn-icon-color, currentColor);
  }

  /* ── Card body gap above footer ─────────────────────────────────────── */
  /* When card has no text/body shown, footer still needs spacing from title */
  .ps-card-title + .ps-card-footer {
    padding-top: 1rem;
  }

  /* ── Minimal: list mode divider ─────────────────────────────────────── */
  .ps-card--minimal .ps-card-group--list .ps-card + .ps-card {
    border-top: 1px solid var(--ps-card-divider-color, rgba(0,0,0,0.08));
  }

  /* ── Portrait: image badge absolute wrap uses this z-index ──────────── */
  .ps-card-badge-wrap[style] {
    /* Inline positioned badge wraps in image zone — z-index already set inline */
  }
}