/* =============================================================
   Columns widget (WidgetTypes.Columns) - shared by every theme.

   Plain css on purpose, linked once from _GlobalStyles_Header (like
   ut-widget-spacing.css, and BEFORE it: a widget's own Spacing choice
   must beat the column resets below, and both use !important with the
   same specificity, so the later file wins). Each theme's Display
   supplies only its container + heading; the grid markup is
   Views/Shared/Components/MySiteWidgets/Columns/_ColumnsGrid.cshtml:

     <section class="ut-widget ut-widget-columns ut-widget-columns--2
                     ut-widget-columns--w-60-40 ut-widget-columns--align-top">
       <div class="{theme container}">
         [heading]
         <div class="ut-widget-columns__grid">
           <div class="ut-widget-columns__col" data-ut-col="0"> widgets... </div>
           ...

   Layout: side by side from 768px, stacked (left first) below. An empty
   column keeps its share of the width side by side and is dropped once
   stacked (--empty, public site only).
   ============================================================= */

.ut-widget-columns {
    padding-top: var(--ut-widget-columns-padding-y, 3rem);
    padding-bottom: var(--ut-widget-columns-padding-y, 3rem);
}

.ut-widget-columns__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ut-widget-columns-gap, clamp(1.5rem, 3vw, 2.5rem));
    align-items: start;
}

.ut-widget-columns--align-center .ut-widget-columns__grid {
    align-items: center;
}

/* One column. A size container, so the widgets in it can lay themselves
   out by the column's width (@container ut-col) instead of the screen's -
   each theme's narrow-width rules key off it. Widgets stack inside a
   column with an even gap. */
.ut-widget-columns__col {
    container: ut-col / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--ut-widget-columns-stack-gap, clamp(1.25rem, 2.5vw, 2rem));
    min-width: 0;
}

@media (min-width: 768px) {
    .ut-widget-columns--w-50-50 .ut-widget-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ut-widget-columns--w-60-40 .ut-widget-columns__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .ut-widget-columns--w-40-60 .ut-widget-columns__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .ut-widget-columns--w-33-67 .ut-widget-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .ut-widget-columns--w-67-33 .ut-widget-columns__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

    .ut-widget-columns--w-33-33-33 .ut-widget-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    .ut-widget-columns--w-50-25-25 .ut-widget-columns__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .ut-widget-columns--w-25-50-25 .ut-widget-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
    .ut-widget-columns--w-25-25-50 .ut-widget-columns__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
}

@media (max-width: 767.98px) {
    .ut-widget-columns__col--empty {
        display: none;
    }
}

/* ---------- The widgets inside a column ----------
   Every widget is built as a full-width page band: its own vertical
   padding (70-130px in the premium themes) and a centered, max-width
   container with gutters. Inside a column the Columns widget owns that
   room, so a child drops both; stacked children are spaced by the
   column's gap. !important because the themes size those sections with
   their own rules and Bootstrap utilities (p-0, mb-5) that are
   !important themselves. A child's own Spacing choice still wins
   (ut-widget-spacing.css loads after this file). A widget that paints
   its own band (Cornerstone's photo galleries) sets
   --ut-widget-columns-child-padding-y to keep some room inside it.
   Each theme's narrow layouts follow a narrow column through the
   ut-narrow mixin (wwwroot/css/base/_ut-column-aware.scss). */
.ut-widget-columns__col .ut-widget {
    padding-top: var(--ut-widget-columns-child-padding-y, 0) !important;
    padding-bottom: var(--ut-widget-columns-child-padding-y, 0) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ut-widget-columns__col :is(.cs-container, .au-container) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Bootstrap containers (Default / Alpha): no gutters of their own, and a
   direct .row no longer pulls into them - its columns' padding keeps the
   same inset a row has on the page. */
.ut-widget-columns__col :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ut-widget-columns__col :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid) > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Sized by the column, not the window ----------
   cqi = 1% of the column's width (each column is a size container). */

/* Widget headings: the themes size them by the window (up to 42-48px),
   which overwhelms a third of the page. Every theme's widget title is a
   .ut-widget-title > h2 (Airspace, Cornerstone) or an h2.ut-widget-heading
   (Default, Alpha). */
.ut-widget-columns__col .ut-widget .ut-widget-title h2,
.ut-widget-columns__col .ut-widget h2.ut-widget-heading {
    font-size: clamp(1.25rem, 6.5cqi, 1.875rem);
    line-height: 1.15;
}

.ut-widget-columns__col .ut-widget .ut-widget-title {
    margin-bottom: clamp(1rem, 5cqi, 1.75rem);
}

/* Image Slider: a full-height hero (640px, 88vh...) on the page; in a
   column it is 4:3 of the column's width (75cqi), never so short that the
   title, sub-title and button run into the slide dots (22rem), and its
   overlay title scales with the column. A height, not aspect-ratio: in
   Airspace the slider is also the .swiper, and a ratio + minimum height
   widens it past the column. */
.ut-widget-columns__col .ut-widget-hero-slider,
.ut-widget-columns__col .ut-hero-carousel {
    min-height: 0 !important;
    max-height: none !important;
}

.ut-widget-columns__col .ut-widget-hero-slider {
    height: auto !important;
}

.ut-widget-columns__col .ut-hero-carousel {
    height: max(22rem, 75cqi) !important;
}

.ut-widget-columns__col .ut-widget-hero-slider h1 {
    font-size: clamp(1.75rem, 9cqi, 3rem) !important;
    line-height: 1.05 !important;
}

/* Masonry photo gallery: three columns of tiles on the page; two in a
   narrow column, one in a very narrow one (masonry.js measures the
   grid sizer, so both widths change together). The column class outweighs
   the shared masonry rules the themes compile in after this file. */
@container ut-col (max-width: 560px) {
    .ut-widget-columns__col .ut-widget-photo-gallery--masonry-view .ut-photo-gallery-grid-sizer,
    .ut-widget-columns__col .ut-widget-photo-gallery--masonry-view .ut-photo-gallery-item {
        width: calc(50% - var(--ut-photo-gutter, 16px) / 2);
    }
}

@container ut-col (max-width: 320px) {
    .ut-widget-columns__col .ut-widget-photo-gallery--masonry-view .ut-photo-gallery-grid-sizer,
    .ut-widget-columns__col .ut-widget-photo-gallery--masonry-view .ut-photo-gallery-item {
        width: 100%;
    }
}

/* Bootstrap's grid answers to the window: a Video's "text beside the
   video" (col-lg-7 / col-lg-5, order-lg-*) would squeeze side by side in
   a narrow column. Stack it as on a phone. */
@container ut-col (max-width: 767.98px) {
    .ut-widget .row > [class*="col-md-"],
    .ut-widget .row > [class*="col-lg-"],
    .ut-widget .row > [class*="col-xl-"],
    .ut-widget .row > [class*="col-xxl-"] {
        flex: 0 0 auto;
        width: 100%;
    }

    .ut-widget [class*="order-md-"],
    .ut-widget [class*="order-lg-"],
    .ut-widget [class*="order-xl-"],
    .ut-widget [class*="order-xxl-"] {
        order: 0 !important;
    }
}

/* Facility List (Default / Alpha markup): Default leaves the location map
   at its natural size, wider than a narrow column. Alpha's own minimum
   (min-width beats max-width) and its column rules are unaffected. */
.ut-widget-columns__col .ut-facility-list-item__map-container {
    max-width: 100%;
}

.ut-widget-columns__col .ut-facility-list-item__map-container img {
    max-width: 100%;
}

/* Facility Map: the themes letterbox the map frame (1464 / 540) on wide
   windows; in a narrow column that leaves a sliver, so let its
   min-height drive the frame as it does below lg. */
@container ut-col (max-width: 991.98px) {
    .ut-widget-columns__col .ut-widget-facility-map__group {
        aspect-ratio: auto;
    }
}