/* Card + — i2t3 component styles
 * Richer card (vs. the Bootstrap "card"): adds extras — shadow
 * intensity, corner radius, hover effects, a coloured edge accent bar and a
 * separate border/accent colour. All card content is rendered through the
 * shared Components/I2t3Card partial, so these styles only decorate the
 * resulting .card. The flip variant is the separate "Flip card".
 *
 * Accent colour comes from --i2t3-cardplus-accent (set on the wrapper from the
 * i2t3_cardplus_bordercolor field).
 */

/* Shadow intensity
 * NB: shadow must NOT touch border-color — otherwise an enabled full border
 * (i2t3_border) would always be painted over. The shadow is purely additive. */
.i2t3-card-plus--shadow-none .card { box-shadow: none; }
.i2t3-card-plus--shadow-sm .card { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.i2t3-card-plus--shadow-md .card { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.i2t3-card-plus--shadow-lg .card { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); }

/* Corner radius */
.i2t3-card-plus--radius-none .card { border-radius: 0; }
.i2t3-card-plus--radius-rounded .card { border-radius: 1rem; overflow: hidden; }
.i2t3-card-plus--radius-large .card { border-radius: 1.75rem; overflow: hidden; }

/* Separate border / accent colour (Karma cardbordercolor)
 * Only applies when the full border is enabled (i2t3_border) AND a non-default
 * border colour is chosen — the wrapper then carries .i2t3-card-plus--border-on.
 * This decouples the border colour from the card fill colour (i2t3_color). */
.i2t3-card-plus--border-on .card { border-width: 1px; border-style: solid; border-color: var(--i2t3-cardplus-accent, #0d6efd) !important; }

/* Edge accent bar (Karma boderstyle top/bottom)
 * A coloured 5px bar at the top or bottom edge, independent of any full
 * border. Faithfully ports .card-border / .card-border-top / -bottom. */
.i2t3-card-plus--borderstyle-top .card,
.i2t3-card-plus--borderstyle-bottom .card { position: relative; overflow: hidden; }
.i2t3-card-plus--borderstyle-top .card::after,
.i2t3-card-plus--borderstyle-bottom .card::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 5px;
  background-color: var(--i2t3-cardplus-accent, #0d6efd);
  transition: .2s all ease;
  z-index: 1;
}
.i2t3-card-plus--borderstyle-top .card::after { top: 0; }
.i2t3-card-plus--borderstyle-bottom .card::after { bottom: 0; }

/* Hover lift */
.i2t3-card-plus--hover-lift .card { transition: transform .2s ease, box-shadow .2s ease; }
.i2t3-card-plus--hover-lift .card:hover { transform: translateY(-.35rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .18); }

/* Hover grow — scale the whole card */
.i2t3-card-plus--hover-grow .card { transition: transform .25s ease, box-shadow .25s ease; }
.i2t3-card-plus--hover-grow .card:hover { transform: scale(1.03); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); }

/* Hover zoom — zoom the card image, card itself stays put */
.i2t3-card-plus--hover-zoom .card { overflow: hidden; }
.i2t3-card-plus--hover-zoom .card img { transition: transform .4s ease; }
.i2t3-card-plus--hover-zoom .card:hover img { transform: scale(1.08); }

/* Hover glow — accent-coloured glow */
.i2t3-card-plus--hover-glow .card { transition: box-shadow .25s ease; }
.i2t3-card-plus--hover-glow .card:hover { box-shadow: 0 0 0 .2rem rgba(var(--i2t3-cardplus-accent-rgb, 13,110,253), .35), 0 .75rem 1.75rem rgba(0, 0, 0, .15); }

/* Hover colour (Karma shadowstyle=hovercolor)
 * On hover the whole card fills with the accent colour and all text turns
 * light — ports bg-color-hover-{color} + card-text-color-hover-light. */
.i2t3-card-plus--hover-color .card {
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.i2t3-card-plus--hover-color .card:hover {
  background-color: var(--i2t3-cardplus-accent, #0d6efd) !important;
  box-shadow: 0 .75rem 1.75rem rgba(var(--i2t3-cardplus-accent-rgb, 13,110,253), .35);
}
.i2t3-card-plus--hover-color .card:hover,
.i2t3-card-plus--hover-color .card:hover * {
  color: var(--bs-light, #f8f9fa) !important;
}
/* keep buttons readable on the coloured hover surface */
.i2t3-card-plus--hover-color .card:hover .btn {
  color: inherit;
}