/* Card surfaces and interaction. Layout/content remain in section styles. */
:root {
  --ds-card-radius: 18px;
  --ds-card-media-radius: 11px;
  --ds-card-shadow: 0 10px 35px rgba(var(--color-shadow-rgb), .05);
  --ds-card-shadow-hover: 0 16px 40px rgba(var(--color-shadow-rgb), .10);
  --ds-card-transition: 180ms ease;
}
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
) {
  border: 1px solid var(--color-border);
  border-radius: var(--ds-card-radius);
  box-shadow: var(--ds-card-shadow);
  overflow: hidden;
  transition: opacity 650ms ease, transform 650ms ease, box-shadow var(--ds-card-transition), border-color var(--ds-card-transition);
}
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
):is(:not(.reveal), .is-visible, :focus-within) {
  transform: none;
  transition: box-shadow var(--ds-card-transition), border-color var(--ds-card-transition);
  transition-delay: 0s;
}
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
):hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow: var(--ds-card-shadow);
}
@media (hover: hover) and (pointer: fine) {
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
):hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--ds-card-shadow-hover);
  }
}
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
):is(:focus-visible, :has(:focus-visible)) {
  opacity: 1;
  transform: none;
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-color: var(--color-border-strong);
  box-shadow: var(--ds-card-shadow-hover);
}
/* Hover belongs to the surface, not to a second nested card. */
.moto-design .club-card .club-card__link:hover { transform: none; box-shadow: none; }
/* Photos and fallback logos stay still, including legacy hover effects. */
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
) :is(.news-card__media, .calendar-card__media, .gallery-album__media, .club-card__media, .article-card__media, .video-card__media, .moto-store-card__media) img,
.moto-design :is(.catalog-card, .merch-card) img {
  transform: none;
  filter: none;
  transition: none;
}
.moto-design .video-tile::before,
.moto-design .video-tile:hover::before { transform: none; transition: none; }
.moto-design .video-tile:hover { background: var(--dark-2); }
/* Inset news media retain their agreed spacing and radius. Edge-to-edge media
   are clipped by the outer card radius, without extra inner rounding. */
.moto-design .news-page .news-card.article-feed-card .news-card__media,
.moto-design .news-card.article-feed-card .news-card__media {
  border-radius: var(--ds-card-media-radius);
}
.moto-design .news-card.article-feed-card h2 a { background-image: none; }
@media (prefers-reduced-motion: reduce) {
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
),
.moto-design :is(
  .ds-card,
  .news-page .articles-feed__grid .news-card.article-feed-card,
  .news-card.article-feed-card,
  .gallery-album,
  .club-card,
  .article-card,
  .video-card,
  .catalog-card,
  .merch-card,
  .moto-store-card,
  .article-section-card,
  .video-tile,
  .calendar-agenda article
):is(:not(.reveal), .is-visible, :focus-within) { transition: none; transition-delay: 0s; }
}

/* Explicit exception: the prominent news banner retains its layout and media radius. */
.moto-design .news-card:first-child:not(.article-feed-card) .news-card__media img {
  transform: none;
  filter: none;
  transition: none;
}

/* Event image and caption share one surface, approved 21.09.2026. */
.moto-design .calendar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ds-card-radius); box-shadow: var(--ds-card-shadow); overflow: hidden; transition: border-color var(--ds-card-transition), box-shadow var(--ds-card-transition); }
@media (hover: hover) and (pointer: fine) {
  .moto-design .calendar-card:hover { border-color: var(--color-border); box-shadow: var(--ds-card-shadow-hover); }
}
@media (prefers-reduced-motion: reduce) { .moto-design .calendar-card { transition: none; } }
.moto-design .calendar-card:is(:focus-visible, :has(:focus-visible)) { outline: 3px solid var(--color-accent); outline-offset: 4px; }