.elementor-9565 .elementor-element.elementor-element-5ec1e5ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-a4af484{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-301655da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-91822fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-4f9ea34b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-9565 .elementor-element.elementor-element-5ce9fb8a{--grid-columns:3;}.elementor-9565 .elementor-element.elementor-element-af5e4d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-5e6da9a7{--grid-columns:3;}.elementor-9565 .elementor-element.elementor-element-cc9eba8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-173b4885{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-7559d7fc{--grid-columns:3;}.elementor-9565 .elementor-element.elementor-element-5ef0f837{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-2bd9fc99{--grid-columns:1;}.elementor-9565 .elementor-element.elementor-element-cb1bee0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9565 .elementor-element.elementor-element-73243694{--display:flex;--min-height:550px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.5;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-9565 .elementor-element.elementor-element-73243694:not(.elementor-motion-effects-element-type-background), .elementor-9565 .elementor-element.elementor-element-73243694 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.uppercumberlandlifestyles.com/wp-content/uploads/2026/11/abbyweeden-1-2-scaled-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-9565 .elementor-element.elementor-element-73243694::before, .elementor-9565 .elementor-element.elementor-element-73243694 > .elementor-background-video-container::before, .elementor-9565 .elementor-element.elementor-element-73243694 > .e-con-inner > .elementor-background-video-container::before, .elementor-9565 .elementor-element.elementor-element-73243694 > .elementor-background-slideshow::before, .elementor-9565 .elementor-element.elementor-element-73243694 > .e-con-inner > .elementor-background-slideshow::before, .elementor-9565 .elementor-element.elementor-element-73243694 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-9565 .elementor-element.elementor-element-418b8af9{text-align:center;}.elementor-9565 .elementor-element.elementor-element-418b8af9 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:35px;font-weight:600;text-transform:capitalize;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-9565 .elementor-element.elementor-element-393e3efb{text-align:center;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;text-transform:none;letter-spacing:0px;color:var( --e-global-color-primary );}.elementor-9565 .elementor-element.elementor-element-5e215f1e{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button{background-color:var( --e-global-color-9c5db3c );font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:0px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );transition-duration:0s;border-style:none;border-radius:100px 100px 100px 100px;padding:10px 20px 10px 20px;}.elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button:hover, .elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button:focus{background-color:#3061CD;color:var( --e-global-color-primary );border-color:var( --e-global-color-secondary );}.elementor-9565 .elementor-element.elementor-element-3a50c2ed{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button:hover svg, .elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button{background-color:#EAF1FE00;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:0px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );transition-duration:0s;border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-9c5db3c );border-radius:100px 100px 100px 100px;padding:10px 20px 10px 20px;}.elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button:hover, .elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button:focus{background-color:var( --e-global-color-9c5db3c );color:var( --e-global-color-primary );border-color:var( --e-global-color-9c5db3c );}.elementor-9565 .elementor-element.elementor-element-d14df4e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button:hover svg, .elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button:focus svg{fill:var( --e-global-color-primary );}@media(min-width:768px){.elementor-9565 .elementor-element.elementor-element-5e215f1e{--content-width:500px;}}@media(max-width:1024px){.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-9565 .elementor-element.elementor-element-5ce9fb8a{--grid-columns:2;}.elementor-9565 .elementor-element.elementor-element-5e6da9a7{--grid-columns:2;}.elementor-9565 .elementor-element.elementor-element-7559d7fc{--grid-columns:2;}.elementor-9565 .elementor-element.elementor-element-2bd9fc99{--grid-columns:2;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-9565 .elementor-element.elementor-element-5e215f1e{--grid-auto-flow:row;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(max-width:767px){.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-9565 .elementor-element.elementor-element-5ce9fb8a{--grid-columns:1;}.elementor-9565 .elementor-element.elementor-element-5e6da9a7{--grid-columns:1;}.elementor-9565 .elementor-element.elementor-element-7559d7fc{--grid-columns:1;}.elementor-9565 .elementor-element.elementor-element-2bd9fc99{--grid-columns:1;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-9565 .elementor-element.elementor-element-5e215f1e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-9565 .elementor-element.elementor-element-3a50c2ed .elementor-button{padding:10px 30px 10px 30px;}.elementor-9565 .elementor-element.elementor-element-d14df4e .elementor-button{padding:10px 30px 10px 30px;}}/* Start custom CSS *//* ============================================================
   UCL CITY ARCHIVE — Complete Template CSS (v1, Phase 5A)
   ------------------------------------------------------------
   Paste into: Theme Builder → City Archive template →
   Page Settings (gear icon, bottom-left) → Custom CSS

   This v1 covers Phase 5A: hero + intro + CTAs.
   Phase 5B will add highlights + embedded business/event grids.

   Required HTML structure:
     .ucl-city-hero               (full-bleed container, dynamic bg)
       .ucl-city-eyebrow          (eyebrow text)
       .ucl-city-name             (h1 = Archive Title)
     .ucl-city-intro-section      (content-width container)
       .ucl-city-intro            (WYSIWYG from ucl_city_intro)
       .ucl-city-ctas             (CTA button row container)
   ============================================================ */


/* ============================================================
   1. HERO — full-bleed with dynamic background image
   ============================================================ */

.ucl-city-hero {
    position: relative !important;
    min-height: 480px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 0 64px 0 !important;
    margin: 0 !important;
}

.ucl-city-hero > * {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (max-width: 768px) {
    .ucl-city-hero {
        min-height: 360px !important;
        padding-bottom: 40px !important;
    }
    .ucl-city-hero > * {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Eyebrow */
.ucl-city-eyebrow,
.ucl-city-eyebrow p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 0 !important;
    opacity: 0.9 !important;
    line-height: 1.2 !important;
}

/* City name — large serif headline */
.ucl-city-name,
.ucl-city-name h1,
.ucl-city-name .elementor-heading-title {
    font-family: 'Fino Sans', 'Lora', Georgia, serif !important;
    font-size: clamp(48px, 8vw, 96px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    text-transform: none !important;
}

@media (max-width: 768px) {
    .ucl-city-name,
    .ucl-city-name h1 {
        font-size: clamp(40px, 12vw, 56px) !important;
    }
}


/* ============================================================
   2. INTRO SECTION (content-width WYSIWYG)
   ============================================================ */

.ucl-city-intro-section {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 64px 24px 48px !important;
    background: #FFFFFF !important;
}

.ucl-city-intro,
.ucl-city-intro p,
.ucl-city-intro .elementor-widget-container {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    max-width: 720px !important;
}

.ucl-city-intro h2,
.ucl-city-intro h3 {
    font-family: 'Fino Sans', 'Lora', Georgia, serif !important;
    color: #0F1419 !important;
    margin: 32px 0 12px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

.ucl-city-intro h2 {
    font-size: 28px !important;
}

.ucl-city-intro h3 {
    font-size: 22px !important;
}

.ucl-city-intro a {
    color: #0F1419 !important;
    text-decoration: underline !important;
    transition: opacity 0.2s ease !important;
}

.ucl-city-intro a:hover {
    opacity: 0.6 !important;
}

@media (max-width: 768px) {
    .ucl-city-intro-section {
        padding: 40px 16px 32px !important;
    }
    .ucl-city-intro,
    .ucl-city-intro p {
        font-size: 17px !important;
    }
}


/* ============================================================
   3. CTA BUTTONS (from ucl_city_ctas repeater)
   ============================================================ */

.ucl-city-ctas,
.ucl-city-ctas-list {
    max-width: 720px !important;
    margin: 24px auto 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.ucl-city-cta-button,
.ucl-city-cta-button.elementor-button,
a.ucl-city-cta-button {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #0F1419 !important;
    background: #FFFFFF !important;
    border: 1px solid #0F1419 !important;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.ucl-city-cta-button:hover,
a.ucl-city-cta-button:hover {
    background: #0F1419 !important;
    color: #FFFFFF !important;
    border-color: #0F1419 !important;
}

/* Primary style variant — filled black */
.ucl-city-cta-button--primary {
    background: #0F1419 !important;
    color: #FFFFFF !important;
}

.ucl-city-cta-button--primary:hover {
    background: #1F2937 !important;
    border-color: #1F2937 !important;
}

/* Link style variant — no border, underline */
.ucl-city-cta-button--link {
    background: transparent !important;
    border: 0 none !important;
    padding: 8px 0 !important;
    text-decoration: underline !important;
}

.ucl-city-cta-button--link:hover {
    background: transparent !important;
    color: #6B7280 !important;
    border: 0 none !important;
}

@media (max-width: 768px) {
    .ucl-city-ctas,
    .ucl-city-ctas-list {
        gap: 8px !important;
    }
    .ucl-city-cta-button {
        padding: 10px 16px !important;
        font-size: 10px !important;
    }
}


/* ============================================================
   4. SECTION DIVIDERS (used by all sections below intro)
   ============================================================ */

.ucl-city-section {
    max-width: 1280px !important;
    margin: 64px auto 0 auto !important;
    padding: 48px 24px 0 24px !important;
    border-top: 1px solid #E5E7EB !important;
}

.ucl-city-section-title,
.ucl-city-section-title h2,
.ucl-city-section-title .elementor-heading-title {
    font-family: 'Fino Sans', 'Lora', Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    color: #0F1419 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

@media (max-width: 768px) {
    .ucl-city-section {
        margin-top: 48px !important;
        padding: 32px 16px 0 16px !important;
    }
    .ucl-city-section-title,
    .ucl-city-section-title h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
}


/* ============================================================
   5. HIGHLIGHTS (ucl_city_highlights repeater)
   ------------------------------------------------------------
   Card structure (image is optional — looks correct without it):
     .ucl-city-highlight-card
       .ucl-city-highlight-link-wrap (anchor wrapping everything)
         .ucl-city-highlight-image
           <img src="acf:image">
         .ucl-city-highlight-body
           .ucl-city-highlight-title
           .ucl-city-highlight-desc
           .ucl-city-highlight-arrow
   ============================================================ */

.ucl-city-highlights-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .ucl-city-highlights-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 20px !important;
    }
}

@media (max-width: 600px) {
    .ucl-city-highlights-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Card wrapper — editorial top rule stays, image sits below */
.ucl-city-highlight-card {
    background: transparent !important;
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid #0F1419 !important;
    transition: opacity 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Full link wrap — covers image + text so the entire card is clickable */
.ucl-city-highlight-link-wrap {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Image container — 4:3 ratio, gray placeholder if image fails */
.ucl-city-highlight-image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    margin: 0 0 16px 0 !important;
    background: #F3F4F6 !important;
    border-radius: 2px !important;
    position: relative !important;
}

.ucl-city-highlight-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

/* Hover — subtle image zoom + subtle text fade */
.ucl-city-highlight-link-wrap:hover .ucl-city-highlight-image img {
    transform: scale(1.04) !important;
}

.ucl-city-highlight-link-wrap:hover .ucl-city-highlight-title,
.ucl-city-highlight-link-wrap:hover .ucl-city-highlight-desc,
.ucl-city-highlight-link-wrap:hover .ucl-city-highlight-arrow {
    opacity: 0.7 !important;
}

/* Body wrapper for title + desc + arrow */
.ucl-city-highlight-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ucl-city-highlight-title {
    font-family: 'Fino Sans', 'Lora', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #0F1419 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    transition: opacity 0.2s ease !important;
}

.ucl-city-highlight-desc {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #4B5563 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    transition: opacity 0.2s ease !important;
}

.ucl-city-highlight-arrow {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0F1419 !important;
    display: inline-block !important;
    margin-top: 4px !important;
    transition: opacity 0.2s ease !important;
}

/* Mobile — slightly smaller title, tighter spacing */
@media (max-width: 768px) {
    .ucl-city-highlight-image {
        margin-bottom: 12px !important;
    }
    .ucl-city-highlight-title {
        font-size: 20px !important;
    }
    .ucl-city-highlight-desc {
        font-size: 14px !important;
    }
}


/* ============================================================
   6. EMBEDDED BUSINESSES + EVENTS LOOP GRIDS
   ============================================================ */

/* The .ucl-archive-grid class already styles the loop layout
   from your Business Archive CSS. If that CSS isn't loaded
   on the City Archive template, these fallback rules apply. */

.ucl-city-section .ucl-archive-grid .elementor-loop-container,
.ucl-city-section .ucl-archive-grid .e-loop-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px 32px !important;
}

@media (max-width: 1024px) {
    .ucl-city-section .ucl-archive-grid .elementor-loop-container,
    .ucl-city-section .ucl-archive-grid .e-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 24px !important;
    }
}

@media (max-width: 600px) {
    .ucl-city-section .ucl-archive-grid .elementor-loop-container,
    .ucl-city-section .ucl-archive-grid .e-loop-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
}

/* Events as a single-column list */
.ucl-city-events-list .elementor-loop-container,
.ucl-city-events-list .e-loop-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}


/* ============================================================
   7. "View all" link — aggressive double-underline kill
   ============================================================ */

/* Wrappers — strip any inherited borders/decorations */
.ucl-city-view-all,
.ucl-city-view-all p,
.ucl-city-view-all .elementor-widget-container {
    border: 0 none !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    margin: 32px 0 0 0 !important;
}

/* The actual link — single editorial underline only */
.ucl-city-view-all a,
.ucl-city-view-all a:link,
.ucl-city-view-all a:visited,
.ucl-city-view-all a:hover,
.ucl-city-view-all a:focus,
.ucl-city-view-all a:active {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #0F1419 !important;

    /* Kill the native underline at every state + every layer */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;

    /* Editorial underline only */
    border-bottom: 1px solid #0F1419 !important;
    border-top: 0 none !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
    padding-bottom: 4px !important;
    padding-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-block !important;
    margin: 0 !important;
    transition: opacity 0.2s ease !important;
}

.ucl-city-view-all a:hover {
    opacity: 0.55 !important;
    color: #0F1419 !important;
}


/* ============================================================
   8. TAXONOMY FILTER (Elementor Loop Grid Filter widget)
   ------------------------------------------------------------
   Setup in Elementor:
     1. Drop a "Loop Grid Filter" widget above your businesses
        Loop Grid
     2. Filter by: Taxonomy → your category taxonomy
     3. Query ID: match the Loop Grid's Query ID (e.g.
        ucl_city_businesses)
     4. Display: Buttons (pills)
     5. Hide empty: ON
     6. AJAX: ON
     7. Advanced → CSS Classes → add: ucl-city-filter

   Elementor's class names changed between versions, so the
   body.elementor-page-9565s below target both .e-filter-item and the older
   .elementor-loop-filter__item naming to be safe.
   ============================================================ */

/* Outer wrapper — give it breathing room above the loop */
.ucl-city-filter {
    max-width: 1280px !important;
    margin: 0 auto 32px auto !important;
    padding: 0 24px !important;
}

/* Container for the pills (flex row, wrap on mobile) */
.ucl-city-filter .e-filter,
.ucl-city-filter .elementor-loop-filter,
.ucl-city-filter ul,
.ucl-city-filter ol {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center !important;
}

/* Filter label (if Elementor renders one) — small editorial label */
.ucl-city-filter .e-filter-label,
.ucl-city-filter .elementor-loop-filter__label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    margin-right: 8px !important;
    line-height: 1 !important;
}

/* Each filter pill — works for button or anchor render */
.ucl-city-filter .e-filter-item,
.ucl-city-filter button.e-filter-item,
.ucl-city-filter a.e-filter-item,
.ucl-city-filter .elementor-loop-filter__item,
.ucl-city-filter li > button,
.ucl-city-filter li > a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #0F1419 !important;
    background: transparent !important;
    border: 1px solid #0F1419 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hover — inverse (filled black) */
.ucl-city-filter .e-filter-item:hover,
.ucl-city-filter .elementor-loop-filter__item:hover,
.ucl-city-filter li > button:hover,
.ucl-city-filter li > a:hover {
    background: #0F1419 !important;
    color: #FFFFFF !important;
    border-color: #0F1419 !important;
}

/* Active state — filled black, sticks while filter is applied */
.ucl-city-filter .e-filter-item--active,
.ucl-city-filter .e-filter-item.e-filter-item--active,
.ucl-city-filter .elementor-loop-filter__item--active,
.ucl-city-filter [aria-pressed="true"],
.ucl-city-filter [aria-current="true"],
.ucl-city-filter .is-active {
    background: #0F1419 !important;
    color: #FFFFFF !important;
    border-color: #0F1419 !important;
}

/* Focus ring for keyboard nav (accessibility) */
.ucl-city-filter .e-filter-item:focus-visible,
.ucl-city-filter .elementor-loop-filter__item:focus-visible {
    outline: 2px solid #0F1419 !important;
    outline-offset: 2px !important;
}

/* Optional count badge inside a pill */
.ucl-city-filter .e-filter-item__count,
.ucl-city-filter .elementor-loop-filter__count,
.ucl-city-filter .count {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    opacity: 0.55 !important;
    margin-left: 2px !important;
}

/* Active pill — soften the count so it doesn't fight the white text */
.ucl-city-filter .e-filter-item--active .e-filter-item__count,
.ucl-city-filter .elementor-loop-filter__item--active .count {
    color: #FFFFFF !important;
    opacity: 0.7 !important;
}

/* Dropdown variant — if you switch the widget's Display to Dropdown */
.ucl-city-filter select {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0F1419 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #0F1419 !important;
    border-radius: 999px !important;
    padding: 10px 36px 10px 18px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F1419' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    line-height: 1 !important;
}

.ucl-city-filter select:focus {
    outline: 2px solid #0F1419 !important;
    outline-offset: 2px !important;
}

/* Mobile — slightly smaller pills, tighter spacing */
@media (max-width: 768px) {
    .ucl-city-filter {
        padding: 0 16px !important;
        margin-bottom: 24px !important;
    }
    .ucl-city-filter .e-filter,
    .ucl-city-filter .elementor-loop-filter,
    .ucl-city-filter ul {
        gap: 6px !important;
    }
    .ucl-city-filter .e-filter-item,
    .ucl-city-filter .elementor-loop-filter__item,
    .ucl-city-filter li > button,
    .ucl-city-filter li > a {
        font-size: 10px !important;
        padding: 8px 14px !important;
        letter-spacing: 0.12em !important;
    }
}


/* ============================================================
   9. FILTER ROW — "Category" label + filter pills inline
   ------------------------------------------------------------
   Setup in Elementor:
     1. Drop a Container widget between the section title and
        the businesses Loop Grid
        - Layout → Direction: Row
        - Advanced → CSS Classes: ucl-city-filter-row
     2. Inside the container, add a Text Editor widget:
        - Content: "Category"  (or "Filter by", "Show me", etc.)
        - Advanced → CSS Classes: ucl-city-filter-label
     3. Inside the same container, add the Loop Grid Filter
        widget (it already has class ucl-city-filter from
        Section 8). It will sit to the right of the label.
   ============================================================ */

/* Row container — label left, filter pills right */
.ucl-city-filter-row,
.ucl-city-filter-row.e-con,
.ucl-city-filter-row > .e-con-inner,
.elementor-element.ucl-city-filter-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 20px !important;
    max-width: 1280px !important;
    margin: 0 auto 32px auto !important;
    padding: 14px 24px !important;
    border-top: 1px solid #0F1419 !important;
    border-bottom: 1px solid #E5E7EB !important;
    background: transparent !important;
}

/* The "Category" label — editorial eyebrow */
.ucl-city-filter-label,
.ucl-city-filter-label p,
.ucl-city-filter-label .elementor-widget-container,
.ucl-city-filter-label .elementor-widget-container p {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* When the filter widget sits INSIDE the row, drop its own
   max-width / centering / padding so it can sit inline */
.ucl-city-filter-row .ucl-city-filter,
.ucl-city-filter-row .ucl-city-filter.elementor-widget {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.ucl-city-filter-row .ucl-city-filter .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* The pill container inside the row — left-aligned, no extra margin */
.ucl-city-filter-row .ucl-city-filter .e-filter,
.ucl-city-filter-row .ucl-city-filter .elementor-loop-filter,
.ucl-city-filter-row .ucl-city-filter ul {
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* Mobile — stack label above pills */
@media (max-width: 600px) {
    .ucl-city-filter-row,
    .ucl-city-filter-row.e-con,
    .ucl-city-filter-row > .e-con-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 16px !important;
    }
    .ucl-city-filter-row .ucl-city-filter {
        width: 100% !important;
    }
}


/* ============================================================
   CHANGELOG
   ------------------------------------------------------------
   v5 (2026-05-25): Added Section 9 — Filter Row pattern.
                    Horizontal container with "Category" label
                    on the left and filter pills inline to the
                    right, between section title and Loop Grid.
                    Top border (1px black) + bottom border
                    (1px gray) frame it as an editorial band.
                    Resets inherited max-width/padding from
                    Section 8 when filter widget is nested in
                    the row. Mobile stacks vertically.
   v4 (2026-05-25): Added Section 8 — Taxonomy Filter widget
                    styling. Pill-style buttons matching the
                    CTA aesthetic (Inter 11px uppercase,
                    rounded pills, inverse-on-hover, filled
                    black active). Targets both .e-filter-item
                    and .elementor-loop-filter__item naming
                    for cross-version Elementor compatibility.
                    Includes dropdown variant, count badge,
                    keyboard focus ring, and mobile sizing.
   v3 (2026-05-25): Section 5 — added image support to the
                    highlights repeater. Image at top of card
                    (4:3 ratio, object-fit cover), editorial
                    top rule preserved above image, hover does
                    subtle image scale (1.04) + text opacity
                    fade. Added .ucl-city-highlight-body
                    wrapper class. Bumped title to 22px,
                    description to 15px for better hierarchy
                    against larger image. Tightened grid gap
                    and adjusted mobile sizing.
   v2 (2026-05-22): Phase 5B — added sections 4 (section
                    dividers), 5 (highlights repeater grid
                    with card style), 6 (embedded businesses
                    + events loop grids), and 7 (view all
                    link styling).
   v1 (2026-05-22): Phase 5A — hero (full-bleed dynamic bg
                    with eyebrow + serif city name), intro
                    section (content-width WYSIWYG), and CTA
                    button row (with primary/secondary/link
                    style variants matching the ACF repeater).
   ============================================================ *//* End custom CSS */