/* =====================================================
   Umbraco 17 – Block Grid Layout CSS
   Based on umbraco-starterkit-blockgrid.css
   ===================================================== */

/* Block Grid Layout Container */
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}

/* Block Grid Layout Item */
.umb-block-grid__layout-item {
    position: relative;
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}

/* Mobile: Stack items full-width */
@media (max-width: 767px) {
    .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--grid-columns, 12);
    }
}

/* Tablet and up: Use actual column span */
@media (min-width: 768px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }
}

/* Block Grid Area Container */
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 12)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

/* Block Grid Area - must span according to area-column-span */
.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Mobile: Areas stack full-width */
@media (max-width: 767px) {
    .umb-block-grid__area {
        grid-column-end: span var(--umb-block-grid--area-grid-columns, 12);
    }
}

/* Tablet and up: Areas use their column span */
@media (min-width: 768px) {
    .umb-block-grid__area {
        grid-column-end: span var(--umb-block-grid--area-column-span, 12);
    }
}

/* Content items inside areas: Override column span to match the area's internal grid */
/* This ensures items span full width of their containing area regardless of their ColumnSpan value */
/* The area's internal grid uses --umb-block-grid--grid-columns which may differ from the item's ColumnSpan */
@media (min-width: 768px) {
    .umb-block-grid__area > .umb-block-grid__layout-container > .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--grid-columns, 12);
    }
}

/* Missing view placeholder */
.umb-block-grid__missing-view {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 1rem;
    margin: 0.5rem 0;
    color: #856404;
}

/* Grid wrapper - custom container */
.grid-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/*.footerListLinksLiHorizontal {
    display: inline-block;
    margin-right: 1rem;
}*/

/*.footerListLinksLiVertical {
    display: block;
    margin-bottom: 0.5rem;
}
*/
/* Social footer styles */
/*.nav-menu-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}*/

/*.nav-menu-social li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}*/

/*.nav-menu-social .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}*/

/*.nav-menu-social .socialfootertext {
    margin-left: 0.5rem;
}*/

/* Address widget placeholder */
.address-placeholder,
.social-placeholder,
.news-placeholder {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
}

/* Default Block Grid variables */
:root {
    --umb-block-grid--grid-columns: 12;
    --umb-block-grid--column-gap: 15px;
    --umb-block-grid--row-gap: 15px;
    --umb-block-grid--areas-column-gap: 15px;
    --umb-block-grid--areas-row-gap: 15px;
}

/* Block Grid container - provides Bootstrap-like container behavior */
.umb-block-grid {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Full-width pages can override container max-width */
.homepage .umb-block-grid,
.full-width .umb-block-grid {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Content page wrapper styles */
/*.main-content-wrapper,
.content-page {
    width: 100%;
}*/

.umbraco-forms-hidden {
    display: none;
}