/*
 * OIC Components Library - Card Display Helpers
 *
 * Scope:
 * - Works with imported HTML cards and the standard .oic-cardpack template classes.
 * - Used by Grid/Slider blocks via wrapper classes.
 *
 * FIX-P4
 * - Add a consistent Card Wrapper (.oic-cardwrap) for Grid/Slider so background/radius/
 *   border/shadow are always present when using Card Templates.
 * - Harden Meta Presets (Full / Compact / Text-only) for both built-in and imported cards.
 */

/* =========================
   Card Wrapper (FIX-P4)
   ========================= */

.oic-cardwrap{
  --oic-wrap-bg: var(--oic-color-surface, #ffffff);
  --oic-wrap-text: var(--oic-color-text, #111111);
  --oic-wrap-text-2: var(--oic-color-text-2, rgba(17,17,17,.72));
  --oic-wrap-accent: var(--oic-color-primary, #0b57d0);
  --oic-wrap-accent-2: var(--oic-color-secondary, #7c3aed);
  --oic-wrap-radius: var(--oic-radius-md, 14px);
  --oic-wrap-border: rgba(0,0,0,.06);
  --oic-wrap-shadow: 0 10px 30px rgba(0,0,0,.06);
  --oic-wrap-shadow-hover: var(--oic-wrap-shadow);

  background: var(--oic-wrap-bg);
  color: var(--oic-wrap-text);
  border: 1px solid var(--oic-wrap-border);
  border-radius: var(--oic-wrap-radius);
  overflow: hidden;
  height: 100%;
}

.oic-cardwrap:hover{ box-shadow: var(--oic-wrap-shadow-hover); }

.oic-cardwrap a{ color: var(--oic-wrap-accent); text-decoration: none; }
.oic-cardwrap a:hover{ color: var(--oic-wrap-accent-2); }

.oic-cardwrap > *{ max-width: 100%; }

/* Neutralize inner templates when they already provide their own wrappers.
   This keeps one consistent surface (the wrapper) when used inside Grid/Slider. */
.oic-cardwrap .oic-cardpack,
.oic-cardwrap .card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.oic-cardwrap .oic-cardpack:hover,
.oic-cardwrap .card:hover{ box-shadow: none !important; }


/* =========================
   Size Presets (FIX-P5)
   - A light-touch scale using wrapper variables
   - Used by Grid blocks (oic-size--small/medium/large)
   ========================= */

.oic-size--small .oic-cardwrap{
  --oic-wrap-radius: var(--oic-radius-sm, 10px);
  --oic-wrap-border: rgba(0,0,0,.05);
  --oic-wrap-shadow: 0 8px 22px rgba(0,0,0,.05);
}

.oic-size--medium .oic-cardwrap{
  --oic-wrap-radius: var(--oic-radius-md, 14px);
}

.oic-size--large .oic-cardwrap{
  --oic-wrap-radius: var(--oic-radius-lg, 20px);
  --oic-wrap-border: rgba(0,0,0,.07);
  --oic-wrap-shadow: 0 14px 40px rgba(0,0,0,.07);
}

/* =========================
   Card Style (3 variants)
   ========================= */

/* Bare: no background/border/shadow (clean look). */
.oic-card-style--bare .oic-cardwrap,
.oic-card-style--bare .oic-cardpack{
  --oic-wrap-bg: transparent;
  --oic-wrap-border: transparent;
  --oic-wrap-shadow: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.oic-card-style--bare .oic-cardwrap:hover,
.oic-card-style--bare .oic-cardpack:hover{
  box-shadow: none;
}

/* Dark: inverse surface + inverse text. */
.oic-card-style--dark .oic-cardwrap,
.oic-card-style--dark .oic-cardpack{
  --oic-wrap-bg: var(--oic-color-inverse-bg, #111111);
  --oic-wrap-text: var(--oic-color-inverse-text, #ffffff);
  --oic-wrap-text-2: rgba(255,255,255,.82);
  --oic-wrap-border: rgba(255,255,255,.08);
  --oic-wrap-shadow: 0 18px 40px rgba(0,0,0,.25);
  background: var(--oic-wrap-bg);
  border-color: var(--oic-wrap-border);
  color: var(--oic-wrap-text);
}
.oic-card-style--dark .oic-cardwrap a,
.oic-card-style--dark .oic-cardpack a{
  color: var(--oic-wrap-accent, var(--oic-color-primary, #0b57d0));
}
.oic-card-style--dark .oic-cardwrap a:hover,
.oic-card-style--dark .oic-cardpack a:hover{
  color: var(--oic-wrap-accent-2, var(--oic-color-secondary, #7c3aed));
}

.oic-card-style--dark .oic-cardwrap h1,
.oic-card-style--dark .oic-cardwrap h2,
.oic-card-style--dark .oic-cardwrap h3,
.oic-card-style--dark .oic-cardwrap h4,
.oic-card-style--dark .oic-cardwrap .oic-cardpack__title,
.oic-card-style--dark .oic-cardpack h1,
.oic-card-style--dark .oic-cardpack h2,
.oic-card-style--dark .oic-cardpack h3,
.oic-card-style--dark .oic-cardpack h4,
.oic-card-style--dark .oic-cardpack .oic-cardpack__title{
  color: var(--oic-wrap-text);
}

.oic-card-style--dark .oic-cardwrap .oic-cardpack__date,
.oic-card-style--dark .oic-cardwrap .oic-cardpack__excerpt,
.oic-card-style--dark .oic-cardpack .oic-cardpack__date,
.oic-card-style--dark .oic-cardpack .oic-cardpack__excerpt{
  color: var(--oic-wrap-text-2);
}

/* =========================
   Meta Presets
   - Apply as wrappers around cards
   ========================= */

/* Full (default): no changes. */

/* Compact: keep title + date + badge, hide excerpt/footer extras.
   Includes common class names to support imported HTML cards. */
.oic-meta--compact .oic-cardpack__excerpt,
.oic-meta--compact .oic-cardpack__footer,
.oic-meta--compact .excerpt,
.oic-meta--compact .entry-summary,
.oic-meta--compact .post-excerpt,
.oic-meta--compact .card-excerpt,
.oic-meta--compact .summary,
.oic-meta--compact .oic-excerpt,
.oic-meta--compact .read-more,
.oic-meta--compact .more,
.oic-meta--compact .card-footer,
.oic-meta--compact .footer{
  display: none !important;
}

/* Text-only: title + date only (no image/badge/excerpt/footer).
   This is intentionally strict for predictable behavior. */
.oic-meta--text .oic-cardpack__media,
.oic-meta--text .oic-cardpack__badge,
.oic-meta--text .oic-cardpack__excerpt,
.oic-meta--text .oic-cardpack__footer,
.oic-meta--text .media,
.oic-meta--text .thumb,
.oic-meta--text .thumbnail,
.oic-meta--text .image,
.oic-meta--text figure,
.oic-meta--text picture,
.oic-meta--text video,
.oic-meta--text img,
.oic-meta--text .badge,
.oic-meta--text .label,
.oic-meta--text .labels,
.oic-meta--text .category,
.oic-meta--text .categories,
.oic-meta--text .tag,
.oic-meta--text .tags,
.oic-meta--text .excerpt,
.oic-meta--text .entry-summary,
.oic-meta--text .post-excerpt,
.oic-meta--text .card-excerpt,
.oic-meta--text .summary,
.oic-meta--text .oic-excerpt,
.oic-meta--text .read-more,
.oic-meta--text .more,
.oic-meta--text .card-footer,
.oic-meta--text .footer{
  display: none !important;
}

/* Improve spacing for text-only mode (built-in cardpack). */
.oic-meta--text .oic-cardpack__content{
  padding-top: 14px;
}

/* Improve spacing for imported HTML cards (best-effort). */
.oic-meta--text .oic-cardwrap .content,
.oic-meta--text .oic-cardwrap .card-content,
.oic-meta--text .oic-cardwrap .body{
  padding-top: 14px;
}