/**
 * Shared Stories from our community card presentation.
 *
 * The companion script adds .merrick-story-block to matching Tatsu sections
 * so every instance uses the same structure and responsive behavior.
 */

.merrick-story-block .exp-posts-loop,
.merrick-story-block .exp-grid-wrap { height: auto !important; }

.merrick-story-block .be-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch !important; gap: 24px; height: auto !important; }

.merrick-story-block .be-grid > article { position: static !important; align-self: stretch !important; width: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; }

.merrick-story-block .exp-post-inner { display: flex; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--merrick-post-card-border) !important; border-radius: var(--merrick-post-card-radius); background: var(--merrick-color-white); }

.merrick-story-block .exp-post-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--merrick-post-card-radius) var(--merrick-post-card-radius) 0 0; background: var(--merrick-color-purple); }

.merrick-story-block .be-grid-placeholder { display: none !important; }

.merrick-story-block .exp-post-thumb-inner,
.merrick-story-block .exp-post-thumb img { display: block; width: 100%; height: 100%; }

.merrick-story-block .exp-post-thumb img { object-fit: cover; }

.merrick-story-block .exp-posts-loop-thumb { transition: transform .3s; }

.merrick-story-block article:hover .exp-posts-loop-thumb { transform: scale(1.025); }

.merrick-story-block .exp-post-details { display: flex; flex: 1; flex-direction: column; padding: var(--merrick-post-card-padding) !important; }

.merrick-story-block .exp-post-details-inner,
.merrick-story-block .exp-post-content { display: flex; flex: 1; flex-direction: column; }

.merrick-story-block .exp-post-content { margin-bottom: 0 !important; }

.merrick-story-block .exp-post-title-meta { margin: 0 0 12px !important; }

.merrick-story-block .exp-post-title { margin: 0 !important; font-size: var(--merrick-post-card-title-size) !important; font-weight: 800 !important; line-height: 1.3 !important; }

.merrick-story-block .exp-post-title a { color: var(--merrick-color-charcoal) !important; text-decoration: none !important; }

.merrick-story-block .exp-post-title a:hover,
.merrick-story-block .exp-post-title a:focus { color: #f05142 !important; }

.merrick-story-block .merrick-story-meta { margin: 0 0 12px !important; color: var(--merrick-color-purple); font-size: var(--merrick-post-card-meta-size); font-weight: 700; letter-spacing: .03em; line-height: 1.4; text-transform: uppercase; }

.merrick-story-block .exp-read-more { align-items: center; align-self: flex-end; gap: 3px; margin-top: auto; padding: 0 !important; color: var(--merrick-color-charcoal) !important; font-family: Montserrat, Arial, sans-serif; font-size: var(--merrick-post-card-link-size); font-weight: 700; line-height: 1.4; text-decoration: none; display: inline-flex !important; }

.merrick-story-block .exp-read-more::before { display: none !important; }

.merrick-story-block .exp-read-more::after { position: static !important; display: inline-block !important; width: 13px !important; height: auto !important; inset: auto !important; background: none !important; color: currentcolor; content: '→' !important; font-family: Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; transition: transform .2s; }

.merrick-story-block .exp-read-more:hover,
.merrick-story-block .exp-read-more:focus { color: var(--merrick-color-purple) !important; }

.merrick-story-block .exp-read-more:hover::after,
.merrick-story-block .exp-read-more:focus::after { transform: translateX(2px); }

@media (max-width: 1000px) {
  .merrick-story-block .be-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .merrick-story-block .be-grid { grid-template-columns: 1fr; }
  .merrick-story-block .exp-posts-loop-thumb { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .merrick-story-block .exp-posts-loop-thumb,
  .merrick-story-block .exp-read-more::after { transition: none; }

  .merrick-story-block article:hover .exp-posts-loop-thumb,
  .merrick-story-block .exp-read-more:hover::after { transform: none; }
}

/* Native Highlights cards use the same presentation as the homepage Tatsu cards. */
#be-content .merrick-story-style {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--merrick-post-card-border);
  border-radius: var(--merrick-post-card-radius);
  background: var(--merrick-color-white);
  box-shadow: none;
}
#be-content .merrick-story-style > a {
  display: block;
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#be-content .merrick-story-style > a img { display: block; width: 100%; height: 100%; object-fit: cover; }
#be-content .merrick-story-style > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--merrick-post-card-padding);
}
#be-content .merrick-story-style > div > p {
  margin: 0 0 12px;
  color: var(--merrick-color-purple);
  font-size: var(--merrick-post-card-meta-size);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  text-transform: uppercase;
}
#be-content .merrick-story-style :is(h2, h3) {
  margin: 0 0 12px;
  color: var(--merrick-color-charcoal);
  font-size: var(--merrick-post-card-title-size);
  font-weight: 800;
  line-height: 1.3;
}
#be-content .merrick-story-style > div > a {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  color: var(--merrick-color-charcoal);
  font-family: Montserrat, Arial, sans-serif;
  font-size: var(--merrick-post-card-link-size);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
#be-content .merrick-story-style > div > a span { font-family: Arial, sans-serif; font-size: 17px; line-height: 1; }
#be-content .merrick-story-style > div > a:is(:hover, :focus-visible) { color: var(--merrick-color-purple) !important; }
#be-content .merrick-highlights__more-grid,
#be-content .merrick-whats-new__highlight-grid,
#be-content .merrick-highlight-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
#be-content .merrick-story-style[hidden] { display: none; }
@media (max-width: 1000px) {
  #be-content .merrick-highlights__more-grid,
  #be-content .merrick-whats-new__highlight-grid,
  #be-content .merrick-highlight-single__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #be-content .merrick-highlights__more-grid,
  #be-content .merrick-whats-new__highlight-grid,
  #be-content .merrick-highlight-single__related-grid { grid-template-columns: 1fr; }
}
