/* ──────────────────────────────────────────────────────────────────────
 * GENERATED — do not edit by hand.
 *
 * Source:  src/lib/elements/cardContainerCss.ts
 * Command: pnpm build:card-containers
 *
 * Compound-widget card-container pattern. Each registered scope (see
 * CARD_CONTAINER_SCOPES) gets its own classname + CSS var namespace so
 * widgets opt in without sharing tokens. Adding a new widget is a
 * two-step change: (1) append a CardContainerScope to the registry
 * and rerun the generator, (2) pass `cardWrapperClassName` to
 * `CompoundSectionRenderer` from the widget's renderer.
 * ────────────────────────────────────────────────────────────────────── */

/* ═══ region-portfolio — card container (generated by buildCardContainerCss) ═══ */

.el-region-portfolio__card-container {
  position: relative;
  display: flex;
  border-radius: var(--rp-card-radius, var(--site-card-radius, 8px));
  overflow: hidden;
  /* Resting elevation cascades through the unified card resting-state
     color contract (see src/lib/themeContract.ts § Card resting-state
     colors) so a per-site `--site-card-elevation` retints every card
     in one edit. Falls back to `none` (chromeless) when no card
     elevation is set, identical to the previous behaviour. */
  box-shadow: var(--rp-card-shadow, var(--site-card-elevation, none));
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  /* Background cascades through the unified card resting-state color
     contract (`--site-card-bg`), which defaults to `--site-surface`
     so existing sites keep their look without setting any new tokens. */
  background: var(--rp-card-bg, var(--site-card-bg, var(--site-surface, transparent)));
  border-top: var(--rp-card-border-top-width, 0) solid var(--rp-card-border-top-color, var(--rp-card-border-color, var(--site-card-border, transparent)));
  border-right: var(--rp-card-border-right-width, 0) solid var(--rp-card-border-right-color, var(--rp-card-border-color, var(--site-card-border, transparent)));
  border-bottom: var(--rp-card-border-bottom-width, 0) solid var(--rp-card-border-bottom-color, var(--rp-card-border-color, var(--site-card-border, transparent)));
  border-left: var(--rp-card-border-left-width, 0) solid var(--rp-card-border-left-color, var(--rp-card-border-color, var(--site-card-border, transparent)));
}

.el-region-portfolio__card-container:hover {
  transform: translateY(calc(var(--region-portfolio-hover-lift, 0px) * -1));
  box-shadow: var(--region-portfolio-hover-shadow, var(--rp-card-shadow, none));
}

.el-region-portfolio__card-container > .el {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.el-region-portfolio__card-container .el-region-portfolio__card {
  border-radius: 0;
  box-shadow: none;
  border-width: 0;
  width: 100%;
  flex: 1;
}
.el-region-portfolio__card-container .el-region-portfolio__card:hover {
  transform: none;
}
.el-region-portfolio__card-container .el-region-portfolio__card-media {
  border-radius: 0;
}

.el-compound-section__cards > .el-region-portfolio__card:hover {
  transform: translateY(calc(var(--region-portfolio-hover-lift, 0px) * -1));
  box-shadow: var(--region-portfolio-hover-shadow, var(--rp-card-shadow, none));
}

.el-region-portfolio--alternating .el-compound-section__cards {
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] {
  border-left-width: var(--rp-card-border-left-width, var(--rp-alt-border-width, 0));
  border-left-color: var(--rp-card-border-left-color, var(--rp-alt-border-color, var(--rp-card-accent, var(--site-primary, currentColor))));
  border-right-width: 0;
}
.el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card {
  flex-direction: row;
}
.el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] {
  border-right-width: var(--rp-card-border-right-width, var(--rp-alt-border-width, 0));
  border-right-color: var(--rp-card-border-right-color, var(--rp-alt-border-color, var(--rp-card-accent, var(--site-primary, currentColor))));
  border-left-width: 0;
}
.el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] .el-region-portfolio__card {
  flex-direction: row-reverse;
}
.el-region-portfolio--alternating .el-region-portfolio__card-media {
  width: var(--rp-alt-media-width, 44%);
  flex-shrink: 0;
  /* Aspect ratio comes from the widget's cardImageAspectRatio prop. With a
     max-height cap set, the image holds its shape instead of stretching to
     match the (often taller) body content. With no cap, max-height: none
     lets stretch behave as a fallback. Cascades through the unified
     card-media-aspect token so neighbouring carousel/grid cards in
     other elements line up. */
  aspect-ratio: var(--rp-card-media-aspect, var(--site-card-media-aspect, 16 / 10));
  align-self: stretch;
  /* Floor cascades through the unified card-min-h token so an alternating
     region-portfolio card sitting next to a testimonials carousel and a
     feature-cards grid lands at the same baseline desktop height. */
  min-height: var(--site-card-min-h, 280px);
  max-height: var(--rp-card-media-height, none);
}
@container site style(--site-bp: mobile) {
  /* Specificity-matched mobile reset. The desktop "odd" rule
     (`....el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card`) has a
     [data-card-row] attr selector — at-media blocks do NOT add specificity,
     so a reset that omits the attr selector loses to the desktop rule and
     the card stays in row-mode on phones (huge media + squashed body =
     ~1200px tall card with empty-looking text). Re-include the attr
     selectors here so both odd and even mobile rules outweigh their
     desktop counterparts. */
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card,
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] .el-region-portfolio__card {
    flex-direction: column;
  }
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card-media,
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] .el-region-portfolio__card-media,
  .el-region-portfolio--alternating .el-region-portfolio__card-media {
    width: 100%;
    aspect-ratio: var(--rp-card-media-aspect, var(--site-card-media-aspect, 16 / 10));
    /* Reset the desktop floor — on a single-column phone layout the
       desktop `--site-card-min-h` would force the media to dominate the
       card and collides with the cap below. The unified card token system
       drops `--site-card-min-h` to `auto` at the mobile breakpoint, but
       we explicitly zero it here for the alternating layout because the
       cell already has a max-height cap. */
    min-height: 0;
    /* Cap media height on mobile so a tall body cannot stretch the image
       past a reasonable single-column band. Authors can still set
       `--<scope>-card-media-height` from the inspector to override. */
    max-height: var(--rp-card-media-height, 240px);
  }
}
@media (max-width: 768px) {
  /* Specificity-matched mobile reset. The desktop "odd" rule
     (`....el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card`) has a
     [data-card-row] attr selector — at-media blocks do NOT add specificity,
     so a reset that omits the attr selector loses to the desktop rule and
     the card stays in row-mode on phones (huge media + squashed body =
     ~1200px tall card with empty-looking text). Re-include the attr
     selectors here so both odd and even mobile rules outweigh their
     desktop counterparts. */
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card,
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] .el-region-portfolio__card {
    flex-direction: column;
  }
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="odd"] .el-region-portfolio__card-media,
  .el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] .el-region-portfolio__card-media,
  .el-region-portfolio--alternating .el-region-portfolio__card-media {
    width: 100%;
    aspect-ratio: var(--rp-card-media-aspect, var(--site-card-media-aspect, 16 / 10));
    /* Reset the desktop floor — on a single-column phone layout the
       desktop `--site-card-min-h` would force the media to dominate the
       card and collides with the cap below. The unified card token system
       drops `--site-card-min-h` to `auto` at the mobile breakpoint, but
       we explicitly zero it here for the alternating layout because the
       cell already has a max-height cap. */
    min-height: 0;
    /* Cap media height on mobile so a tall body cannot stretch the image
       past a reasonable single-column band. Authors can still set
       `--<scope>-card-media-height` from the inspector to override. */
    max-height: var(--rp-card-media-height, 240px);
  }
}

.el-region-portfolio:not(.el-region-portfolio--alternating)[data-rp-border-alternate="true"] .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"] {
  border-left-width: var(--rp-card-border-right-width, 0);
  border-left-color: var(--rp-card-border-right-color, var(--rp-card-border-color, transparent));
  border-right-width: var(--rp-card-border-left-width, 0);
  border-right-color: var(--rp-card-border-left-color, var(--rp-card-border-color, transparent));
}

.el-region-portfolio__card-container::before,
.el-compound-section__cards > .el-region-portfolio__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rp-card-accent-width, 0);
  background: var(--rp-card-accent, var(--site-primary, currentColor));
  pointer-events: none;
  z-index: 1;
}
.el-region-portfolio--alternating .el-compound-section__cards > .el-region-portfolio__card-container[data-card-row="even"]::before,
.el-region-portfolio--stacked .el-region-portfolio__card-container::before,
.el-region-portfolio--stacked .el-region-portfolio__card::before {
  inset: 0 0 0 auto;
}
.el-region-portfolio--accent-left .el-region-portfolio__card-container::before,
.el-region-portfolio--accent-left .el-region-portfolio__card::before {
  inset: 0 auto 0 0;
}
.el-region-portfolio--accent-right .el-region-portfolio__card-container::before,
.el-region-portfolio--accent-right .el-region-portfolio__card::before {
  inset: 0 0 0 auto;
}
.el-region-portfolio--accent-top .el-region-portfolio__card-container::before,
.el-region-portfolio--accent-top .el-region-portfolio__card::before {
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--rp-card-accent-width, 0);
}
.el-region-portfolio--accent-bottom .el-region-portfolio__card-container::before,
.el-region-portfolio--accent-bottom .el-region-portfolio__card::before {
  inset: auto 0 0 0;
  width: 100%;
  height: var(--rp-card-accent-width, 0);
}

/* ═══ stats — card container (generated by buildCardContainerCss) ═══ */

.el-stats__card-container {
  position: relative;
  display: flex;
  border-radius: var(--stats-card-radius, var(--site-card-radius, 8px));
  overflow: hidden;
  /* Resting elevation cascades through the unified card resting-state
     color contract (see src/lib/themeContract.ts § Card resting-state
     colors) so a per-site `--site-card-elevation` retints every card
     in one edit. Falls back to `none` (chromeless) when no card
     elevation is set, identical to the previous behaviour. */
  box-shadow: var(--stats-card-shadow, var(--site-card-elevation, none));
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  /* Background cascades through the unified card resting-state color
     contract (`--site-card-bg`), which defaults to `--site-surface`
     so existing sites keep their look without setting any new tokens. */
  background: var(--stats-card-bg, var(--site-card-bg, var(--site-surface, transparent)));
  border-top: var(--stats-card-border-top-width, 0) solid var(--stats-card-border-top-color, var(--stats-card-border-color, var(--site-card-border, transparent)));
  border-right: var(--stats-card-border-right-width, 0) solid var(--stats-card-border-right-color, var(--stats-card-border-color, var(--site-card-border, transparent)));
  border-bottom: var(--stats-card-border-bottom-width, 0) solid var(--stats-card-border-bottom-color, var(--stats-card-border-color, var(--site-card-border, transparent)));
  border-left: var(--stats-card-border-left-width, 0) solid var(--stats-card-border-left-color, var(--stats-card-border-color, var(--site-card-border, transparent)));
}

.el-stats__card-container:hover {
  transform: translateY(calc(var(--stats-card-hover-lift, 0px) * -1));
  box-shadow: var(--stats-card-hover-shadow, var(--stats-card-shadow, none));
}

.el-stats__card-container > .el {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.el-stats__card-container .el-stats__card {
  border-radius: 0;
  box-shadow: none;
  border-width: 0;
  width: 100%;
  flex: 1;
}
.el-stats__card-container .el-stats__card:hover {
  transform: none;
}
.el-stats__card-container .el-stats__card-media {
  border-radius: 0;
}

.el-compound-section__cards > .el-stats__card:hover {
  transform: translateY(calc(var(--stats-card-hover-lift, 0px) * -1));
  box-shadow: var(--stats-card-hover-shadow, var(--stats-card-shadow, none));
}