/* ============================================================
   Block tokens. Maps --od-* onto the theme's --wp--preset--*
   with hard fallbacks, so the blocks still look right if they
   are ever used under a different theme.
   ============================================================ */
:root {
  --od-black: var(--wp--preset--color--black, #000);
  --od-white: var(--wp--preset--color--white, #fff);
  --od-ink: var(--wp--preset--color--on-surface, #1b1c1c);
  --od-ink-muted: var(--wp--preset--color--on-surface-variant, #4c4546);
  --od-rule: var(--wp--preset--color--outline-variant, #cfc4c5);
  --od-gutter: 24px;
}

/* Shared card, used by every loop block. */
.od-card {
  display: block;
  text-decoration: none;
  color: var(--od-ink);
}

.od-card__figure { margin: 0; }

.od-card__frame {
  border: 1px solid var(--od-black);
  overflow: hidden;
}

.od-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease-out;
}

.od-card:hover .od-card__frame img { opacity: 0.88; }

.od-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--wp--preset--color--surface, #fbf9f9);
  color: var(--od-rule);
  font-size: 48px;
  font-weight: 600;
}

.od-card__caption {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
}

.od-card__name {
  font-size: var(--wp--preset--font-size--body-lg, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--od-black);
}

.od-card__meta {
  margin-left: auto;
  text-align: right;
  font-size: var(--wp--preset--font-size--body-lg, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--od-ink-muted);
}

.od-card:hover .od-card__name,
.od-card:focus-visible .od-card__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.od-card:focus-visible { outline: 2px solid var(--od-black); outline-offset: 3px; }

/* Buttons shared by the blocks. */
.od-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.od-btn svg { width: 20px; height: 20px; flex: none; }
.od-btn--primary { background: var(--od-black); color: var(--od-white); }
.od-btn--primary:hover { background: transparent; color: var(--od-black); border-color: var(--od-black); }
.od-btn--secondary { border-color: var(--od-black); color: var(--od-black); background: transparent; }
.od-btn--secondary:hover { background: var(--od-black); color: var(--od-white); }
.od-btn.is-inert { opacity: 0.45; cursor: default; }
.od-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.od-editor-notice {
  padding: 24px;
  border: 1px dashed var(--od-rule);
  color: var(--od-ink-muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 900px) {
  .od-btn { font-size: 16px; min-height: 60px; padding: 0 32px; }
  .od-btn svg { width: 17px; height: 17px; }
}