/* ═══════════════════════════════════════════════════════════════════════════
 * TOURWILL — HOTEL CATEGORY PAGE OVERRIDES
 * (taxonomy-hotel_category.php)
 * ─────────────────────────────────────────────────────────────────────────
 * This file is a thin layer over taxonomy-hotel-collection.css. The two
 * pages are structurally identical, so we reuse all the collection styles
 * and only add category-specific tweaks here.
 *
 * Loaded after taxonomy-hotel-collection.css.
 *
 * Sections:
 *   1. Smooth-scroll target margin for #cat-hotels (clears the navbar
 *      after "Explore Hotels" is clicked)
 *   2. Filter dropdown stack point — mirror the collection page's rules
 *      for parity, in case the collection CSS is missing
 *   3. Travel Style filter — third dropdown gets full row on narrow
 *      mobiles since "Travel Styles" is a long label
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
 * 1. Smooth-scroll target offset for the in-page "Explore Hotels" anchor
 * ───────────────────────────────────────────────────────────────────────── */
.cat-section--hotels {
    scroll-margin-top: 90px;
}
@media (min-width: 1024px) {
    .cat-section--hotels {
        scroll-margin-top: 110px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 2. Three-dropdown filter row — graceful breakpoint stack
 * (Region / Stars / Travel Style — same as the collection page's 3 filters)
 * ───────────────────────────────────────────────────────────────────────── */
.cat-section--hotels .col-filters__select {
    /* Ensure long option labels like "All Travel Styles" never truncate */
    text-overflow: ellipsis;
}

/* On very narrow phones, stack the 3 dropdowns vertically so every option
   has the full row width. */
@media (max-width: 479px) {
    .cat-section--hotels .col-filters {
        flex-direction: column;
    }
    .cat-section--hotels .col-filters__field {
        flex: 1 1 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3. Hero eyebrow — keep icon size in line with the script-font height
 * ───────────────────────────────────────────────────────────────────────── */
.cat-hero .col-hero__eyebrow {
    /* Icon already sized via .col-hero__eyebrow svg — no override needed,
       but reaffirm the gap for safety across browsers. */
    align-items: center;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 4. About-section eyebrow alignment with the script font
 * The "About This Stay Style" eyebrow uses Caveat — match the icon size
 * to the visual weight of the script.
 * ───────────────────────────────────────────────────────────────────────── */
.cat-section--about .col-about__eyebrow {
    align-items: center;
}