/* ============================================================
   GUIDE & SUITE PAGES
   Getting to Shangarh, Things to do, Group stays, and one page
   per suite. Built on legal.css (solid navbar, masthead, reading
   column, tables, cards) and adds only what those pages need:
   a lead photograph, a photo grid, a facts strip, a booking box,
   questions that open, and links to the other pages.

   No script of its own. Photos in the grid are plain links to the
   full-size file, so a tap always does something.
   ============================================================ */

.guide-page .legal-head { padding-bottom: 0; }
/* style.css gives every <section> the home page's section padding;
   inside the reading column the gap comes from legal.css alone. */
.guide-page .legal-body section { padding: 0; }
/* legal.css sets a table's last column in the price face. Here it often
   holds a sentence, so keep it in the reading face. */
.guide-page .legal-table td:last-child { font-family: var(--font-body); }
.guide-lede {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 640px;
    margin: 0 auto;
}

/* ---- lead photograph ---- */
.guide-photo {
    max-width: 1100px;
    margin: clamp(32px, 5vw, 48px) auto 0;
    padding: 0 var(--gutter);
}
.guide-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
    background: var(--cream);
}
@media (min-width: 900px) {
    .guide-photo img { aspect-ratio: 16 / 7; }
}
.guide-photo figcaption {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 10px;
    text-align: center;
}

/* ---- facts strip (price, guests, bed, floor) ---- */
.guide-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 clamp(32px, 5vw, 48px);
}
@media (min-width: 720px) { .guide-facts { grid-template-columns: repeat(4, 1fr); } }
.guide-facts div {
    background: var(--white);
    padding: 16px 18px;
}
.guide-facts dt {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.guide-facts dd {
    margin: 0;
    font-family: var(--font-amount);
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--text-heading);
}

/* ---- features as two columns of ticks ---- */
.legal-body ul.guide-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 28px;
}
@media (min-width: 560px) { .legal-body ul.guide-features { grid-template-columns: 1fr 1fr; } }

/* ---- photo grid ---- */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 20px 0 10px;
}
@media (min-width: 720px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.legal-body .guide-grid a { border: 0; display: block; }
.guide-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    background: var(--cream);
    transition: opacity var(--t-fast);
}
.guide-grid a:hover img { opacity: 0.88; }
.guide-grid-note { font-size: 0.9rem; color: var(--text-muted); }

/* ---- booking box ---- */
.guide-book {
    background: var(--pine);
    color: var(--text-on-dark);
    border-radius: 4px;
    padding: clamp(26px, 4vw, 38px);
    margin: clamp(38px, 5vw, 56px) 0 0;
    text-align: center;
}
.legal-body .guide-book h2 { color: var(--paper); margin-bottom: 10px; }
.guide-book p { margin: 0 auto 20px; max-width: 520px; }
.guide-book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.legal-body .guide-book-actions a { border: 0; }
.legal-body .guide-book-actions .btn-gold { color: var(--ink); }
.legal-body .guide-book-actions .btn-ghost {
    color: var(--paper);
    border: 1px solid var(--line-on-dark);
}
.guide-book-actions .btn { min-width: 200px; justify-content: center; }

/* ---- questions that open ---- */
.guide-faq details {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
.guide-faq details:first-of-type { border-top: 1px solid var(--line); }
.guide-faq summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-heading);
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px; top: -2px;
    font-size: 1.3rem;
    color: var(--gold-deep);
}
.guide-faq details[open] summary::after { content: "\2013"; }
.guide-faq details p { margin: 10px 0 0; }

/* ---- places list (things to do) ---- */
.guide-place { margin-top: 26px; }
.guide-place h3 { margin-top: 0; }
.guide-place-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    background: var(--cream);
    margin: 4px 0 6px;
}
.guide-place-meta {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: -2px 0 8px !important;
}

/* ---- links to the other pages ---- */
.guide-more {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}
@media (min-width: 720px) { .guide-more { grid-template-columns: repeat(3, 1fr); } }
.legal-body .guide-more a {
    display: block;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    overflow: hidden;
    color: var(--text-heading);
}
.legal-body .guide-more a:hover { border-color: var(--gold-soft); color: var(--gold-deep); }
.guide-more img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--cream);
}
.guide-more span { display: block; padding: 12px 16px 14px; font-weight: 500; }
.guide-more small { display: block; font-weight: 300; color: var(--text-muted); font-size: 0.86rem; }

/* ---- breadcrumb ---- */
.guide-crumbs {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.guide-crumbs a { color: var(--text-muted); text-decoration: none; }
.guide-crumbs a:hover { color: var(--gold); }