/* Custom CSS for Hero Banner and Extended Components */
/* This file contains new styles that extend the extracted PurgeCSS styles */

/* ============================================
   Shared Container (tagvenue-style breakpoints)
   Applied to: pageIntro, grid, faqSection, crossLinks
   ============================================ */

.contentContainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) {
    .contentContainer {
        width: 752px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .contentContainer {
        width: 972px;
    }
}

@media (min-width: 1280px) {
    .contentContainer {
        width: 1200px;
    }
}

/* Override Zola's grid width/padding with shared container */
.grid__ZTY4Y.contentContainer {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) {
    .grid__ZTY4Y.contentContainer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================
   Hero Banner Styles
   ============================================ */

.heroBanner {
    position: relative;
    width: 100%;
    min-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.heroBanner__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.6);
}

/* No overlay - tagvenue uses text-shadow instead */

.heroBanner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
}

/* Breadcrumbs at top on desktop */
.heroBanner__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
    order: 1;
    text-shadow:
        rgba(55, 57, 65, 0.48) 0px 1px 2px,
        rgba(55, 57, 65, 0.32) 0px 2px 4px;
}

.heroBanner__breadcrumbs a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.heroBanner__breadcrumbs a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.heroBanner__breadcrumbs .separator {
    color: rgba(255, 255, 255, 0.8);
}

.heroBanner__breadcrumbs .current {
    color: #fff;
}

/* Text content centered vertically */
.heroBanner__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 0;
    order: 2;
}

.heroBanner__title {
    font-family: "new-spirit", "helvetica-bold", serif;
    font-size: 42px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 16px 0;
    text-shadow:
        rgba(55, 57, 65, 0.48) 0px 1px 2px,
        rgba(55, 57, 65, 0.32) 0px 2px 4px,
        rgba(55, 57, 65, 0.16) 0px 4px 8px;
    max-width: 800px;
}

.heroBanner__subtitle {
    font-family: "circular", helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    text-shadow:
        rgba(55, 57, 65, 0.48) 0px 1px 2px,
        rgba(55, 57, 65, 0.32) 0px 2px 4px,
        rgba(55, 57, 65, 0.16) 0px 4px 8px;
    max-width: 600px;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .heroBanner {
        min-height: 93vh;
    }

    .heroBanner__title {
        font-size: 36px;
    }

    .heroBanner__subtitle {
        font-size: 18px;
    }
}

.lightNav__logoSvg {
    height: 24px;
    width: auto;
}

/* Mobile */
@media (max-width: 768px) {
    .lightNav__logoSvg {
        height: 16px;
    }

    .heroBanner {
        min-height: 93vh;
    }

    .heroBanner__content {
        padding: 16px;
    }

    /* Breadcrumbs move to bottom on mobile */
    .heroBanner__breadcrumbs {
        order: 3;
        padding-top: 24px;
        font-size: 13px;
    }

    .heroBanner__text {
        padding: 24px 0;
        order: 1;
    }

    .heroBanner__title {
        font-size: 32px;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .heroBanner__subtitle {
        font-size: 20px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .heroBanner {
        min-height: 93vh;
    }

    .heroBanner__title {
        font-size: 28px;
    }

    .heroBanner__subtitle {
        font-size: 18px;
    }

    .heroBanner__breadcrumbs {
        font-size: 12px;
        gap: 6px;
    }
}

/* ============================================
   Hero Search Form (Zola-style pill search bar)
   ============================================ */

.heroSearch {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 100px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 6px 6px 6px 20px;
    margin-top: 28px;
    max-width: 560px;
    width: 100%;
    gap: 0;
}

.heroSearch__field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.heroSearch__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #767676;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.heroSearch__input {
    border: none;
    outline: none;
    background: transparent;
    font-family: "circular", helvetica, sans-serif;
    font-size: 15px;
    color: #21242c;
    width: 100%;
    min-width: 0;
    padding: 8px 0;
}

.heroSearch__input::placeholder {
    color: #9b9b9b;
}

.heroSearch__input--guests {
    -moz-appearance: textfield;
}
.heroSearch__input--guests::-webkit-outer-spin-button,
.heroSearch__input--guests::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.heroSearch__divider {
    width: 1px;
    height: 28px;
    background: #e0e0e0;
    flex-shrink: 0;
    margin: 0 12px;
}

.heroSearch__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #21242c;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.18s ease,
        transform 0.12s ease;
    padding: 0;
}

.heroSearch__btn:hover {
    background: #3d4249;
    transform: scale(1.04);
}

.heroSearch__btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke: #fff;
}

@media (max-width: 480px) {
    .heroSearch {
        max-width: 100%;
        padding: 4px 4px 4px 16px;
    }

    .heroSearch__divider {
        margin: 0 8px;
    }

    .heroSearch__input {
        font-size: 14px;
    }

    .heroSearch__btn {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   Cross-Links Section Styles
   ============================================ */

.crossLinks {
    background-color: #f8f8f8;
    padding: 48px 0;
}

.crossLinks__container {
    /* width/margin/padding handled by .contentContainer */
}

.crossLinks__section {
    margin-bottom: 40px;
}

.crossLinks__section:last-child {
    margin-bottom: 0;
}

.crossLinks__heading {
    font-family: "new-spirit", "helvetica-bold", serif;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.crossLinks__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Zola-style rounded pill buttons */
.crossLinks__link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid #0e0e0e;
    border-radius: 100px;
    color: #0e0e0e;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.crossLinks__link:hover {
    background-color: #0e0e0e;
    color: #fff;
    text-decoration: none;
}

.crossLinks__link:focus {
    outline: 2px solid #0e0e0e;
    outline-offset: 2px;
}

/* Image Grid for "People also search for" - CSS Grid with auto-fit (matches tagvenue) */
.crossLinks__imageGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.crossLinks__imageLink {
    display: flex;
    max-width: 450px;
    align-items: center;
    padding-right: 8px;
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 8px;
    box-shadow:
        0 2px 4px 0 rgba(37, 39, 44, 0.06),
        0 2px 4px 0 rgba(37, 39, 44, 0.06);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease;
}

.crossLinks__imageLink:hover {
    box-shadow:
        0 4px 8px 0 rgba(37, 39, 44, 0.12),
        0 2px 4px 0 rgba(37, 39, 44, 0.08);
}

.crossLinks__thumbnail {
    width: 100px;
    height: 64px;
    margin-right: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Color swatches for related searches without images */
.crossLinks__thumbnail--color {
    border-radius: 4px;
}
.crossLinks__thumbnail--affordable {
    background: linear-gradient(135deg, #4caf87, #2e7d5e);
}
.crossLinks__thumbnail--small {
    background: linear-gradient(135deg, #7986cb, #4a5ab8);
}
.crossLinks__thumbnail--outdoor {
    background: linear-gradient(135deg, #66bb6a, #388e3c);
}
.crossLinks__thumbnail--unique {
    background: linear-gradient(135deg, #ef7c6a, #c0392b);
}
.crossLinks__thumbnail--barn {
    background: linear-gradient(135deg, #a1887f, #6d4c41);
}
.crossLinks__thumbnail--rustic {
    background: linear-gradient(135deg, #bcaaa4, #795548);
}
.crossLinks__thumbnail--hotel {
    background: linear-gradient(135deg, #78909c, #455a64);
}
.crossLinks__thumbnail--all-inclusive {
    background: linear-gradient(135deg, #ffb74d, #f57c00);
}
.crossLinks__thumbnail--garden {
    background: linear-gradient(135deg, #aed581, #689f38);
}
.crossLinks__thumbnail--indoor {
    background: linear-gradient(135deg, #90caf9, #1976d2);
}
.crossLinks__thumbnail--luxury {
    background: linear-gradient(135deg, #d4ac6a, #9c7c3c);
}
.crossLinks__thumbnail--beach {
    background: linear-gradient(135deg, #4fc3f7, #0288d1);
}
.crossLinks__thumbnail--waterfront {
    background: linear-gradient(135deg, #26c6da, #00838f);
}
.crossLinks__thumbnail--winery {
    background: linear-gradient(135deg, #ce93d8, #7b1fa2);
}

.crossLinks__imageText {
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #373941;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Show More button */
.crossLinks__showMore {
    display: none;
    margin-top: 16px;
    padding: 0;
    background: none;
    border: none;
    color: #00a287;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.crossLinks__showMore:hover {
    color: #034f42;
    text-decoration: underline;
}

/* Desktop (>768px): show max 12 items, hide 13+ */
.crossLinks__imageGrid .crossLinks__imageLink:nth-child(n + 13) {
    display: none;
}

.crossLinks__imageGrid--expanded .crossLinks__imageLink:nth-child(n + 13) {
    display: flex;
}

/* Show button only when there are 13+ items (items actually hidden) */
.crossLinks__section:has(.crossLinks__imageLink:nth-child(13))
    .crossLinks__showMore {
    display: block;
}

/* Mobile (≤768px): show max 8 items, hide 9+ */
@media (max-width: 768px) {
    .crossLinks__imageGrid .crossLinks__imageLink:nth-child(n + 9) {
        display: none;
    }

    .crossLinks__imageGrid--expanded .crossLinks__imageLink:nth-child(n + 9) {
        display: flex;
    }

    /* Show button when there are 9+ items */
    .crossLinks__section:has(.crossLinks__imageLink:nth-child(9))
        .crossLinks__showMore {
        display: block;
    }
}

/* ============================================
   Cross-Links Responsive Styles
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .crossLinks {
        padding: 40px 0;
    }

    .crossLinks__heading {
        font-size: 22px;
    }

    .crossLinks__section {
        margin-bottom: 32px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .crossLinks {
        padding: 32px 0;
    }

    .crossLinks__heading {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .crossLinks__section {
        margin-bottom: 28px;
    }

    .crossLinks__grid {
        gap: 10px;
    }

    .crossLinks__link {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .crossLinks {
        padding: 24px 0;
    }

    .crossLinks__heading {
        font-size: 18px;
    }

    .crossLinks__section {
        margin-bottom: 24px;
    }

    .crossLinks__grid {
        gap: 8px;
    }

    .crossLinks__link {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ============================================
   FAQ Accordion Section Styles
   ============================================ */

.faqSection {
    background-color: #fff;
    padding: 40px 0;
}

.faqSection__container {
    /* width/margin/padding handled by .contentContainer */
}

.faqSection__image {
    /* margin-bottom: 32px; */
    overflow: hidden;
    width: 100%;
}

.faqSection__image img {
    width: 100%;
    height: 250px;
    max-height: 450px;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

.faqSection__content {
    display: flex;
    flex-direction: column;
}

.faqSection__title {
    font-family: "new-spirit", "helvetica-bold", serif;
    font-size: 24px;
    font-weight: 500;
    color: #373941;
    margin: 20px 0 24px 0;
    padding: 0;
    line-height: 1.3;
}

/* Accordion Item */
.accordion {
    /* No border - content has the border */
}

.accordion__trigger {
    background: none;
    border: none;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 20px 4px 20px 12px;
    font-family: "circular", helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #373941;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion__trigger:hover {
    background-color: #f7f7f8;
}

.accordion__trigger:focus {
    outline: 2px solid #0e0e0e;
    outline-offset: -2px;
}

.accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.accordion__icon svg {
    width: 24px;
    height: 24px;
}

.accordion__content {
    display: grid;
    overflow: hidden;
    transition:
        grid-template-rows 0.3s ease,
        opacity 0.3s ease;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0 0 8px;
    border-bottom: 1px solid #f1f2f3;
}

.accordion__content > div {
    overflow: hidden;
}

.accordion__content-inner {
    padding: 8px 0 20px 12px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: #373941;
}

/* Accordion content typography - explicit sizing for all elements */
.accordion__content-inner p,
.accordion__content-inner ul,
.accordion__content-inner ol,
.accordion__content-inner li {
    font-size: 16px;
    line-height: 1.5;
}

.accordion__content-inner p {
    margin: 0 0 12px 0;
}

.accordion__content-inner p:last-child {
    margin-bottom: 0;
}

.accordion__content-inner ul,
.accordion__content-inner ol {
    margin: 0 0 12px 0;
    padding-left: 24px;
    list-style-position: outside;
}

.accordion__content-inner ul {
    list-style-type: disc;
}

.accordion__content-inner ol {
    list-style-type: decimal;
}

.accordion__content-inner li {
    margin-bottom: 4px;
}

.accordion__content-inner strong {
    font-weight: 600;
}

.accordion__content-inner a {
    color: #0e0e0e;
    text-decoration: underline;
}

.accordion__content-inner a:hover {
    text-decoration: none;
}

/* Open state */
.accordion--open .accordion__content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.accordion--open .accordion__trigger {
    background-color: #f7f7f8;
}

.accordion--open .accordion__icon {
    transform: rotate(180deg);
}

/* ============================================
   FAQ Accordion Responsive Styles
   ============================================ */

/* Tablet - image gets taller */
@media (min-width: 768px) {
    .faqSection__image {
        height: 100%;
        margin-bottom: 0;
    }
}

/* Desktop - switch to 2-column grid */
@media (min-width: 1024px) {
    .faqSection__container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 40px;
        align-items: start;
    }

    .faqSection__image img {
        aspect-ratio: 1 / 1;
        height: 100%;
        max-height: 400px;
    }

    .faqSection__title {
        min-width: 300px;
    }
}

/* Large desktop - narrower image column */
@media (min-width: 1440px) {
    .faqSection__container {
        grid-template-columns: 1fr 3fr;
    }

    .faqSection__image img {
        max-height: 450px;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .faqSection {
        padding: 32px 0;
    }

    .faqSection__title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .accordion__trigger {
        padding: 16px 4px 16px 8px;
    }

    .accordion__content-inner {
        padding: 8px 8px 16px 8px;
        font-size: 15px;
    }

    .accordion__content-inner p,
    .accordion__content-inner ul,
    .accordion__content-inner ol,
    .accordion__content-inner li {
        font-size: 15px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .faqSection {
        padding: 24px 0;
    }

    .faqSection__title {
        font-size: 20px;
    }

    .accordion__trigger {
        padding: 14px 4px 14px 4px;
        grid-template-columns: 1fr 32px;
    }

    .accordion__icon svg {
        width: 20px;
        height: 20px;
    }

    .accordion__content-inner {
        font-size: 14px;
    }

    .accordion__content-inner p,
    .accordion__content-inner ul,
    .accordion__content-inner ol,
    .accordion__content-inner li {
        font-size: 14px;
    }
}

/* ============================================
   Result Grid - Fluid cards (tagvenue style)
   2 columns on desktop, 1 column on mobile/tablet.
   Uses calc() percentage widths like tagvenue.
   ============================================ */

.resultGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* Desktop (≥992px): 2 columns */
.resultGrid > .resultCard {
    width: calc(50% - 12px);
    margin-bottom: 24px;
}

/* Tablet (768-991px): single column */
@media (max-width: 991px) {
    .resultGrid > .resultCard {
        width: 100%;
    }
}

/* Mobile: single column, tighter spacing */
@media (max-width: 767px) {
    .resultGrid > .resultCard {
        margin-bottom: 16px;
    }
}

/* ============================================
   Result Card - Compact vertical card (tagvenue style)
   ============================================ */

.resultCard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.resultCard:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* Prevent any text underline on hover */
.resultCard *,
.resultCard:hover * {
    text-decoration: none;
}

/* Image container - 3:2 aspect ratio like tagvenue */
.resultCard__imageWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.resultCard__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.resultCard:hover .resultCard__image {
    transform: scale(1.02);
}

.resultCard__image--placeholder {
    background-color: #e8e4e0;
}

/* Badge overlay (Quick responder) */
.resultCard__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
}

/* Price overlay */
.resultCard__price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

.resultCard__priceIcon {
    width: 16px;
    height: 16px;
    color: #fff;
    flex-shrink: 0;
}

.resultCard__priceAmount {
    font-family: "circular", helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Content section */
.resultCard__content {
    display: flex;
    flex-direction: column;
    padding: 12px;
    flex: 1;
}

/* Header row: name + rating */
.resultCard__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.resultCard__metaLeft {
    flex: 1;
    min-width: 0;
}
.resultCard__metaRight {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.resultCard__capacity {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    color: #373941;
    white-space: nowrap;
}
.resultCard__capacity svg {
    width: 14px;
    height: 14px;
    color: #666;
    flex-shrink: 0;
}

.resultCard__name {
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #373941;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rating */
.resultCard__rating {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.resultCard__stars {
    display: flex;
    gap: 0;
}

.resultCard__stars svg {
    width: 14px;
    height: 14px;
    color: #ffc107;
    fill: currentColor;
}

.resultCard__ratingValue {
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #373941;
}

.resultCard__reviewCount {
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    color: #666;
}

/* Location */
.resultCard__location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    color: #666;
}

.resultCard__location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Details list (capacity, attributes) */
.resultCard__details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.resultCard__detail {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    color: #373941;
}

.resultCard__detail svg {
    width: 14px;
    height: 14px;
    color: #666;
    flex-shrink: 0;
}

/* Tags row */
.resultCard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.resultCard__tag {
    padding: 2px 6px;
    background: #f3f3f3;
    border-radius: 3px;
    font-family: "circular", helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #373941;
}

/* Grows to fill remaining card height, pinning CTA to bottom */
.resultCard__body {
    flex: 1;
    margin-bottom: 12px;
}

/* No testimonial — give the description more room */
.resultCard__body:not(:has(.resultCard__testimonial)) .resultCard__description {
    max-height: 160px;
}

/* Description — scrollable with fade cues */
.resultCard__description {
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin: 0;
    overflow-y: auto;
    max-height: 80px;
    scrollbar-width: none; /* Firefox */
}

.resultCard__description::-webkit-scrollbar {
    display: none;
}

/* Fade cues — toggled via JS based on scroll position */
.resultCard__description[data-fade="bottom"] {
    -webkit-mask-image: linear-gradient(
        black calc(100% - 20px),
        transparent 100%
    );
    mask-image: linear-gradient(black calc(100% - 20px), transparent 100%);
}

.resultCard__description[data-fade="both"] {
    -webkit-mask-image: linear-gradient(
        transparent 0,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    );
    mask-image: linear-gradient(
        transparent 0,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    );
}

.resultCard__description[data-fade="top"] {
    -webkit-mask-image: linear-gradient(transparent 0, black 20px, black 100%);
    mask-image: linear-gradient(transparent 0, black 20px, black 100%);
}

/* CTA button - Zola pill style, full width, outline variant */
.resultCard__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #0e0e0e;
    border-radius: 100px;
    color: #0e0e0e;
    font-family: "circular", helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.resultCard:hover .resultCard__cta {
    background-color: #0e0e0e;
    color: #fff;
}

/* ============================================
   "See all" CTA button (after results grid)
   ============================================ */

.seeAll {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.seeAll__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background-color: #0e0e0e;
    border: 2px solid #0e0e0e;
    border-radius: 100px;
    color: #fff;
    font-family: "circular", helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.seeAll__button:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
    text-decoration: none;
}

.seeAll__button:focus-visible {
    outline: 2px solid #0e0e0e;
    outline-offset: 2px;
}

/* ============================================
   Page Intro Section (SEO headline + description)
   ============================================ */

.pageIntro {
    padding-top: 32px;
    padding-bottom: 20px;
}

.pageIntro__headline {
    font-family: "new-spirit", georgia, serif;
    font-size: 28px;
    font-weight: 500;
    color: #0e0e0e;
    margin: 0 0 12px;
}

.pageIntro__description {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
}

@media (max-width: 767px) {
    .pageIntro__headline {
        font-size: 22px;
    }

    .pageIntro__description {
        font-size: 15px;
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .resultCard__content {
        padding: 10px;
    }

    .resultCard__name {
        font-size: 13px;
    }

    .resultCard__details {
        gap: 6px;
    }

    .resultCard__detail {
        font-size: 14px;
    }
}

/* ============================================
   Sidebar Filters
   ============================================ */

/* Sidebar filter sections — scoped to desktop sidebar to avoid affecting footer accordion */
.desktopFilters__YmY3N .ecsep592 {
    border-bottom: solid 1px #b7b7b7;
}

/* Trigger button: flex row with chevron on left */
.desktopFilters__YmY3N .ecsep593 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
}

.desktopFilters__YmY3N .ecsep594 {
    font-weight: 700;
    font-size: 16px;
}

.desktopFilters__YmY3N .ecsep593:hover .ecsep594 {
    text-decoration: underline;
}

/* Checkbox option links — reuse Zola's field-wrapper classes */
.desktopFilters__YmY3N .field-wrapper {
    display: block;
    text-decoration: none;
    padding: 4px 0;
    color: inherit;
}

.desktopFilters__YmY3N .field-wrapper:hover .field-wrapper-checkbox {
    text-decoration: underline;
    cursor: pointer;
}

.desktopFilters__YmY3N .selector-icon-wrapper--checked {
    color: #fff;
}

/* Testimonial on vendor cards — matches Zola production styling */
.resultCard__testimonial {
    margin: 8px 0 6px;
    padding: 10px 14px;
    background: #f3f3f3;
    border-radius: 12px;
}
.resultCard__testimonialText {
    font-size: 14px;
    line-height: 20px;
    color: #4a4a4a;
    font-style: normal;
    margin: 0;
}
.resultCard__testimonialAuthor {
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 600;
    white-space: nowrap;
}

/* Freshness indicator — signals page recency to users and crawlers */
.freshness-indicator {
    background-color: #f8f8f8;
    color: #b0b1b8;
    font-size: 12px;
    line-height: 1.5;
    padding: 0 0 48px;
}
.freshness-indicator__updated,
.freshness-indicator__info {
    color: #b0b1b8;
}
.freshness-indicator__updated {
    font-weight: 600;
    margin: 0 0 4px 0;
}
.freshness-indicator__info {
    margin: 0;
}

/* Footer accordion chevron transition */
footer .ecsep593 svg {
    transition: transform 250ms ease;
}