/**
 * MyWebStore Blog Posts card grid.
 *
 * All visual styling bridges to the shared theme token library. Component
 * custom properties exist only as semantic aliases and introduce no separate
 * colour or typography system.
 */

.mws-blog-posts {
  --mws-blog-card-bg: var(--mws-color-surface, var(--mws-color-bg, #fff));
  --mws-blog-card-border: var(--mws-color-border, #e5e5e5);
  --mws-blog-card-title: var(--mws-color-heading, #111);
  --mws-blog-card-text: var(--mws-color-text, #222);
  --mws-blog-card-muted: var(--mws-color-secondary-text, #666);
  --mws-blog-card-link: var(--mws-color-link, var(--mws-color-primary, #111));
  --mws-blog-card-link-hover: var(--mws-color-link-hover, var(--mws-color-primary-hover, #333));
  --mws-blog-card-radius: var(--mws-radius-md, 14px);
  --mws-blog-card-image-radius: var(--mws-native-media-radius, var(--mws-radius-md, 14px));
  --mws-blog-card-padding: var(--mws-space-md, 20px);
  --mws-blog-grid-gap: var(--mws-space-lg, 32px);
  width: 100%;
}

.mws-blog-posts__grid {
  display: grid;
  grid-template-columns: repeat(var(--mws-blog-columns-desktop, 3), minmax(0, 1fr));
  gap: var(--mws-blog-grid-gap);
  align-items: stretch;
}

.mws-blog-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--mws-blog-card-text);
  background: var(--mws-blog-card-bg);
  border: 1px solid var(--mws-blog-card-border);
  border-radius: var(--mws-blog-card-radius);
}

.mws-blog-card__media {
  display: block;
  aspect-ratio: var(--mws-blog-image-ratio, 4/3);
  overflow: hidden;
  background: var(--mws-color-bg, #fff);
  border-radius: var(--mws-blog-card-image-radius) var(--mws-blog-card-image-radius) 0 0;
}

.mws-blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--mws-blog-image-position, center center);
  transform: scale(var(--mws-blog-image-zoom, 1));
  transform-origin: var(--mws-blog-image-position, center center);
  border-radius: inherit;
  transition: transform 180ms ease;
}

.mws-blog-card__media:hover .mws-blog-card__image,
.mws-blog-card__media:focus-visible .mws-blog-card__image {
  transform: scale(var(--mws-blog-image-zoom, 1));
}

.mws-blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--mws-blog-card-padding);
}

.mws-blog-card__category,
.mws-blog-card__date {
  margin: 0 0 var(--mws-space-xs, 8px);
  color: var(--mws-blog-card-muted);
  font-size: var(--mws-font-size-small, 14px);
  line-height: 1.4;
}

.mws-blog-card__category {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mws-blog-card__title {
  margin: 0 0 var(--mws-space-sm, 12px);
  color: var(--mws-blog-card-title);
  font-family: var(--mws-font-heading, inherit);
  font-size: var(--mws-font-size-h4, 1.25rem);
  font-weight: var(--mws-font-weight-heading, 700);
  line-height: 1.2;
}

.mws-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.mws-blog-card__title a:hover,
.mws-blog-card__title a:focus-visible {
  color: var(--mws-blog-card-link-hover);
}

.mws-blog-card__excerpt {
  margin: 0 0 var(--mws-space-md, 20px);
  color: var(--mws-blog-card-text);
  font-size: var(--mws-font-size-body, 16px);
  line-height: var(--mws-line-height-body, 1.65);
}

.mws-blog-card__read-more {
  align-self: flex-start;
  margin-top: auto;
  color: var(--mws-blog-card-link);
  font-size: var(--mws-font-size-body, 16px);
  font-weight: 700;
  text-decoration: none;
}

.mws-blog-card__read-more:hover,
.mws-blog-card__read-more:focus-visible {
  color: var(--mws-blog-card-link-hover);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.mws-blog-posts__empty {
  padding: var(--mws-space-md, 20px);
  color: var(--mws-color-secondary-text, #666);
  background: var(--mws-color-surface, #fff);
  border: 1px dashed var(--mws-color-border, #e5e5e5);
  border-radius: var(--mws-radius-md, 14px);
}

.editor-styles-wrapper .mws-blog-posts-editor > .components-placeholder,
.editor-styles-wrapper .mws-blog-posts-editor > .wp-block-server-side-render {
  width: 100%;
}

/* Block grid tablet tier; intentionally independent of the 768px theme shell. */
@media (max-width: 900px) {
  .mws-blog-posts__grid {
    grid-template-columns: repeat(var(--mws-blog-columns-tablet, 2), minmax(0, 1fr));
  }
}

/* Block grid mobile tier for independently selected mobile columns. */
@media (max-width: 600px) {
  .mws-blog-posts__grid {
    grid-template-columns: repeat(var(--mws-blog-columns-mobile, 1), minmax(0, 1fr));
    gap: var(--mws-space-md, 20px);
  }
}

/* Keep the selected static crop while removing decorative image motion for
   visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .mws-blog-card__image {
    transition: none;
  }
}

.mws-blog-posts__preview-note {
  margin: var(--mws-space-md, 20px) 0 0;
  color: var(--mws-color-secondary-text, #666);
  font-size: var(--mws-font-size-small, 14px);
  line-height: 1.5;
  text-align: center;
}

.mws-blog-posts > .mws-blog-posts__pagination.navigation.pagination {
  width: 100%;
  max-width: 100%;
  margin-top: var(--mws-space-xl, 40px);
}