/* ==========================================================================
   C1 — Preview Card · Version 2.0 (approved standard)
   Contract: Preview data; modes large | small (.block-c1--small).
   Cover language aligned with Hero v2 (title overlay, theme light/dark).
   ========================================================================== */

.block-c1 {
  --c1-excerpt-lines: 2;
  --c1-excerpt-block: calc(
    var(--text-h7-size) * var(--text-h7-leading) * var(--c1-excerpt-lines)
  );
  --c1-footer-block: calc(var(--text-h9-size) * var(--text-h9-leading));

  margin: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.block-c1__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.block-c1__link:hover .block-c1__arrow,
.block-c1__link:focus-visible .block-c1__arrow {
  color: var(--color-accent);
}

/*
  Cover plane — always 21:9 (with or without image).
  Title overlays the plane; no ellipsis / line-clamp.
*/
.block-c1__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: var(--ratio-hero-article);
  overflow: hidden;
  background-color: var(--color-surface-muted);
  border-radius: 0;
  isolation: isolate;
}

.block-c1__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

.block-c1__title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: auto;
  max-width: 66.666%;
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  text-align: left;
  overflow: visible;
  white-space: normal;
  /* Explicitly no ellipsis */
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  transition: color var(--duration-normal) var(--ease-standard);
}

/* Title metrics come from .text-h4 (large) / .text-h7 (small) — no local type overrides */

/* theme: light (default) — white title for dark covers / no-cover plane */
.block-c1--light .block-c1__title,
.block-c1:not(.block-c1--dark) .block-c1__title {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(34, 50, 69, 0.45),
    0 4px 14px rgba(34, 50, 69, 0.5);
}

/* theme: dark — brand text for light covers */
.block-c1--dark .block-c1__title {
  color: var(--color-text);
  text-shadow: none;
}

/* Hover / focus: accent on both themes (must beat theme title selectors) */
.block-c1 .block-c1__link:hover .block-c1__title,
.block-c1 .block-c1__link:focus-visible .block-c1__title {
  color: var(--color-accent);
}

.block-c1--no-cover .block-c1__media {
  background-color: var(--color-secondary);
}

.block-c1--no-cover.block-c1--dark .block-c1__media {
  background-color: var(--color-surface-muted);
}

/*
  Text under cover — excerpt + footer (title stays on media).
*/
.block-c1__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  min-height: calc(
    var(--c1-excerpt-block) +
      var(--space-xs) +
      var(--c1-footer-block) +
      var(--space-s) +
      var(--space-s)
  );
  padding: var(--space-s) var(--space-m);
}

.block-c1__excerpt {
  display: -webkit-box;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--c1-excerpt-lines);
  line-clamp: var(--c1-excerpt-lines);
  height: var(--c1-excerpt-block);
  max-height: var(--c1-excerpt-block);
}

.block-c1__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  box-sizing: border-box;
  height: var(--c1-footer-block);
  margin-top: auto;
  color: var(--color-text-muted);
}

.block-c1__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.block-c1__reading:empty,
.block-c1__date:empty {
  display: none;
}

.block-c1__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--duration-normal) var(--ease-standard);
}

.block-c1__arrow svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* --------------------------------------------------------------------------
   Small mode — cover + title overlay only
   -------------------------------------------------------------------------- */

.block-c1--small .block-c1__excerpt,
.block-c1--small .block-c1__footer,
.block-c1--compact .block-c1__excerpt,
.block-c1--compact .block-c1__footer {
  display: none;
}

.block-c1--small .block-c1__body,
.block-c1--compact .block-c1__body {
  display: none;
}

/* Small: title max 4 lines; equal card height, no growth from long titles */
.block-c1--small .block-c1__title,
.block-c1--compact .block-c1__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  text-overflow: ellipsis;
}