/*
 * OIC Cards Styles (Style Library driven)
 *
 * Goals:
 * - Provide 2 ready card templates: Style 1 / Style 2
 * - Consume colors/borders/spacing from tokens (OIC Style Library), without external dependencies.
 * - Keep CSS minimal and safe (no JS).
 */

:root{
  /* Reasonable defaults (can be overridden by tokens or style layers) */
  --oic-card-radius: 16px;
  --oic-card-border: var(--oic-color-border, rgba(17,24,39,.12));
  --oic-card-bg: var(--oic-color-surface, #ffffff);
  --oic-card-text: var(--oic-color-text, #111827);
  --oic-card-muted: var(--oic-color-text-2, rgba(17,24,39,.72));
  --oic-card-shadow: 0 10px 24px rgba(24, 94, 224, 0.10);
}

/* Base */
.oic-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--oic-card-text);
  background: var(--oic-card-bg);
  border: 1px solid var(--oic-card-border);
  border-radius: var(--oic-card-radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.oic-card a{color: inherit; text-decoration: none;}
.oic-card a:hover{text-decoration: none;}
.oic-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--oic-card-shadow);
  border-color: color-mix(in srgb, var(--oic-card-border) 70%, var(--oic-color-primary) 30%);
}

.oic-card__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--oic-card-bg) 90%, var(--oic-card-text) 10%);
}
.oic-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oic-card__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

/*
 * Per-style mapping (driven by OIC Style Library → Base Cards)
 * NOTE: vars are generated from Style Library as CSS Variables.
 */
.oic-card--style1{
  --oic-card-radius: var(--oic-card-style1-radius, var(--oic-card-radius));
  --oic-card-shadow: var(--oic-card-style1-shadow, var(--oic-card-shadow));
  margin: var(--oic-card-style1-mar-top, 0px) var(--oic-card-style1-mar-right, 0px) var(--oic-card-style1-mar-bottom, 0px) var(--oic-card-style1-mar-left, 0px);
  border-width: var(--oic-card-style1-border-width, 1px);
}
.oic-card--style1 .oic-card__body{
  padding: var(--oic-card-style1-pad-top, 14px) var(--oic-card-style1-pad-right, 14px) var(--oic-card-style1-pad-bottom, 14px) var(--oic-card-style1-pad-left, 14px);
  gap: var(--oic-card-style1-gap, 10px);
}

.oic-card--style2{
  --oic-card-radius: var(--oic-card-style2-radius, var(--oic-card-radius));
  --oic-card-shadow: var(--oic-card-style2-shadow, var(--oic-card-shadow));
  margin: var(--oic-card-style2-mar-top, 0px) var(--oic-card-style2-mar-right, 0px) var(--oic-card-style2-mar-bottom, 0px) var(--oic-card-style2-mar-left, 0px);
  border-width: var(--oic-card-style2-border-width, 1px);
}
.oic-card--style2 .oic-card__body{
  padding: var(--oic-card-style2-pad-top, 14px) var(--oic-card-style2-pad-right, 14px) var(--oic-card-style2-pad-bottom, 14px) var(--oic-card-style2-pad-left, 14px);
  gap: var(--oic-card-style2-gap, 10px);
}

.oic-card__cat{display:flex; align-items:center; gap:8px;}
.oic-card__cat a{display:inline-flex;}

.oic-card__title{
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.oic-card__excerpt{
  color: var(--oic-card-muted);
  font-size: 14px;
  line-height: 1.6;
}

.oic-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  color: var(--oic-card-muted);
  font-size: 12px;
}

.oic-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}
.oic-card__tags a{display:inline-flex;}

.oic-card__more{
  margin-top: 4px;
}
.oic-card__more.oic-align-auto{text-align: start;}
.oic-card__more.oic-align-left{text-align:left;}
.oic-card__more.oic-align-center{text-align:center;}
.oic-card__more.oic-align-right{text-align:right;}

/* Sizes */
.oic-card--sm .oic-card__body{padding: 12px;}
.oic-card--sm .oic-card__title{font-size:16px;}
.oic-card--sm .oic-card__excerpt{font-size:13px;}

.oic-card--lg .oic-card__body{padding: 18px;}
.oic-card--lg .oic-card__title{font-size:20px;}

/* Style 1 (clean surface, subtle) */
.oic-card--style1{
  --oic-card-shadow: 0 10px 22px rgba(24, 94, 224, 0.10);
}

/* Style 2 (accented) */
.oic-card--style2{
  border-color: color-mix(in srgb, var(--oic-card-border) 60%, var(--oic-color-primary) 40%);
  background: color-mix(in srgb, var(--oic-card-bg) 94%, var(--oic-color-primary) 6%);
}
.oic-card--style2:hover{
  border-color: color-mix(in srgb, var(--oic-card-border) 45%, var(--oic-color-primary) 55%);
}

/* List layout helper: compact media */
.oic-list .oic-card{
  flex-direction: row;
}
.oic-list .oic-card__media{
  flex: 0 0 140px;
  aspect-ratio: 4 / 3;
}
.oic-list .oic-card__body{flex: 1 1 auto;}

@media (max-width: 680px){
  .oic-list .oic-card{flex-direction: column;}
  .oic-list .oic-card__media{flex: 0 0 auto; aspect-ratio: 16 / 9;}
}