/* ============================================================
   BuildX -- ADU Home Tour Page Styles
   ============================================================ */

/* ── Fonts ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


/* ════════════════════════════════════════════════════════════════
   SECTION 1 -- HERO
   ════════════════════════════════════════════════════════════════ */

.tour-hero {
    padding-top: 48px;
    padding-bottom: 48px;
}

.tour-hero__title {
    font-family: 'Montserrat', sans-serif;
    /* clamp, never a fixed cap: Aaron's display is 2560 wide and a fixed size
       leaves the headline looking lost up there. Scales 2rem -> 3.5rem. */
    font-size: clamp(2rem, 1.4rem + 1.7vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: #000000;
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   HERO DECK -- the two facts that decide the visit, directly under the H1
   (2026-09-05, Buz's "pricing front and center" guidance).

   Three chips: specs, price, schedule. The price chip is visually promoted --
   gold rule, black type, heavier weight -- because it is the one number a
   visitor is actually shopping on. Chips wrap rather than shrink, so the price
   never truncates on a narrow screen.
   -------------------------------------------------------------------------- */
.tour-hero__deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px 12px;
    margin: 0 auto 30px;
    padding: 0;
    max-width: 1020px;
}

.tour-hero__deck-item {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9375rem, 0.86rem + 0.22vw, 1.0625rem);
    font-weight: 600;
    line-height: 1.35;
    color: #333333;
    background: #F5F5F5;
    border: 1px solid #E4E4E4;
    border-radius: 999px;
    padding: 9px 20px;
    white-space: nowrap;
}

.tour-hero__deck-item--price {
    color: #000000;
    background: #FFF8EC;
    border-color: var(--bx-gold, #F5A623);
    box-shadow: 0 1px 0 rgba(245, 166, 35, 0.35), 0 4px 14px rgba(245, 166, 35, 0.14);
}

.tour-hero__deck-item--price strong {
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-right: 6px;
}

@media (max-width: 560px) {
    /* Below this the pills stop being pills -- a nowrap price chip would push
       the page into horizontal scroll. Stack them full width instead. */
    .tour-hero__deck { flex-direction: column; gap: 8px; }
    .tour-hero__deck-item {
        white-space: normal;
        justify-content: center;
        text-align: center;
        border-radius: 14px;
    }
}

/* --------------------------------------------------------------------------
   PRICE BLOCK -- the anchor of the details card.
   Sits directly under the address, above everything else in the column.
   -------------------------------------------------------------------------- */
.tour-price {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
    border: 1px solid #EFE3CC;
    border-left: 4px solid var(--bx-gold, #F5A623);
    border-radius: 16px;
    padding: 18px 22px 16px;
    margin: 0 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.tour-price__eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #8A6D3B;
    margin-bottom: 6px;
}

.tour-price__figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.05;
}

.tour-price__num {
    font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.625rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #000000;
    font-variant-numeric: tabular-nums;
}

.tour-price__dash {
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.875rem);
    font-weight: 500;
    color: #B9B9B9;
    padding: 0 2px;
}

.tour-price__qualifier {
    margin: 6px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
}

.tour-price__foot {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid #F0E7D6;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B6B6B;
}

.tour-price__foot svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--bx-gold, #F5A623);
}

/* --------------------------------------------------------------------------
   SPEC STRIP -- icon + value + label, four across, under the price.
   Icons are inline SVG at 1.5px stroke, currentColor. No emojis.
   -------------------------------------------------------------------------- */
.tour-specstrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 6px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 14px;
}

.tour-specstrip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 0 4px;
    border-right: 1px solid #EFEFEF;
}

.tour-specstrip__item:last-child { border-right: 0; }

.tour-specstrip__icon {
    color: var(--bx-gold, #F5A623);
    margin-bottom: 2px;
}

.tour-specstrip__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: #000000;
    font-variant-numeric: tabular-nums;
}

.tour-specstrip__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B6B6B;
    line-height: 1.25;
}

@media (max-width: 420px) {
    .tour-specstrip { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
    .tour-specstrip__item:nth-child(2n) { border-right: 0; }
}

/* Address as a directions link -- it was plain text, which wasted the single
   most actionable line on the page. */
.tour-hero__address-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.18s;
}

.tour-hero__address-link:hover .tour-hero__address {
    color: var(--bx-gold-deep, #E09510);
}

.tour-hero__address-pin {
    flex: 0 0 auto;
    margin-top: 5px;
    color: var(--bx-gold, #F5A623);
}

/* Watch button -- same size as H1, black */
.tour-hero__watch-btn {
    display: block;
    margin: 0 auto 32px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.tour-hero__watch-btn:hover {
    opacity: 0.7;
}

.tour-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: start;
}

.tour-hero__image-col {
    position: relative;
}

/* ── Hero Carousel ────────────────────────────────────────── */
.tour-hero__carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 30px;
    overflow: hidden;
    background: #E8E8E8;
}

.tour-hero__carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tour-hero__carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 0;
}

.tour-hero__carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.tour-hero__carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Carousel arrows */
.tour-hero__carousel-prev,
.tour-hero__carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}

.tour-hero__carousel-prev:hover,
.tour-hero__carousel-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.tour-hero__carousel-prev {
    left: 12px;
}

.tour-hero__carousel-next {
    right: 12px;
}

/* Carousel dots */
.tour-hero__carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
}

.tour-hero__carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.tour-hero__carousel-dot.active {
    background: #F5A623;
    border-color: #F5A623;
}

.tour-hero__carousel-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.tour-hero__carousel-dot.active:hover {
    background: #F5A623;
}

/* ── Hero Details Column ──────────────────────────────────── */
.tour-hero__details-col {
    /* Was flat #F5F5F5. A subtle top-down wash plus a real border gives the
       card an edge at 2560px, where a flat gray panel reads as an unstyled
       block rather than a deliberate surface. */
    background: linear-gradient(180deg, #FAFAFA 0%, #F2F2F2 100%);
    border: 1px solid #E7E7E7;
    border-radius: 24px;
    padding: 30px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(0, 0, 0, 0.05);
}

.tour-hero__address {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    margin: 0;
    line-height: 1.25;
    transition: color 0.18s;
}

.tour-hero__desc {
    font-size: 1rem;
    line-height: 1.65;
    color: #444;
    margin-bottom: 24px;
}

.tour-hero__desc em {
    font-style: italic;
}

.tour-hero__info-block {
    margin-bottom: 20px;
    padding-left: 0;
}

.tour-hero__info-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.tour-hero__info-block ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.tour-hero__info-block li {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 4px;
}

.tour-hero__info-block p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 4px;
}

.tour-hero__note {
    font-size: 0.9375rem;
    color: #333;
    line-height: 1.55;
    margin-bottom: 16px;
}

.tour-hero__no-pitch {
    font-size: 0.875rem;
    color: #595959;
    margin-bottom: 20px;
}

.tour-hero__cta-link {
    display: inline-block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1a73e8;
    text-decoration: underline;
    transition: color 0.2s;
}

.tour-hero__cta-link:hover {
    color: #1558b0;
}

/* Hero Bottom -- Brand + Stars + Tagline */
.tour-hero__bottom {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #E8E8E8;
    text-align: center;
}

.tour-hero__brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tour-hero__brand-logo {
    background: #000000;
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.tour-hero__brand-logo img {
    height: 30px;
    width: auto;
}

.tour-hero__brand-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #555;
}

.tour-hero__stars {
    display: flex;
    gap: 2px;
}

.tour-hero__stars .star {
    color: #F5A623;
    font-size: 1.25rem;
}

.tour-hero__review-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #595959;
}

.tour-hero__tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: #555;
    font-style: italic;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Below-hero 2-column row: Private Showing callout (left) + brand/reviews (right) */
.tour-hero__bottom--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    text-align: left;
}

.tour-hero__brand-col {
    text-align: center;
}

.tour-hero__brand-col .tour-hero__tagline {
    margin-top: 16px;
}

/* Private ADU Showing callout box */
.tour-private-showing {
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 28px 28px 30px;
}

.tour-private-showing__eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: #F5A623;
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

.tour-private-showing__title {
    font-size: 1.375rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 10px;
}

.tour-private-showing__desc {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.55;
    margin: 0 0 20px;
}

.tour-private-showing__btn {
    display: inline-block;
    background: #F5A623;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #F5A623;
    transition: background 0.2s, color 0.2s;
}

.tour-private-showing__btn:hover {
    background: #fff;
    color: #C97E0B;
}

@media (max-width: 768px) {
    .tour-hero__bottom--two-col {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .tour-private-showing {
        text-align: center;
    }
}


/* ════════════════════════════════════════════════════════════════
   SECTION 2 -- FLOOR PLAN
   ════════════════════════════════════════════════════════════════ */

.tour-floorplan .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-floorplan .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

/* Two-column layout for floor plan + Matterport */
.tour-floorplan__two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    position: relative;
    margin-bottom: 32px;
    align-items: start;
}

.tour-floorplan__plan-col {
    position: relative;
}

.tour-floorplan__image-wrap {
    position: relative;
    border-radius: 8px;
    overflow: visible;
}

.tour-floorplan__image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Customizable badge -- top-right of floor plan image */
.tour-floorplan__badge {
    position: absolute;
    top: 20px;
    right: -30px;
    z-index: 10;
    background: #F5A623;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 14px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
}

/* Matterport column */
.tour-floorplan__matterport-col {
    display: flex;
    flex-direction: column;
}

.tour-floorplan__matterport-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tour-floorplan__matterport-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tour-floorplan__matterport-caption {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #000000;
    margin-top: 16px;
    line-height: 1.5;
}

.tour-floorplan__matterport-tagline {
    font-size: 0.875rem;
    color: #555;
    font-style: italic;
    margin-top: 8px;
    line-height: 1.5;
}

.tour-floorplan__matterport-customizable {
    font-size: 0.875rem;
    font-weight: 700;
    color: #F5A623;
    margin-top: 8px;
}

/* Specs box */
.tour-floorplan__specs {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.tour-floorplan__specs-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E8E8E8;
}

.tour-floorplan__specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
}

/* Column count follows the SPEC COUNT (2026-09-07). Set by PHP, which counts
   the rows it is about to print. repeat(3) was fine for 3, 5 or 6 specs and
   orphaned a lone cell on a second row at 4 -- which is exactly what pulling
   the price row produced. These two modifiers keep the grid balanced whichever
   optional rows a tour carries. Desktop only: the responsive rules below
   already collapse to 2 and then 1 column, and they must keep winning. */
.tour-floorplan__specs-grid--cols2 {
    grid-template-columns: repeat(2, 1fr);
}

.tour-floorplan__specs-grid--cols3 {
    grid-template-columns: repeat(3, 1fr);
}

.tour-floorplan__spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tour-floorplan__spec-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
}

.tour-floorplan__spec-label {
    font-size: 0.8125rem;
    color: #595959;
    font-weight: 500;
}

/* The price repeats here, at the bottom of the floor-plan specs, because that
   is the second place a visitor asks "what does this cost" -- right after they
   have looked at the plan. Gold-washed so it reads as the answer, not as one
   more spec. Rendered only when price_low is set in home-tour.json. */
.tour-floorplan__spec--price {
    grid-column: 1 / -1;
    background: #FFF8EC;
    border: 1px solid #F0DFC0;
    border-left: 4px solid var(--bx-gold, #F5A623);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 4px;
}

.tour-floorplan__spec--price .tour-floorplan__spec-value {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tour-floorplan__spec--price .tour-floorplan__spec-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #8A6D3B;
}

.tour-floorplan__fullsize-link {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #F5A623;
    transition: color 0.2s;
}

.tour-floorplan__fullsize-link:hover {
    color: #E09510;
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 3 -- FEATURES TWO-COLUMN
   ════════════════════════════════════════════════════════════════ */

.tour-features {
    padding-top: 60px;
    padding-bottom: 60px;
}

.tour-features .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-features .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

.tour-features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.tour-features__item {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}

.tour-features__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #FFF8EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-features__text h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.tour-features__text p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #555;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 4 -- LOCATION
   ════════════════════════════════════════════════════════════════ */

.tour-location .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-location .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

.tour-location__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.tour-location__map-embed {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tour-location__map-embed iframe {
    display: block;
    width: 100%;
}

/* Location photo */
.tour-location__photo {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.tour-location__photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.tour-location__address {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.tour-location__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.tour-location__info-block {
    margin-bottom: 20px;
}

.tour-location__info-block h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.tour-location__info-block p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 4px;
}

.tour-location__directions-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F5A623;
    margin-top: 4px;
    transition: color 0.2s;
}

.tour-location__directions-link:hover {
    color: #E09510;
    text-decoration: underline;
}

.tour-location__cta-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #F5A623;
    transition: color 0.2s;
}

.tour-location__cta-link:hover {
    color: #E09510;
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 5 -- TESTIMONIALS
   ════════════════════════════════════════════════════════════════ */

.tour-testimonials {
    padding-top: 60px;
    padding-bottom: 60px;
}

.tour-testimonials__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
    line-height: 1.35;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.tour-testimonials__subtitle {
    font-size: 1rem;
    color: #595959;
    margin-bottom: 40px;
}

.tour-testimonials__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.tour-testimonials__card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tour-testimonials__quote {
    position: relative;
    margin-bottom: 24px;
}

.tour-testimonials__quote-icon {
    position: absolute;
    top: -8px;
    left: -4px;
    z-index: 0;
}

.tour-testimonials__quote p {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #444;
    padding-top: 20px;
}

.tour-testimonials__author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid #F0F0F0;
}

.tour-testimonials__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.tour-testimonials__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.tour-testimonials__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #000000;
}

.tour-testimonials__role {
    display: block;
    font-size: 0.8125rem;
    color: #595959;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 6 -- REVIEWS WIDGET
   ════════════════════════════════════════════════════════════════ */

.tour-reviews .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-reviews .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

.tour-reviews__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px 16px;
    scrollbar-width: thin;
    scrollbar-color: #D0D0D0 transparent;
}

.tour-reviews__scroller::-webkit-scrollbar {
    height: 6px;
}

.tour-reviews__scroller::-webkit-scrollbar-track {
    background: transparent;
}

.tour-reviews__scroller::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 3px;
}

.tour-reviews__track {
    display: flex;
    gap: 20px;
    min-width: max-content;
}

.tour-reviews__card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 24px;
    width: 300px;
    min-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.tour-reviews__card--summary {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.tour-reviews__card-logo {
    margin-bottom: 4px;
}

.tour-reviews__card-logo img {
    height: 28px;
    width: auto;
}

.tour-reviews__card-source {
    font-size: 0.8125rem;
    color: #595959;
    margin-bottom: 8px;
}

.tour-reviews__card-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-reviews__card-score {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
}

.tour-reviews__card--summary .tour-reviews__card-stars {
    color: #F5A623;
    font-size: 1.125rem;
    letter-spacing: 2px;
}

.tour-reviews__card-count {
    font-size: 0.8125rem;
    color: #595959;
}

.tour-reviews__card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #F5A623;
    transition: color 0.2s;
}

.tour-reviews__card-link:hover {
    color: #E09510;
    text-decoration: underline;
}

/* Individual review cards */
.tour-reviews__card:not(.tour-reviews__card--summary) .tour-reviews__card-stars {
    color: #F5A623;
    font-size: 0.9375rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.tour-reviews__card-text {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 16px;
    flex: 1;
}

.tour-reviews__card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}

.tour-reviews__card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F5A623;
    color: #000;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tour-reviews__card-author strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #000000;
}

.tour-reviews__card-author span {
    display: block;
    font-size: 0.6875rem;
    color: #595959;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 7 -- ADU PLANS
   ════════════════════════════════════════════════════════════════ */

.tour-plans .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-plans .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0;
}

.tour-plans__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 20px;
}

.tour-plans__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.tour-plans__card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tour-plans__card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Plan card images */
.tour-plans__card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.tour-plans__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tour-plans__price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #F5A623;
    margin-top: 4px;
}

.tour-plans__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 8 -- MEET THE BUILDER
   ════════════════════════════════════════════════════════════════ */

.tour-builder {
    padding-top: 60px;
    padding-bottom: 60px;
}

.tour-builder .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

.tour-builder__content {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.tour-builder__avatar {
    flex-shrink: 0;
}

.tour-builder__avatar-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 5px solid #000;
}

.tour-builder__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.tour-builder__bio p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #555;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 9 -- FAQ
   ════════════════════════════════════════════════════════════════ */

.tour-faq {
    padding-top: 60px;
    padding-bottom: 80px;
}

.tour-faq .section__label {
    border-bottom: 2px solid #E0E0E0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.tour-faq .section__title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 32px;
}

.tour-faq .faq__item {
    border-bottom: 1px solid #E0E0E0;
}

.tour-faq .faq__item:first-child {
    border-top: 1px solid #E0E0E0;
}

.tour-faq .faq__question {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 20px 0;
}

.tour-faq .faq__question::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 16px;
}

.tour-faq .faq__item.active .faq__question::after {
    transform: rotate(-135deg);
}

.tour-faq .faq__answer-inner {
    padding: 0 0 20px;
}

.tour-faq .faq__answer-inner p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #555;
}

.tour-faq .faq__answer-inner a {
    color: #F5A623;
    text-decoration: underline;
}

.tour-faq .faq__answer-inner a:hover {
    color: #E09510;
}

/* FAQ active state -- light gray background */
.tour-faq .faq__item.active {
    background: #F5F5F5;
    padding: 0 20px;
    margin: 0 -20px;
    border-radius: 4px;
}

.tour-faq .faq__item.active .faq__question {
    font-weight: 700;
}

/* ── Badge Color Variants (ADU Plan Cards) ────────────────── */
.badge--green {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}

.badge--blue {
    background: #E3F2FD;
    color: #1565C0;
    border: 1px solid #90CAF9;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}

/* Gold filled buttons (not outline) */
.btn--gold {
    display: inline-block;
    background: #F5A623;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 30px;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.2s;
}

.btn--gold:hover {
    background: #E09510;
    color: #FFF;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .tour-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .tour-plans__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tour-features__grid {
        gap: 40px;
    }

    .tour-floorplan__two-col {
        gap: 30px;
    }

    .tour-floorplan__badge {
        width: 120px;
        height: 120px;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    /* Hero */
    .tour-hero__title {
        font-size: 1.875rem;
    }

    .tour-hero__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tour-hero__brand-row {
        flex-direction: column;
        gap: 10px;
    }

    .tour-hero__tagline {
        font-size: 1rem;
    }

    /* Carousel */
    .tour-hero__carousel-prev,
    .tour-hero__carousel-next {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .tour-hero__carousel-prev {
        left: 8px;
    }

    .tour-hero__carousel-next {
        right: 8px;
    }

    /* Floor Plan */
    .tour-floorplan__two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tour-floorplan__badge {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: -20px auto 0;
        z-index: 10;
        width: 120px;
        height: 120px;
        font-size: 0.6875rem;
        padding: 10px;
    }

    .tour-floorplan__specs-grid,
    .tour-floorplan__specs-grid--cols2,
    .tour-floorplan__specs-grid--cols3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 24px;
    }

    /* Features */
    .tour-features__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Location */
    .tour-location__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tour-location__map-embed iframe {
        height: 300px;
    }

    /* Testimonials */
    .tour-testimonials__title {
        font-size: 1.375rem;
    }

    .tour-testimonials__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tour-testimonials__card {
        padding: 24px;
    }

    /* Plans */
    .tour-plans__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tour-plans__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tour-plans__actions {
        flex-direction: column;
    }

    .tour-plans__actions .btn {
        width: 100%;
    }

    /* Builder */
    .tour-builder__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tour-builder__name {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    /* The H1 clamp already floors at 2rem; below 480 that is still a touch
       heavy against a 390px viewport, so trim it here rather than lowering the
       clamp floor and shrinking the headline on every mid-size screen. */
    .tour-hero__title {
        font-size: 1.625rem;
    }

    .tour-floorplan__specs-grid,
    .tour-floorplan__specs-grid--cols2,
    .tour-floorplan__specs-grid--cols3 {
        grid-template-columns: 1fr;
    }

    .tour-testimonials__title {
        font-size: 1.25rem;
    }

    .tour-reviews__card {
        width: 260px;
        min-width: 260px;
        padding: 20px;
    }

    .tour-hero__carousel-dots {
        bottom: 10px;
        gap: 6px;
    }

    .tour-hero__carousel-dot {
        width: 8px;
        height: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET / NARROW-DESKTOP STACKING -- added 2026-08-20 (Aaron's call)
   ═══════════════════════════════════════════════════════════════
   Below 1270px the two-column layout stops working: the hero image
   shrinks with the column while the info card keeps growing taller
   (it has fixed text), so a large block of dead white space opens up
   beside the image. Measured on the live page before this change:

       width   image h   card h   dead space
       1440px    448px    937px     489px
       1280px    397px    937px     540px
       1270px    393px    991px     597px
       1100px    339px   1151px     812px
       1024px    297px   1114px     817px

   At 1270px the card is already 2.5x the height of the image, so the
   grid is doing more harm than good. Stack instead.

   NOTE ON CASCADE: the @media(max-width:1024px) block ABOVE re-sets
   .tour-hero__grid to two columns. This block must stay LAST in the
   file so equal specificity resolves in its favour -- that is why
   there is no !important here. Verified across 1280/1270/1100/1024/
   900/768px.

   This is CSS Grid, not flexbox, so the switch is grid-template-columns
   rather than flex-direction.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1270px) {
    .tour-hero__grid,
    .tour-floorplan__two-col,
    .tour-location__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Stacked full-bleed images look stretched on a wide tablet, so cap
       them and center. Keeps the carousel a sane reading width. */
    .tour-hero__image-col,
    .tour-floorplan__plan-col {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}