/*
 * om-wp.css — Breakdance's own elements, painted with the shared look.
 *
 * Only a bridge: every colour, font, radius and edge comes from onlymatt.css
 * (--om-* tokens), so a change there reaches this site too. Selectors start
 * with body.om, the class this plugin adds: deactivate the plugin and nothing
 * here applies any more.
 */

/* Breakdance reads its colours and fonts from --bde-* variables: point them at the look's. */
body.om {
  --bde-body-font-family: var(--om-font);
  --bde-heading-font-family: var(--om-font);
  --bde-body-text-color: var(--om-ink);
  --bde-headings-color: var(--om-ink);
  --bde-links-color: var(--om-ink);
  --bde-links-color-hover: var(--om-accent);
  --bde-brand-primary-color: var(--om-accent);
  --bde-brand-primary-color-hover: var(--om-accent);
}

/* Breakdance's footer template gives way to <om-footer> (disabling that template
   in Breakdance does the same, for good). */
body.om > main ~ .bde-section {
  display: none;
}

/* ---------- Home: the cards (.omfc, made .om-square by om-wp.js) ---------- */
body.om .omfc {
  border-radius: var(--om-radius);
}
body.om .omfc__banner {
  background: linear-gradient(to top, rgb(2 10 12 / 0.82), rgb(2 10 12 / 0));
}
body.om .omfc__title,
body.om .omfc__desc,
body.om .omfc__err {
  color: var(--om-on-square);
  font-family: var(--om-font);
}
body.om .omfc__title {
  font-weight: var(--om-font-bold);
}

/* ---------- Blog: each post a velvet square, like the vidéothèque ----------
   The picture fills the square, the title sits inside it bottom-left (thin
   capitals, .om-title-thin added by om-wp.js) over a velvet shade rising from
   the bottom. The post's "Read more" link is stretched over the whole square:
   one link per post, reachable by keyboard, named after the post. */
body.om .bde-post-list > .bde-loop {
  --bde-posts-per-row: 3;
}
@media (max-width: 1023px) {
  body.om .bde-post-list > .bde-loop {
    --bde-posts-per-row: 2;
  }
}
@media (max-width: 479px) {
  body.om .bde-post-list > .bde-loop {
    --bde-posts-per-row: 1;
  }
}
body.om .bde-post-list .ee-post {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background-color: var(--om-square);
  background-image: var(--om-square-sheen);
  border-radius: var(--om-radius);
  box-shadow: var(--om-square-edge);
}
body.om .bde-post-list .ee-post::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top, rgb(2 10 12 / 0.9) 0%, rgb(2 10 12 / 0.5) 30%, rgb(2 10 12 / 0) 58%);
}
body.om .bde-post-list .ee-post-image-link {
  position: absolute;
  inset: 0;
}
body.om .bde-post-list .ee-post-image {
  height: 100%;
}
body.om .bde-post-list .ee-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-out;
}
/* A post without a featured image: Breakdance's grey placeholder gives way
   to the bare velvet square. */
body.om .bde-post-list .ee-post-image img:not(.wp-post-image) {
  display: none;
}
body.om .bde-post-list .ee-post:hover .ee-post-image img {
  transform: scale(1.03);
}
/* The wrap stays in the flow so the title and the link below are placed
   against the square itself. */
body.om .bde-post-list .ee-post-wrap {
  position: static;
}
body.om .bde-post-list .ee-post-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  font-size: 15px;
  font-weight: var(--om-font-thin); /* Breakdance's heading weight would win over .om-title-thin */
  line-height: 1.35;
  text-shadow: 0 1px 8px rgb(2 10 12 / 0.7);
}
body.om .bde-post-list .ee-post-title a {
  color: var(--om-on-square);
  font-weight: inherit;
  text-decoration: none;
}
body.om .bde-post-list .ee-post-meta,
body.om .bde-post-list .ee-post-content {
  display: none;
}
body.om .bde-post-list .ee-post-button {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  font-size: 0;
  background: transparent;
  border-radius: inherit;
  box-shadow: none;
}
body.om .bde-post-list .ee-post-button:focus-visible {
  outline: 2px solid var(--om-accent);
  outline-offset: 3px;
}
/* Breakdance's primary button, made .om-btn .om-btn-primary by om-wp.js.
   Breakdance sets its colours, pill shape and heavy shadow on the button
   itself (global settings), so they are answered here, on the button too. */
body.om .button-atom--primary {
  --bde-button-primary-background-color: var(--om-accent);
  --bde-button-primary-background-color-hover: var(--om-accent);
  --bde-button-primary-text-color: var(--om-accent-ink);
  --bde-button-primary-text-color-hover: var(--om-accent-ink);
  --bde-button-primary-border-color: transparent;
  --bde-button-primary-border-color-hover: transparent;
  border-radius: var(--om-radius-inner);
  box-shadow: none;
  transform: none;
}

/* ---------- A post ---------- */
body.om .bde-adjacentposts .ee-adjacentposts-icon {
  color: var(--om-ink);
}
body.om .bde-adjacentposts .ee-adjacentposts-label {
  color: var(--om-muted);
}

/* ---------- Medias: the om-media showcase in its dark look, as a velvet square ---------- */
body.om .om-showcase-dark {
  background-color: var(--om-square);
  background-image: var(--om-square-sheen);
  border-radius: var(--om-radius);
  box-shadow: var(--om-square-edge);
}
body.om .om-showcase-dark .om-showcase-frame {
  border-radius: var(--om-radius-inner);
}
body.om .om-showcase-dark .om-showcase-title {
  color: var(--om-on-square);
}

/* ---------- Store and art gallery ([om_boutique], [om_galerie], includes/store.php) ---------- */
body.om .om-store__section + .om-store__section {
  margin-top: var(--om-space-7);
}
body.om .om-store__heading {
  margin: 0 0 var(--om-space-5);
  font-size: 1.8rem;
  font-weight: var(--om-font-thin);
}
body.om .om-store__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--om-space-5);
}
body.om .om-store__item {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body.om .om-store__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
body.om .om-store__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--om-space-2);
  padding: var(--om-space-5);
}
body.om .om-store__title {
  margin: 0;
  font-size: 1.1rem;
}
body.om .om-store__price {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--om-font-bold);
  color: var(--om-accent);
}
body.om .om-store__facts,
body.om .om-store__note {
  margin: 0;
  font-size: 0.9rem;
}
body.om .om-store__text {
  font-size: 0.95rem;
}
body.om .om-store__text p {
  margin: 0 0 var(--om-space-2);
}
body.om .om-store__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--om-space-2);
  margin-top: auto;
  padding-top: var(--om-space-3);
}
body.om .om-store__tag {
  align-self: flex-start;
  margin: auto 0 0;
  padding: var(--om-space-1) var(--om-space-3);
  border-radius: var(--om-radius-pill);
  background: var(--om-square);
  color: var(--om-on-square);
  font-size: 0.8rem;
  font-weight: var(--om-font-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.om .om-store__terms {
  margin: var(--om-space-6) 0 0;
  font-size: 0.9rem;
}
body.om .om-store__terms a {
  color: inherit;
}