/* Optima Directory dynamic additions */

/* Listing images: website screenshots fill the design's thumbs (top of the page, no zoom offset) */
.od-shot { position: relative; overflow: hidden; }
.od-shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project-card__thumb.od-shot > img { transform: none; }
.project-card:hover .project-card__thumb.od-shot > img { transform: scale(1.04); }
.listing-head__logo.od-shot { padding: 0; }
.listing-head__logo.od-shot > img { max-height: none; }

/* Initials when a listing has no website or both screenshot services fail */
.od-initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--color-red) 0%, var(--color-maroon) 100%);
    color: #fff;
    font-family: "Anton", sans-serif;
    font-size: clamp(34px, 4vw, 60px);
    letter-spacing: 0.02em;
}

/* Category list rows: number, screenshot, text, link */
.list-row { grid-template-columns: auto 150px minmax(0, 1fr) auto; }
.list-row__shot { display: block; width: 150px; aspect-ratio: 16 / 10; border-radius: var(--radius); background: var(--color-ink); }
@media (max-width: 767px) {
    .list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .list-row__num { display: none; }
    .list-row__shot { grid-column: 1 / -1; width: 100%; }
}

/* Business name links keep the heading colour */
.project-card__title a, .list-row__title a, .listing-head__title a { color: inherit; }
.project-card__title a:hover, .list-row__title a:hover { color: var(--color-red); }

/* Category tile count */
.cat-tile__name .od-count { font-size: 0.7em; font-weight: 500; color: var(--color-muted); }

/* Search results grid (server-rendered cards) */
.od-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
.od-results .project-card { opacity: 1; }
.od-results .project-card__thumb { clip-path: none; }
@media (max-width: 991px) { .od-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .od-results { grid-template-columns: minmax(0, 1fr); } }

/* Pagination dots */
.pagination .od-dots { display: inline-grid; place-items: center; min-width: 30px; }

/* Reviews (the design only had an empty state) */
.od-review-summary { margin-bottom: 24px; }
.od-reviews { display: grid; gap: 16px; }
.od-review { padding: 20px 22px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; }
.od-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.od-review__head > div { display: grid; flex: 1; }
.od-review__head small { color: var(--color-muted); }
.od-review__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-red); color: #fff; font-weight: 600; }
.od-review .stars { color: var(--color-orange); white-space: nowrap; }
.od-review p { margin: 0; }
.hours__list li.is-today { color: var(--color-red); font-weight: 600; }

/* Post / page content */
.od-content img, .policy img { max-width: 100%; height: auto; }
.od-article-media { margin-top: 30px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; }
.od-article-media img { width: 100%; height: 100%; object-fit: cover; }
.od-post-faq { margin: 10px 0 34px; }

/* Footer: popular categories + latest articles */
.od-footer-cats a { white-space: nowrap; }
.od-footer-posts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 26px; padding: 0; list-style: none; }
.od-footer-posts a { opacity: .75; }
.od-footer-posts a:hover { opacity: 1; }

/* Blog posts open on a light article hero: dark header links there (the design left them white) */
.single-post .site-header .main-nav a { color: var(--color-heading); }
.single-post .site-header .main-nav a:hover,
.single-post .site-header .main-nav a[aria-current="page"] { color: var(--color-red); }
.single-post .site-header .menu-toggle span { background-color: var(--color-heading); }