/* ==========================================================================
   Layout archetype: CARD MASONRY  (Aksara, Zora)
   A visual, exploratory grid of variable-height cards (CSS columns — no JS,
   lightweight). Card variants (feature / standard / overlay / text) create the
   height variation; a text card also handles posts with no featured image
   gracefully. Single column on mobile so it never goes ragged. Fully scoped
   under .cm-* — other families (hero-grid / magazine-split / full-width-list)
   are untouched.
   ========================================================================== */

.cm { padding-top: var(--sp-5); --cm-gap: var(--sp-4); --cm-radius: var(--radius); }

.cm-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-border); }
.cm-head__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.cm-head__sub { font-family: var(--font-ui); font-size: .92rem; color: var(--c-text-muted); }

/* masonry via CSS columns */
.cm-grid { column-count: 1; column-gap: var(--cm-gap); }
.cm-card { break-inside: avoid; margin-bottom: var(--cm-gap); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--cm-radius); overflow: hidden; }

.cm-card__media { display: block; overflow: hidden; background: var(--c-surface-2); aspect-ratio: 16 / 9; }
.cm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cm-card:hover .cm-card__media img { transform: scale(1.05); }
.cm-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.cm-card__cat { display: inline-block; font-family: var(--font-ui); font-weight: 800; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 6px; }
.cm-card__title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.26; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-card__title a { color: var(--c-text); }
.cm-card__title a:hover { color: var(--c-primary); text-decoration: none; }
.cm-card__excerpt { display: none; color: var(--c-text-muted); font-size: .95rem; line-height: 1.55; margin: var(--sp-2) 0 0; }
.cm-card__meta { font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--c-text-muted); margin: var(--sp-2) 0 0; }
.cm-card__meta time { font-weight: 600; }

/* --- variety: all media stay 16:9 (matches sources, no aspect-ratio flag);
       height variation comes from CONTENT — feature & standard carry an excerpt,
       compact does not, text cards have no image. --- */
.cm-card--feature .cm-card__title { font-size: 1.45rem; }
.cm-card--feature .cm-card__excerpt { display: block; }
.cm-card--standard .cm-card__excerpt { display: block; -webkit-line-clamp: 2; }

/* overlay card: title sits over the image (visual / dynamic) */
.cm-card--overlay { position: relative; }
.cm-card--overlay .cm-card__body { position: absolute; inset: auto 0 0 0; padding: var(--sp-4); background: linear-gradient(to top, rgba(15, 15, 20, .9) 10%, rgba(15, 15, 20, .35) 60%, transparent); }
.cm-card--overlay .cm-card__title a { color: #fff; }
.cm-card--overlay .cm-card__cat { color: #fff; }
.cm-card--overlay .cm-card__meta { color: rgba(255, 255, 255, .85); }

/* text card: no image — handles missing featured image + adds rhythm */
.cm-card--text { background: var(--c-surface-2); border-color: transparent; }
.cm-card--text .cm-card__body { padding: var(--sp-5); }
.cm-card--text .cm-card__title { font-size: 1.35rem; -webkit-line-clamp: 4; }
.cm-card--text .cm-card__excerpt { display: block; }

@media (prefers-reduced-motion: reduce) { .cm-card:hover .cm-card__media img { transform: none; } }

/* small screens: single tidy column + tighter header */
@media (max-width: 599px) {
  :root { --header-h: 54px; }
  .brand img, .brand .custom-logo { height: 34px; }
  .brand__name { font-size: 1.04rem; }
}

/* tablet: 2 columns */
@media (min-width: 600px) { .cm-grid { column-count: 2; } }

/* desktop: 3 columns */
@media (min-width: 1000px) { .cm-grid { column-count: 3; --cm-gap: var(--sp-5); } }