/* ==========================================================================
   Shared section wrapper — used by every top-level content block below
   (Basics, My Contributions, Photos) so spacing and heading treatment
   stay identical across all of them. Specificity is bumped with
   #page-content so it reliably overrides the generic #page-content h3
   rule in page-content.css.

   Heading levels follow proper document order: h1 is the attraction
   name in the hero, h2 is each top-level section here, h3 is a
   subsection nested inside one of those (e.g. "Links" and the review
   list's own heading, both nested inside the "Basics" section).
   ========================================================================== */

.attraction-section {
    margin-top: var(--paddingLarge);
}

#page-content .attraction-section > h2 {
    margin-top: 0;
    margin-bottom: var(--paddingSmall);
    font-size: var(--fontLarge);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

#page-content .attraction-section > h2 i {
    margin-right: calc(var(--paddingMinimum) / 2);
    color: rgb(var(--textFaint));
}

.attraction-subsection {
    margin-top: var(--paddingSmall);
}

#page-content .attraction-subsection > h3 {
    margin-top: 0;
    margin-bottom: var(--paddingMinimum);
    font-size: var(--fontMedium);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

#page-content .attraction-subsection > h3 i {
    margin-right: calc(var(--paddingMinimum) / 2);
    color: rgb(var(--textFaint));
}


/* ==========================================================================
   Breadcrumb ("cookie trail") — sits above the page hero
   ========================================================================== */

.attraction-breadcrumb-bar {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--paddingSmall);
    padding: var(--paddingMinimum) var(--paddingLarge);
    background: rgb(var(--background));
}

.attraction-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
}

/* ---------- Three-dot menu (Share / Report), lives in the breadcrumb bar ---------- */

.attraction-menu-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.attraction-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--fontMedium) * 1.1);
    height: calc(var(--fontMedium) * 1.1);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
    background: rgb(var(--backgroundFaint));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transitionTime) ease, color var(--transitionTime) ease;
}

.attraction-menu-toggle i {
    color: rgb(var(--textFaint));
}

.attraction-menu-toggle:hover,
.attraction-menu-toggle.active {
    background: rgb(var(--highlight2));
    color: rgb(var(--background));
}

.attraction-menu-toggle:hover i,
.attraction-menu-toggle.active i {
    color: rgb(var(--background));
}

/* ---------- Warning button — same circular hit-area sizing as
   .attraction-menu-toggle above, so both sit consistently in the same
   row, but no colored backing — just the icon itself, colored per
   severity to match how the modal list (below) shows each warning.
   Icon shape (not just colour) carries the severity too, since colour
   alone is hard to read at a glance and a real accessibility gap for
   colourblind users. ---------- */
.attraction-warning-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--fontMedium) * 1.1);
    height: calc(var(--fontMedium) * 1.1);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.attraction-warning-btn i {
    /* Deliberately larger than the button's own font-size — matches
       the modal's icon size rather than the smaller default this
       button used to inherit, so it's easy to make out at a glance.
       Sized close to the button's own hit-area now that there's no
       visible circular edge to leave padding against. */
    font-size: var(--fontMedium);
    /* Icon fonts inherit the browser's normal line-height by default,
       which reserves space below the glyph baseline for descenders
       these icons don't have — flexbox then centers that taller,
       bottom-heavy line box rather than the glyph's actual ink,
       making it look shifted toward the top. line-height: 1 removes
       that extra space so the centering lines up with what's visible. */
    line-height: 1;
    color: rgb(var(--textFaint));
}

.attraction-warning-btn.attraction-warning-severity-1 i {
    color: rgb(150, 95, 15);
}

.attraction-warning-btn.attraction-warning-severity-2 i {
    color: rgb(var(--error));
}

.attraction-warning-btn:hover {
    background: rgb(var(--backgroundFaint));
    transform: translateY(-2px);
}

.attraction-warning-btn:hover .tag-chip-tooltip {
    display: block;
}

.attraction-warning-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: var(--fontWeightBold);
    color: rgb(var(--background));
    background: rgb(var(--text));
    border: 2px solid rgb(var(--background));
    border-radius: var(--borderRadiusPill);
    box-sizing: border-box;
}

/* ---------- Warnings modal — same overlay pattern as
   account/update-profile.php's delete-account confirmation modal ---------- */
.attraction-warnings-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: var(--paddingSmall);
    background: rgba(0, 0, 0, 0.5);
}

.attraction-warnings-modal-overlay.active {
    display: flex;
}

.attraction-warnings-modal {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--paddingSmall);
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowStrong);
}

.attraction-warnings-modal h3 {
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    margin: 0 0 var(--paddingSmall) 0;
    font-size: var(--fontMedium);
    color: rgb(var(--text));
}

.attraction-warnings-modal-close {
    position: absolute;
    top: var(--paddingSmall);
    right: var(--paddingSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--fontMedium) * 0.9);
    height: calc(var(--fontMedium) * 0.9);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: rgb(var(--textFaint));
    background: none;
    border: none;
    cursor: pointer;
}

.attraction-warnings-modal-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--paddingMinimum) / 2);
}

.attraction-warnings-modal-item {
    display: flex;
    align-items: flex-start;
    gap: var(--paddingMinimum);
    padding: var(--paddingSmall);
    border-radius: var(--borderRadius);
    border-left: 4px solid rgb(var(--textFaint));
    background: rgb(var(--backgroundFaint));
}

.attraction-warnings-modal-item.attraction-warning-severity-1 {
    border-left-color: rgb(150, 95, 15);
}

.attraction-warnings-modal-item.attraction-warning-severity-2 {
    border-left-color: rgb(var(--error));
}

.attraction-warnings-modal-item > i {
    margin-top: 2px;
    font-size: var(--fontMedium);
    color: rgb(var(--textFaint));
}

.attraction-warnings-modal-item.attraction-warning-severity-1 > i {
    color: rgb(150, 95, 15);
}

.attraction-warnings-modal-item.attraction-warning-severity-2 > i {
    color: rgb(var(--error));
}

.attraction-warnings-modal-item .attraction-warning-severity-badge {
    display: inline-block;
    padding: calc(var(--paddingMinimum) / 3) calc(var(--paddingMinimum) * 0.7);
    margin-bottom: calc(var(--paddingMinimum) / 3);
    font-size: var(--fontSmallest);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
    background: rgb(var(--highlight1));
    border-radius: var(--borderRadiusPill);
}

.attraction-warnings-modal-item.attraction-warning-severity-1 .attraction-warning-severity-badge {
    color: rgb(var(--background));
    background: rgb(150, 95, 15);
}

.attraction-warnings-modal-item.attraction-warning-severity-2 .attraction-warning-severity-badge {
    color: rgb(var(--background));
    background: rgb(var(--error));
}

.attraction-warnings-modal-item p {
    margin: 0;
    font-size: var(--fontSmall);
    color: rgb(var(--text));
}

.attraction-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + calc(var(--paddingMinimum) / 2));
    right: 0;
    z-index: 60;
    min-width: 200px;
    max-width: calc(100vw - var(--paddingLarge) * 2);
    padding: calc(var(--paddingMinimum) / 2);
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowStrong);
}

.attraction-menu-dropdown.open {
    display: block;
}

/* .attraction-gallery-item has overflow:hidden (needed to crop photos
   to the grid's aspect ratio) which would otherwise clip a dropdown
   positioned normally — position:fixed escapes that, with exact
   coordinates calculated in JS from the toggle button's own position
   at the moment it's opened */
.attraction-gallery-item .attraction-menu-dropdown {
    position: fixed;
    top: auto;
    right: auto;
}

.attraction-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    width: 100%;
    min-height: 44px;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--text));
    background: none;
    border: none;
    border-radius: var(--borderRadius);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transitionTime) ease;
}

.attraction-menu-item:hover {
    background: rgb(var(--backgroundFaint));
}

.attraction-menu-item-disabled,
.attraction-menu-item-disabled i {
    color: rgb(var(--textFaint));
    cursor: default;
}

.attraction-menu-item-disabled:hover {
    background: none;
}

.attraction-menu-item i {
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
    color: rgb(var(--highlight2));
}

.breadcrumb-chip {
    display: inline-block;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--textFaint));
    background: rgb(var(--backgroundFaint));
    border-radius: var(--borderRadiusPill);
    text-decoration: none;
    transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

a.breadcrumb-chip:hover {
    background: rgb(var(--highlight2Faint));
    color: rgb(var(--background));
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}

.breadcrumb-current {
    color: rgb(var(--text));
    background: rgb(var(--highlight1));
    font-weight: var(--fontWeightBold);
}

.breadcrumb-separator {
    color: rgb(var(--textFaint));
    font-size: var(--fontSmall);
}


/* ==========================================================================
   Hero header (#page-head-simple, shared with other pages) — the primary
   image is used as its background-image via inline style, so no extra
   image styling is needed here. Just the rating + photo-jump badges.
   ========================================================================== */

.hero-badges {
    position: absolute;
    bottom: var(--paddingMinimum);
    right: var(--paddingMinimum);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
}

.hero-photo-jump,
.hero-rating-badge {
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 3);
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    border-radius: var(--borderRadiusPill);
    text-decoration: none;
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    box-shadow: var(--shadowSoft);
    transition: background var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.hero-photo-jump,
.hero-photo-jump i {
    color: rgb(var(--background));
}

.hero-photo-jump {
    background: rgba(var(--highlight2), 0.85);
}

.hero-photo-jump:hover {
    background: rgb(var(--highlight2Faint));
    transform: translateY(-2px);
}

.hero-rating-badge,
.hero-rating-badge i {
    color: rgb(var(--background));
}

.hero-rating-badge {
    background: rgba(var(--highlight2), 0.85);
}

.hero-rating-badge:hover {
    background: rgb(var(--highlight2Faint));
    transform: translateY(-2px);
}


/* ==========================================================================
   Tags — outline pills: site background, tag's own colour as the border
   only (text stays the normal text colour). Primary tag is included as
   just the first pill in this same list, not its own separate section.
   This is the first thing in #page-content, so it keeps a tighter top
   margin than the .attraction-section blocks further down the page.
   ========================================================================== */

.attraction-tags-row {
    display: flex;
    align-items: center;
    gap: var(--paddingSmall);
    margin-top: var(--paddingMinimum);
}

.attraction-tags {
    flex: 1 1 auto;
    min-width: 0;
}

.tag-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    margin: 0 calc(var(--paddingMinimum) / 2) calc(var(--paddingMinimum) / 2) 0;
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    background: rgb(var(--background));
    border: var(--borderThickness) solid rgb(var(--textFaint)); /* fallback if a tag has no colour set */
    border-radius: var(--borderRadiusPill);
    text-decoration: none;
    transition: box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.tag-chip:hover {
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}

/* ---------- Tooltip: tag description, shown on hover, CSS-only ---------- */

.tag-chip-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    background: rgb(var(--text));
    color: rgb(var(--background));
    font-size: var(--fontSmallest);
    font-weight: var(--fontWeightNormal);
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadowStrong);
    z-index: 9999; /* was being visually covered by the hero section's own gradient overlay */
    pointer-events: none; /* hovering the tooltip itself shouldn't be needed to keep it open */
}

.tag-chip-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgb(var(--text));
}

.tag-chip:hover .tag-chip-tooltip {
    display: block;
}

.tag-chip-new {
    color: rgb(var(--text));
    background: rgb(var(--highlight1));
    border-color: rgb(var(--highlight1));
}

/* Primary tag gets a subtle ring to visually separate it from the
   secondary tags that follow, rather than all tags reading as one
   undifferentiated flat row */
.tag-chip-primary {
    box-shadow: 0 0 0 2px rgb(var(--background)), 0 0 0 4px rgb(var(--highlight1Faint));
}

.attraction-tags-divider {
    display: inline-block;
    width: var(--borderThickness);
    height: 1em;
    margin: 0 calc(var(--paddingMinimum) / 2) 0 calc(var(--paddingMinimum) / 4);
    background: rgb(var(--backgroundFaint));
    vertical-align: middle;
}


/* ==========================================================================
   Basics — text info tabs (part of the "Basics" section, no heading of
   its own since the tab buttons are self-labeling)
   ========================================================================== */

.attraction-info-tabs {
    margin-top: 0;
}

.attraction-info-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    border-bottom: var(--borderThickness) solid rgb(var(--textFaint));
}

.attraction-info-tab-btn {
    position: relative;
    min-height: 44px; /* tokens can shrink quite small on narrow screens — this floor keeps the button genuinely tappable */
    padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.5);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--textFaint));
    background: transparent;
    border: none;
    border-bottom: calc(var(--borderThickness) * 2) solid transparent;
    margin-bottom: calc(var(--borderThickness) * -2); /* sits on top of the container's border-bottom */
    cursor: pointer;
    transition: color var(--transitionTime) ease, border-color var(--transitionTime) ease;
}

.attraction-info-tab-btn:hover {
    color: rgb(var(--text));
}

.attraction-info-tab-btn.active {
    color: rgb(var(--highlight2));
    font-weight: var(--fontWeightBold);
    border-bottom-color: rgb(var(--highlight2));
}

.attraction-info-tab-btn i {
    margin-right: calc(var(--paddingMinimum) / 3);
    font-size: 0.85em;
}

.attraction-info-tab-panel {
    display: none;
    padding-top: var(--paddingSmall);
}

.attraction-info-tab-panel.active {
    display: block;
}

/* ---------- Location map (now lives in the sidebar quick-facts card) ---------- */

.attraction-location-map-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: var(--borderRadiusLarge);
    overflow: hidden;
}

.attraction-location-map-wrapper #attractionLocationMap {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   Layout — sidebar (quick facts: rating, location+map) always stacks
   above the main content (About, Photos, Reviews, Add a Photo, Nearby)
   at every screen size, matching the mobile behavior consistently
   rather than switching to a side-by-side column on wider screens.
   ========================================================================== */

.attraction-layout {
    display: flex;
    flex-direction: column;
    gap: var(--paddingLarge);
    margin-top: var(--paddingLarge);
}

.attraction-sidebar {
    min-width: 0;
    width: 100%;
}

.attraction-main {
    /* As a flex item of .attraction-layout, this defaults to
       min-width: auto — which lets a wide child (like the horizontal-
       scrolling Collections/Nearby rows) force this element, and the
       whole page, to grow to fit its full un-scrolled content width
       instead of actually scrolling internally. min-width: 0 overrides
       that default and is what makes overflow-x: auto on those rows
       actually take effect. */
    min-width: 0;
    width: 100%;
}

.attraction-main > .attraction-section:first-child {
    margin-top: 0;
}

.attraction-quickfacts-card {
    box-sizing: border-box;
    width: 100%;
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowSoft);
    padding: var(--paddingSmall);
}

#page-content .attraction-quickfacts-card h2 {
    margin: 0 0 calc(var(--paddingMinimum) / 2) 0;
    font-size: var(--fontMedium);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

.quickfacts-address {
    margin: 0;
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}


/* ==========================================================================
   Section boxing — every top-level section explicitly opts in via
   .attraction-section-boxed (was previously an order-dependent
   :nth-of-type(even) rule, which broke unpredictably since sections
   like About/Collections/Nearby render conditionally — a section's
   even/odd position shifted depending on which optional sections
   existed for a given attraction, causing its background to
   appear/disappear seemingly at random).
   ========================================================================== */

.attraction-main > .attraction-section {
    padding: var(--paddingSmall);
    border-radius: var(--borderRadiusLarge);
}


/* ==========================================================================
   "Write a Review" toggle — sits at the top of the Reviews section,
   revealing the review form (moved here from the old "My Contributions"
   section) directly above the review list, instead of the two being
   disconnected in separate parts of the page.
   ========================================================================== */

.write-review-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    margin-bottom: var(--paddingSmall);
    padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.5);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--background));
    background: rgb(var(--highlight2));
    border: none;
    border-radius: var(--borderRadiusPill);
    cursor: pointer;
    transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.write-review-toggle i {
    color: rgb(var(--background));
}

.write-review-toggle:hover {
    background: rgb(var(--highlight2Faint));
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}

.write-review-toggle.active {
    background: rgb(var(--textFaint));
}

.write-review-wrapper {
    margin-bottom: var(--paddingSmall);
    padding-bottom: var(--paddingSmall);
    border-bottom: var(--borderThickness) solid rgb(var(--backgroundFaint));
}


/* ==========================================================================
   Nearby attractions — reuses .result-card exactly (from result-card.css)
   ========================================================================== */

.attraction-main > .attraction-section-boxed {
    background: rgb(var(--background));
}

.horizontal-card-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start; /* without this, flex's default "stretch" makes every card match the height of the tallest one in the row, so heights kept fluctuating between attractions instead of staying consistently smaller */
    gap: var(--paddingSmall);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--paddingMinimum); /* room for the scrollbar without clipping card shadows */
    cursor: grab;
    /* Explicit scrollbar styling — overflow-x:auto alone can render an
       effectively invisible scrollbar depending on OS/browser settings */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgb(var(--highlight2)) rgb(var(--backgroundFaint)); /* Firefox: thumb, track */
}

.horizontal-card-scroll:active {
    cursor: grabbing;
}

.horizontal-card-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-card-scroll::-webkit-scrollbar-track {
    background: rgb(var(--backgroundFaint));
    border-radius: var(--borderRadiusPill);
}

.horizontal-card-scroll::-webkit-scrollbar-thumb {
    background: rgb(var(--highlight2));
    border-radius: var(--borderRadiusPill);
}

.horizontal-card-scroll .result-card {
    flex: 0 0 220px;
    max-width: 220px;
    /* Dragging the row shouldn't also drag/select the card's image or
       text as the browser's default behaviour would otherwise do */
    user-select: none;
    -webkit-user-drag: none;
}

.horizontal-card-scroll .result-card img {
    -webkit-user-drag: none;
    pointer-events: none; /* clicks still work via the parent <a> — this just stops the browser's native "drag to save/open image" behaviour from fighting with our own drag-to-scroll */
}


/* ==========================================================================
   Basics — external link buttons. Redesigned as a wrapping row of pill
   buttons (rather than the previous full-width chevron rows) to better
   suit sitting under "About" alongside the tabs/map — keeps the circular
   per-service icon badge from the old design.
   ========================================================================== */

.external-link-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--paddingSmall);
}

.external-link-btn {
    box-sizing: border-box;
    width: 220px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    min-height: 44px;
    padding: calc(var(--paddingMinimum) / 2) calc(var(--paddingMinimum) * 1.25);
    background: rgb(var(--highlight2));
    border: none;
    border-radius: var(--borderRadiusPill);
    text-decoration: none;
    transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.external-link-btn:hover {
    background: rgb(var(--highlight2Faint));
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}

.external-link-btn i {
    color: rgb(var(--background));
    font-size: var(--fontSmall);
}

.external-link-btn span {
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--background));
}


/* ==========================================================================
   Basics — reviews list. The component itself (attraction-review-list.php)
   styles its own content; it just sits here as the last .attraction-subsection
   inside "Basics", with #reviews as the jump-target for the hero rating badge.
   ========================================================================== */


/* ==========================================================================
   My Contributions — groups the "write a review" and "add a photo"
   forms together, sitting between the reviews list and the photo gallery.
   Uses the shared .attraction-section wrapper for spacing/heading.
   ========================================================================== */


/* ==========================================================================
   Photos — placed at the bottom of the page, jumped to from the hero.
   Uses the shared .attraction-section wrapper for spacing/heading.
   Each photo opens larger in a lightbox modal on click.
   ========================================================================== */

.attraction-photos-section {
    scroll-margin-top: var(--paddingLarge); /* keeps the heading clear of the fixed header when jumped to */
}

.attraction-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--paddingMinimum);
}

.attraction-gallery-item {
    box-sizing: border-box;
    position: relative;
    flex: 0 1 calc(25% - var(--paddingMinimum));
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--borderRadiusLarge);
    background: rgb(var(--backgroundFaint));
    cursor: pointer;
    transition: box-shadow var(--transitionTime) ease;
}

.attraction-gallery-item:hover {
    box-shadow: var(--shadowSoft);
}

.attraction-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Same pill treatment as the hero rating badge, just anchored to the
   bottom-left of each gallery photo instead of the page hero */
.gallery-contributor-badge {
    position: absolute;
    bottom: var(--paddingMinimum);
    left: var(--paddingMinimum);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 3);
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    color: rgb(var(--text));
    background: rgba(var(--highlight1), 0.9);
    border-radius: var(--borderRadiusPill);
    font-size: 0.75rem;
    font-weight: var(--fontWeightBold);
    text-decoration: none;
    box-shadow: var(--shadowSoft);
    max-width: calc(100% - var(--paddingMinimum) * 2);
    transition: background var(--transitionTime) ease;
}

.gallery-contributor-badge:hover {
    background: rgb(var(--highlight1));
}

.gallery-contributor-badge {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-contributor-badge i {
    color: rgb(var(--text));
    flex-shrink: 0;
}

.review-header-right .attraction-menu-wrapper {
    margin-left: 0;
}

.gallery-item-menu {
    position: absolute;
    top: var(--paddingMinimum);
    right: var(--paddingMinimum);
    z-index: 2;
    margin-left: 0;
}

.gallery-item-menu .attraction-menu-toggle {
    color: rgb(var(--background));
    background: rgb(var(--highlight2));
}

.gallery-item-menu .attraction-menu-toggle i {
    color: rgb(var(--background));
}

.gallery-item-menu .attraction-menu-toggle:hover,
.gallery-item-menu .attraction-menu-toggle.active {
    background: rgb(var(--highlight2Faint));
}

.attraction-photos-section .load-more-btn {
    display: block;
    width: 100%;
    margin-top: var(--paddingMinimum);
    padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.5);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
    background: rgb(var(--highlight2));
    border: none;
    border-radius: var(--borderRadiusPill);
    cursor: pointer;
    transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.attraction-photos-section .load-more-btn:hover {
    background: rgb(var(--highlight2Faint));
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}

/* ---------- Photo lightbox modal ---------- */

.photo-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--paddingLarge);
    background: rgba(0, 0, 0, 0.85);
}

.photo-lightbox-overlay.active {
    display: flex;
}

.photo-lightbox-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-lightbox-content img {
    display: block;
    max-width: calc(100vw - var(--paddingLarge) * 2);
    max-height: calc(100vh - var(--paddingLarge) * 2);
    width: auto;
    height: auto;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadowStrong);
}

.photo-lightbox-close {
    position: absolute;
    top: calc(var(--paddingLarge) * -1);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--fontMedium) * 1.2);
    height: calc(var(--fontMedium) * 1.2);
    /* Tokens can shrink quite small on narrow screens — this floor keeps
       the button genuinely tappable (44px is the standard minimum touch
       target size) no matter how small the token-driven size gets. */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: rgb(var(--background));
    background: rgb(var(--highlight2));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--fontMedium);
    transition: background var(--transitionTime) ease;
}

.photo-lightbox-close i {
    color: rgb(var(--background));
}

.photo-lightbox-close:hover {
    background: rgb(var(--highlight2Faint));
}


/* ==========================================================================
   Misc
   ========================================================================== */

.attraction-no-extra {
    margin-top: var(--paddingSmall);
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}


/* ---------- Phone display ---------- */
@media only screen and (max-width: 949px) {

    .attraction-breadcrumb-bar {
        padding: var(--paddingMinimum) var(--paddingSmall);
    }

    /* The badges are absolutely positioned bottom-right on desktop, which
       works fine there since there's plenty of room — but on a narrow
       screen a long attraction name can wrap to 2-3 lines and grow tall
       enough to overlap them. Stacking everything in a normal column
       instead means the badges always sit safely below the title,
       however tall it ends up being. */
    #page-head-simple {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--paddingSmall);
        padding-bottom: var(--paddingSmall);
    }

    #page-head-simple h1 {
        padding-bottom: 0; /* was reserving space for the badges sitting absolutely below it — no longer needed now they're in normal flow */
    }

    .hero-badges {
        position: static;
        flex-wrap: wrap;
        justify-content: center;
    }

    .attraction-gallery-item {
        flex: 0 1 calc(50% - var(--paddingMinimum));
        min-width: 100px; /* the base rule's 120px min-width, combined with 2 columns + gaps, can overflow the narrowest phones */
    }

    .attraction-info-tab-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .attraction-info-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .photo-lightbox-overlay {
        padding: var(--paddingSmall);
    }

    .photo-lightbox-content img {
        max-width: calc(100vw - var(--paddingSmall) * 2);
        max-height: calc(100vh - var(--paddingSmall) * 2);
    }

    .photo-lightbox-close {
        top: calc(var(--paddingSmall) * -2.2);
        width: calc(var(--fontMedium) * 1);
        height: calc(var(--fontMedium) * 1);
        font-size: var(--fontSmall);
    }

}

.attraction-last-updated {
    margin-top: var(--paddingLarge);
    text-align: center;
    font-size: var(--fontSmallest);
    color: rgb(var(--textFaint));
}

/* Matches components/footer.php's .required-links-section a exactly */
.attraction-last-updated a {
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.attraction-last-updated a:hover {
    text-decoration: underline;
}

.attraction-footer-links-separator {
    margin: 0 calc(var(--paddingMinimum) / 3);
}