/*
    Detail-page layout.

    The static site kept each page's CSS in a $pageStyles string inside the page file itself -
    pages/hotels/detail.php builds a <style> block at line 31 and echoes it into the head. The port
    carried the markup across but not those blocks, so class names that the old pages styled
    themselves have no rules here at all. .detail-grid, .detail-main, .detail-aside, .facts, .lead
    and .highlights are already used by resources/views/activities/show.blade.php and render
    unstyled today for exactly that reason.

    This file is that missing stylesheet, ported from pages/hotels/detail.php and kept to the
    vocabulary the Blade detail views already use. It is pushed per page rather than appended to
    style.css so a page that does not need it does not pay for it - the same arrangement
    instant-search.css already uses.

    Colours come from the :root custom properties in style.css; the literals that remain are the
    translucent golds and greys the original used inline, which have no variable.
*/

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.detail-main .lead {
    color: #bbb;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.detail-main h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.detail-main h3:not(:first-child) {
    margin-top: 2.5rem;
}

/*
    Amenities, highlights, inclusions: a two-column tick list on the old page.

    Two names because both are already in the markup - the hotel page calls it
    .detail-list, and activities/show.blade.php was ported calling it .highlights.
    They want the same treatment, so they share one rule rather than diverging.
*/
.detail-list,
.highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    list-style: none;
    padding: 0;
}

.detail-list li,
.highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #aaa;
    line-height: 1.5;
}

.detail-list li::before,
.highlights li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-gold);
    flex-shrink: 0;
}

.detail-empty {
    color: var(--color-text-gray);
    margin-bottom: 2rem;
}

/* ----------  Sidebar  ---------- */

.detail-aside {
    background: rgba(26, 26, 26, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 2rem;
    position: sticky;
    top: 100px;
}

.detail-aside h4 {
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

/*
    .facts is a <dl>. Laying the pairs out directly on the list rather than wrapping each one in a
    <div> keeps the markup a plain definition list, which is what the existing detail views emit.
*/
.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
}

.facts dt {
    color: var(--color-text-gray);
    font-size: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.facts dd {
    color: var(--color-gold);
    font-weight: 500;
    text-align: right;
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.facts dt:last-of-type,
.facts dd:last-of-type {
    border-bottom: none;
}

.facts a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}

.facts a:hover {
    color: var(--color-gold-light);
}

.detail-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.enquire-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #D4AF37, #B8962E);
    color: var(--color-black);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.enquire-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.detail-link {
    text-align: center;
    color: var(--color-gold);
    text-decoration: none;
    font-size: 0.9rem;
}

.detail-link-muted {
    text-align: center;
    color: var(--color-text-gray);
    text-decoration: none;
    font-size: 0.9rem;
}

.detail-link:hover,
.detail-link-muted:hover {
    color: var(--color-gold-light);
}

/* ----------  Related records  ---------- */

.related-section {
    background: var(--color-dark-gray);
    padding: 4rem 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.related-card {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.related-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
}

.related-card h4 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.related-card p {
    color: var(--color-text-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.related-stars {
    color: var(--color-gold);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.related-cat {
    display: block;
    color: var(--color-gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.related-more {
    color: var(--color-text-gray);
    font-size: 0.8rem;
}

/* ----------  Attraction pages: tags and opening hours  ---------- */

.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.detail-tags li {
    background: rgba(212, 175, 55, 0.1);
    color: var(--color-gold);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.detail-hours {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-hours-label {
    color: var(--color-text-gray);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.detail-hours-value {
    color: var(--color-white);
    font-size: 0.95rem;
}

/* .zh-cn is inline-block, so the space written before it inside the label is swallowed. */
.detail-hours-label .zh-cn {
    margin-left: 0.4rem;
}

/* ----------  Tour pages: the meta row in the hero, the price box, the muted "not included" list  ---------- */

.tour-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
}

.tour-meta i {
    color: var(--color-gold);
    margin-right: 0.5rem;
}

.price-box {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.price-from {
    color: var(--color-text-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.price-amount {
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    line-height: 1.2;
    color: var(--color-gold);
}

.price-note {
    color: var(--color-text-gray);
    font-size: 0.85rem;
}

.detail-list--muted {
    opacity: 0.7;
}

/* The sidebar's actions end in a bare link; the heading after them needs room of its own. */
.detail-actions + h4 {
    margin-top: 2rem;
}

/* ----------  Activity pages: the note, the check and cross lists, the related price  ---------- */

.notes-box {
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--color-gold);
    padding: 1rem 1.5rem;
    margin: 0 0 2rem;
}

.notes-box h4 {
    color: var(--color-gold);
    margin: 0 0 0.5rem;
}

.notes-box p {
    color: var(--color-text-gray);
    margin: 0;
}

.includes-list,
.excludes-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.includes-list li,
.excludes-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-gray);
}

.includes-list li i {
    color: #4CAF50;
    width: 20px;
}

.excludes-list li i {
    color: #f44336;
    width: 20px;
}

/*
    A hero whose content is taller than the default half screen (a label, a title that runs to two
    lines, its Chinese name and a meta row): it grows with the content, and the padding keeps the
    label out from under the fixed header.
*/
.hero--grow {
    min-height: 50vh;
    padding: 7rem 0 3rem;
    box-sizing: border-box;
}

.related-price {
    display: block;
    color: var(--color-gold);
    font-weight: 700;
    font-size: 1.2rem;
}

.detail-aside .detail-days {
    color: var(--color-text-gray);
    margin: 0 0 1.5rem;
}

.detail-aside .detail-days strong {
    color: var(--color-gold);
}

@media (max-width: 992px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-aside {
        position: static;
        margin-top: 2rem;
    }

    .detail-list,
    .highlights {
        grid-template-columns: 1fr;
    }
}