/**
 * New-component styles added in Sprint 5 (Gallery/Lightbox, related-item
 * card link). main.css is untouched — these are genuinely new pieces of
 * UI, not restyles of anything that already existed. Uses the design
 * tokens from tokens.css (Sprint 4) rather than introducing new raw
 * values where an existing token already fits.
 */

/* related-item.php: the whole .amm-div card is now wrapped in a link —
   without this, the default <a> underline would show under the title. */
.tm-related-item-link {
    text-decoration: none;
}

/* testimonial-card.php: optional guest photo + location/visit-date line.
   Only ever rendered when a testimonial has this data (none do today). */
.test-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
}

.test-meta {
    font-size: 14px;
    margin: 0 0 4px;
    opacity: 0.75;
}

/* faq-controls.php: category filter. */
.tm-faq-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

.tm-faq-category {
    padding: 10px 16px;
    border: 1px solid var(--black);
    border-radius: var(--radius-xs);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.tm-faq-no-results {
    text-align: center;
    padding: 20px 0;
}

.tm-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.tm-gallery-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: var(--transition-base);
}

.tm-gallery-item:hover .tm-gallery-thumb {
    transform: scale(1.05);
}

.tm-lightbox .modal-content {
    background-color: transparent;
    border: none;
    align-items: center;
}

.tm-lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-sm);
}

.tm-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

.tm-lightbox-prev,
.tm-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 16px;
}

.tm-lightbox-prev {
    left: 0;
}

.tm-lightbox-next {
    right: 0;
}

@media screen and (max-width: 991px) {
    .tm-gallery-thumb {
        height: 140px;
    }
    .tm-lightbox-prev,
    .tm-lightbox-next {
        font-size: 32px;
    }
}

/* footer-quick-links.php: vertical link list. Link color/no-underline
   already come from the existing `footer a { color: var(--black);
   text-decoration: none; }` rule — this just lays the list out. */
.tm-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-quick-links li {
    margin-bottom: var(--space-10);
}

.tm-quick-links li:last-child {
    margin-bottom: 0;
}