/**
 * sfs-card — the 2026 content card component.
 *
 * Extracted from homepage-2026.css so any page can use the card without
 * pretending to be the homepage. Selectors are intentionally unscoped: a page
 * that wants to alter the card overrides these with its own ancestor class
 * (see .section-investors in homepage-2026.css for an example).
 *
 * Loaded site-wide from functions.php.
 */

/* Optional 4-up grid when a strip renders as a grid rather than a slider */
.sfs-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding-block: 12px;
}

/* Card wrapper */
.sfs-card {
  --sfs-card-poster: #c5c9ff;
  --sfs-card-chip: #5a68ff;
  --sfs-card-title: #191919;
  --sfs-card-meta: #87868e;
  --sfs-card-tag-bg: rgba(236, 236, 236, 0.5);

  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  overflow: hidden;
  transition:
    box-shadow 200ms ease,
    border 200ms ease;
  font-family:
    "Heebo",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.sfs-card:hover {
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.08);
  border-color: #cdcdcd;
}

.sfs-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 16px;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.sfs-card__link:hover {
  text-decoration: none;
  color: inherit;
}

.sfs-card__link:focus-visible {
  outline: 2px solid var(--sfs-card-chip);
  outline-offset: 2px;
}

/* Per-format accent palette */
.sfs-card--video {
  --sfs-card-poster: #f4b6c3;
  --sfs-card-chip: #a96bff;
  --sfs-card-chip-bg: #f6efff;
}

.sfs-card--podcast {
  --sfs-card-poster: #c5c9ff;
  --sfs-card-chip: #5a68ff;
}

.sfs-card--article {
  --sfs-card-poster: #f4b6c3;
  --sfs-card-chip: #d14c6a;
}

.sfs-card--course {
  --sfs-card-poster: #c1d6ff;
  --sfs-card-chip: #0f8b6a;
  --sfs-card-chip-bg: #beffde80;
}

.sfs-card--template {
  --sfs-card-poster: #e5e5e5;
  --sfs-card-chip: #87868e;
}

/* Poster */
.sfs-card__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 241 / 184;
  background-color: var(--sfs-card-poster);
  background-image: var(--sfs-card-decoration, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 23px;
}

/* Inset the thumbnail so the decoration frames it on all sides. */
.sfs-card__image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  filter: grayscale(1);
}

/* Blog (CPT: blog -> variant "article"): no card background/decoration.
   The featured image fills the poster and is clipped by the 3-arch mask
   instead of being framed by a decoration. */
.sfs-card--article .sfs-card__poster {
  background-color: #ffdde4;
  background-image: none;
  padding: 18px 24px;
}

.sfs-card--article .sfs-card__image {
  border-radius: 0;
  /* Shape is picked at random per card in content.php. */
  -webkit-mask-image: var(--sfs-card-mask, none);
  mask-image: var(--sfs-card-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* A card with no featured image falls back to a placeholder, which is shown
   on its own — no colour behind it, no decoration frame, no clip shape. */
.sfs-card--fallback .sfs-card__poster {
  background-color: transparent;
  background-image: none;
  padding: 0;
}

.sfs-card--fallback .sfs-card__image {
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Video and course: no card background/decoration either. */
.sfs-card--video .sfs-card__poster,
.sfs-card--course .sfs-card__poster {
  background-color: transparent;
  background-image: none;
  padding: 0;
}

.sfs-card--video .sfs-card__image,
.sfs-card--course .sfs-card__image {
  border-radius: 0;
}

/* Colour overlay on the featured image. Figma exports this as
   `background-blend-mode: color`, which only applies when the photo is a
   background layer. The photo here is an <img>, so the equivalent is an
   overlay with `mix-blend-mode: color` — hue + saturation from the colour,
   luminosity from the (already grayscale) photo. z-index 1 keeps it above
   the image but below the bookmark button (z-index 2). */
.sfs-card--course .sfs-card__poster::after,
.sfs-card--video .sfs-card__poster::after {
  content: "";
  position: absolute;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
}

/* Neither has padding, so each overlay covers the whole poster. */
.sfs-card--course .sfs-card__poster::after {
  inset: 0;
  background: #beffde;
}

.sfs-card--video .sfs-card__poster::after {
  inset: 0;
  background: #c5c9ff;
}

.sfs-card__bookmark {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #87868e;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.sfs-card__bookmark:hover {
  color: #191919;
}

.sfs-card__bookmark.saved {
  color: var(--sfs-card-chip);
}

/* Content block */
.sfs-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 10px 0;
}

/* Format chip */
.sfs-card__chip-row {
  display: flex;
  justify-content: flex-start;
}

.sfs-card__format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--secondary-font);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sfs-card-chip);
  background: var(
    --sfs-card-chip-bg,
    color-mix(in srgb, var(--sfs-card-chip) 20%, transparent)
  );
}

/* Posts tagged "פרודקטיבי" — fixed chip colours (the decoration is pinned
   to card-decoration-05 in content.php). */
.sfs-card--productive {
  --sfs-card-chip: #7eaf00;
  --sfs-card-chip-bg: #f1ffce;
}

/* Title */
.sfs-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sfs-card-title);
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta line: duration | author */
.sfs-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--sfs-card-meta);
}

.sfs-card__meta-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--sfs-card-meta);
}

/* Tag row: single line, +N overflow chip stays visible */
.sfs-card__tags {
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding-top: 4px;
}

.sfs-card__tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sfs-card-tag-bg);
  color: var(--sfs-card-meta);
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.sfs-card__tag--count {
  flex-shrink: 0;
}

/* Most-visited variant: number sidebar next to card */
.sfs-card-mv {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.sfs-card-mv__number {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.sfs-card-mv > .sfs-card {
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sfs-card {
    transition: none;
  }
}

@media (max-width: 1441px) {
  .sfs-card__poster {
    padding: 24px;
  }
}

@media (max-width: 992px) {
  .sfs-card__poster {
    padding: 16px;
  }
}