/* The template itself is intentionally almost unstyled: use Kadence/Core blocks
   inside Theme Elements for the actual design. These rules only normalise the
   dynamic blocks supplied by this plugin. */
.gtd-theme-template { width: 100%; }
.gtd-dynamic-featured-image { margin-left: 0; margin-right: 0; }
.gtd-dynamic-featured-image img,
.gtd-dynamic-field__image { display:block; max-width:100%; height:auto; }
.gtd-dynamic-post-content > :first-child { margin-top: 0; }
.gtd-dynamic-post-content > :last-child { margin-bottom: 0; }

.gtd-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(var(--gtd-related-columns, 3), minmax(0, 1fr));
    gap: 24px;
}
.gtd-related-card { min-width:0; }
.gtd-related-card__image { display:block; margin-bottom:12px; }
.gtd-related-card__image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.gtd-related-card__title { margin:.25em 0; }
.gtd-related-card__title a { color:inherit; text-decoration:none; }
.gtd-related-card__date { font-size:.85em; opacity:.75; }
.gtd-related-card__excerpt { margin-top:.5em; }
@media (max-width: 900px) {
    .gtd-related-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .gtd-related-posts__grid { grid-template-columns: 1fr; }
}


/* SMK Events dynamic meta. Intentionally neutral so Kadence block styles can
   control colour, size and surrounding layout. */
.gtd-event-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
}
.gtd-event-details--stacked {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 9px;
}
.gtd-event-details__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gtd-event-details__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    color: currentColor;
    opacity: .82;
}
@media (max-width: 600px) {
    .gtd-event-details--inline { gap: 8px 18px; }
}