/* ─── Detail Page ─── */
:root {
    --cream: #F5F0E8; --bark: #3B2A1A; --moss: #4A6741; --terra: #B85C38;
    --wheat: #D4A853; --muted: #7A6E60; --ink: #1E1810; --sand: #C8B99A; --warm-white: #FAF7F2;
}

/* ─── Hero ─── */
.detail-hero {
    position: relative;
    min-height: 400px;
    height: 400px;
    overflow: hidden;
    transition: filter .3s;
}
.detail-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(20,12,5,0) 20%, rgba(20,12,5,0.7) 100%);
    z-index: 1;
}
.detail-hero__top {
    position: absolute; top: 24px; left: 32px; right: 32px;
    display: flex; justify-content: space-between; z-index: 2;
}
.detail-hero__badges { display: flex; gap: 8px; }
.detail-hero__badge {
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; padding: 5px 14px;
    border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
}
.detail-hero__badge--featured { background: var(--terra); color: #fff; }
.detail-hero__badge--category { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(4px); }
.detail-hero__actions { display: flex; gap: 8px; }
.detail-hero__btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 7px 14px; border-radius: 6px;
    background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer; backdrop-filter: blur(4px); transition: background .15s;
}
.detail-hero__btn:hover { background: rgba(255,255,255,0.22); }
.detail-hero__btn.active { background: rgba(255,255,255,0.3); }
.detail-hero__btn svg { flex-shrink: 0; }
.detail-hero__bottom {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 0 32px 20px;
}
.detail-hero__dots {
    display: flex; gap: 8px; justify-content: center;
}
.detail-hero__dot {
    width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5); cursor: pointer; transition: background .2s;
}
.detail-hero__dot.active { background: #fff; }

/* ─── Main Layout ─── */
.detail-main {
    max-width: 1080px; margin: 0 auto; padding: 0 32px;
}
.detail-main__inner {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 40px;
    padding-top: 28px;
    padding-bottom: 64px;
}

/* ─── Left Column ─── */
.detail-content { min-width: 0; }

/* ─── Breadcrumb ─── */
.breadcrumb {
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.breadcrumb a { color: var(--moss); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { margin: 0 5px; }

/* ─── Title ─── */
.detail-content__title {
    font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 700;
    color: var(--bark); margin: 0 0 10px; line-height: 1.15;
}

/* ─── Meta row ─── */
.detail-content__meta {
    font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--muted);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.detail-content__stars { color: var(--wheat); letter-spacing: 1px; }
.detail-content__rating { font-weight: 600; color: var(--bark); }
.detail-content__review-count { color: var(--muted); }
.detail-content__sep { color: var(--sand); }
.detail-content__town { color: var(--bark); }
.detail-content__open-status--open { color: var(--moss); font-weight: 500; }
.detail-content__open-status--closed { color: var(--muted); }

/* ─── Tags ─── */
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-tags__pill {
    font-family: 'DM Sans', sans-serif; font-size: 12px; padding: 4px 12px;
    border-radius: 14px; background: rgba(74,103,65,0.08); color: var(--moss);
}

/* ─── Section eyebrow titles ─── */
.detail-section__title {
    font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--terra);
    margin-bottom: 14px;
}
.detail-section__title::after {
    content: ''; display: inline-block; width: 36px; height: 1px;
    background: var(--sand); opacity: .4; margin-left: 8px; vertical-align: middle;
}

/* ─── About ─── */
.detail-about { margin-bottom: 32px; }
.detail-about__text {
    font-family: 'Lora', serif; font-size: 15px; color: var(--bark); line-height: 1.7;
}

/* ─── Type-specific details ─── */
.detail-specifics { margin-bottom: 32px; }

/* ─── Detail cards grid ─── */
.detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.detail-grid__card {
    background: var(--warm-white); border: 1px solid rgba(196,185,170,.4);
    border-radius: 5px; padding: 14px 16px;
}
.detail-grid__card--full { grid-column: 1 / -1; }
.detail-grid__label {
    font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 3px; display: block;
}
.detail-grid__value {
    font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--bark);
}
.detail-grid__value--yes { color: var(--moss); font-weight: 500; }
.detail-grid__value--no { color: var(--sand); font-weight: 500; }

/* ─── Pills (varietals, crops, experiences) ─── */
.detail-pills { margin-bottom: 16px; }
.detail-pills__title {
    font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 8px;
}
.detail-pills__row { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-pills__pill {
    font-family: 'DM Sans', sans-serif; font-size: 11px; padding: 4px 11px;
    border-radius: 20px; background: rgba(184,92,56,.08); color: var(--terra);
    border: 1px solid rgba(184,92,56,.15);
}
/* Green pills for experiences */
.detail-pills--green .detail-pills__pill {
    background: rgba(74,103,65,.1); color: var(--moss); border: 1px solid rgba(74,103,65,.2);
}

/* ─── Season banner ─── */
.detail-inline {
    background: rgba(212,168,83,.1); border: 1px solid rgba(212,168,83,.25);
    border-radius: 4px; padding: 12px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.detail-inline::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--wheat); flex-shrink: 0;
}
.detail-inline__label {
    font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: #7A5E1A;
    font-weight: 500;
}
.detail-inline__value {
    font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: #7A5E1A;
}

/* ─── Water type badge ─── */
.detail-badge-row { margin-bottom: 16px; }
.detail-badge--water {
    display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    padding: 6px 16px; border-radius: 6px; background: rgba(123,174,214,0.15); color: #3B6890;
}

/* ─── Hours ─── */
.detail-hours { margin-bottom: 32px; }
.detail-hours__seasonal {
    font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: var(--muted);
    margin-bottom: 12px;
}
.detail-hours__table { width: 100%; border-collapse: collapse; }
.detail-hours__row td {
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    padding: 9px 0; border-bottom: 1px solid rgba(196,185,170,.2);
}
.detail-hours__day { width: 110px; color: var(--muted); }
.detail-hours__time { color: var(--muted); }
.detail-hours__row--today .detail-hours__day { color: var(--bark); font-weight: 500; }
.detail-hours__row--today .detail-hours__time { color: var(--moss); font-weight: 500; }
.detail-hours__today-badge {
    font-size: 9px; background: rgba(74,103,65,.1); color: var(--moss);
    padding: 2px 6px; border-radius: 3px; margin-left: 6px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
}
.detail-hours__open-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--moss); margin-left: 8px; vertical-align: middle;
}
.detail-hours__row:last-child td { border-bottom: none; }

/* ─── Reviews ─── */
.detail-reviews { margin-bottom: 32px; }
.detail-reviews__summary {
    display: flex; gap: 24px; align-items: center;
    padding: 18px 20px; background: var(--warm-white);
    border: 1px solid rgba(196,185,170,.4); border-radius: 5px;
    margin-bottom: 20px;
}
.detail-reviews__summary-left { text-align: center; min-width: 72px; }
.detail-reviews__avg {
    font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700;
    color: var(--bark); line-height: 1; display: block;
}
.detail-reviews__avg-stars {
    color: var(--wheat); font-size: 13px; letter-spacing: 1px; display: block; margin-top: 4px;
}
.detail-reviews__total {
    font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted);
    display: block; margin-top: 4px;
}
.detail-reviews__bars { flex: 1; }
.detail-reviews__bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.detail-reviews__bar-label {
    font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted);
    width: 12px; text-align: right;
}
.detail-reviews__bar-track {
    flex: 1; height: 4px; background: rgba(196,185,170,.3); border-radius: 2px; overflow: hidden;
}
.detail-reviews__bar-fill { height: 100%; background: var(--wheat); border-radius: 2px; }
.detail-reviews__bar-count {
    font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted); width: 20px;
}

/* Review cards */
.detail-reviews__card {
    border-bottom: 1px solid rgba(196,185,170,.2); padding: 18px 0;
}
.detail-reviews__card--hidden { display: none; }
.detail-reviews__card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.detail-reviews__author {
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--bark);
}
.detail-reviews__date {
    font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted);
}
.detail-reviews__card-stars {
    color: var(--wheat); font-size: 13px; letter-spacing: 1px; margin-bottom: 6px;
}
.detail-reviews__card-body {
    font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: var(--muted); line-height: 1.6;
}
.detail-reviews__show-all {
    font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--terra);
    cursor: pointer; background: none; border: none; padding: 14px 0; font-weight: 500;
}
.detail-reviews__show-all:hover { text-decoration: underline; }

/* ─── Nearby ─── */
.detail-nearby { margin-bottom: 32px; }
.detail-nearby__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.detail-nearby__card {
    border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(196,185,170,.4); background: #fff;
    transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; display: block;
}
.detail-nearby__card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(59,42,26,0.1); }
.detail-nearby__img { height: 80px; position: relative; }
.detail-nearby__badge {
    position: absolute; top: 6px; left: 6px;
    font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600;
    padding: 2px 7px; border-radius: 3px; background: var(--terra); color: #fff; text-transform: uppercase;
}
.detail-nearby__body { padding: 10px 12px; }
.detail-nearby__name {
    font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700;
    color: var(--bark); margin-bottom: 3px;
}
.detail-nearby__meta {
    font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--muted);
}
.detail-nearby__stars { color: var(--wheat); }
.detail-nearby__distance {
    font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--sand);
    display: block; margin-top: 2px;
}

/* ─── Right Sidebar ─── */
.detail-sidebar { min-width: 0; }
.detail-sidebar__sticky {
    position: sticky; top: 24px;
    background: #fff; border: 1px solid rgba(196,185,170,.4);
    border-radius: 5px; overflow: hidden;
}

/* Sidebar header */
.detail-sidebar__header {
    background: var(--bark); padding: 18px 20px;
}
.detail-sidebar__name {
    font-family: 'Playfair Display', serif; font-size: 18px; color: #fff;
    margin: 0 0 4px; line-height: 1.3;
}
.detail-sidebar__status {
    font-family: 'DM Sans', sans-serif; font-size: 13px;
}
.detail-sidebar__status--open { color: #7fcc8a; }
.detail-sidebar__status--closed { color: rgba(255,255,255,0.4); }

/* Sidebar pricing */
.detail-sidebar__pricing {
    background: rgba(59,42,26,0.04); padding: 12px 20px;
    font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--bark); font-weight: 500;
    border-bottom: 1px solid rgba(196,185,170,.2);
}

/* Sidebar info rows */
.detail-sidebar__info { padding: 14px 20px; }
.detail-sidebar__row {
    display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--bark);
}
.detail-sidebar__icon { color: var(--muted); flex-shrink: 0; margin-top: 1px; }
.detail-sidebar__link { color: var(--terra); text-decoration: none; }
.detail-sidebar__link:hover { text-decoration: underline; }
.detail-sidebar__text { color: var(--muted); }

/* Sidebar map — real OSM tile */
.sb-map {
    height: 130px; overflow: hidden; position: relative; margin: 0 16px 0;
    border-radius: 6px;
}
.sb-map img {
    display: block; width: 100%; height: 130px; object-fit: cover; object-position: center;
    border-radius: 6px;
}
.sb-map-fallback {
    height: 130px; background: var(--bark); position: relative; overflow: hidden;
    border-radius: 6px;
}
.sb-map-fallback .detail-sidebar__map-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(212,168,83,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,168,83,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}
.sb-map-fallback .detail-sidebar__map-pin,
.detail-sidebar__map-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
}
.map-attribution {
    font-family: 'DM Sans', sans-serif; font-size: 9px; color: var(--muted);
    padding: 3px 16px 10px; background: transparent;
}
.map-attribution a { color: var(--terra); text-decoration: none; }

/* Sidebar buttons */
.detail-sidebar__btn {
    display: block; text-align: center;
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 13px 20px; margin: 0 16px 10px;
    border-radius: 5px; text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.detail-sidebar__btn--primary {
    background: var(--terra); color: #fff; border: none;
}
.detail-sidebar__btn--primary:hover { background: #a04e2e; }
.detail-sidebar__btn--ghost {
    background: transparent; color: var(--bark);
    border: 1px solid rgba(196,185,170,.4); border-top: 1px solid rgba(196,185,170,.4);
}
.detail-sidebar__btn--ghost:hover { border-color: var(--bark); }
.detail-sidebar__btn--ghost.saved { border-color: var(--moss); color: var(--moss); }
.detail-sidebar__btn--booking {
    background: var(--terra); color: #fff; border: none; margin-bottom: 16px;
}
.detail-sidebar__btn--booking:hover { background: #a04e2e; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .detail-hero { min-height: 280px; height: 280px; }
    .detail-hero__top { left: 16px; right: 16px; top: 16px; }
    .detail-hero__bottom { padding: 0 16px 16px; }
    .detail-main { padding: 0 16px; }
    .detail-main__inner {
        display: flex; flex-direction: column; gap: 24px;
        padding-top: 20px; padding-bottom: 40px;
    }
    .detail-content__title { font-size: 28px; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-nearby__grid { grid-template-columns: 1fr; }
    .detail-reviews__summary { flex-direction: column; }
    .detail-sidebar__sticky { position: static; }
    .detail-sidebar__btn { margin: 0 12px 8px; }
}