/* Homepage Layouts CSS */

/* =============================================================================
   General Postcard Content Alignment (Applies to All Layouts)
   ============================================================================= */
.postcard.ex {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.postcard.ex > a {
width: 100%;
display: flex;
box-sizing: border-box;
/*padding: 10px;*/
}

.postcard_content {
text-align: left !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.postcard_title,
.postcard_excerpt,
.postcard_meta {
text-align: left !important;
width: 100%;
box-sizing: border-box;
}

.hp-section.hp-section--disable-hover-underline a:hover,
.hp-section.hp-section--disable-hover-underline a:hover *,
.hp-section.hp-section--disable-hover-underline a:focus,
.hp-section.hp-section--disable-hover-underline a:focus *,
.popular-content-section.popular-content-section--disable-hover-underline a:hover,
.popular-content-section.popular-content-section--disable-hover-underline a:hover *,
.popular-content-section.popular-content-section--disable-hover-underline a:focus,
.popular-content-section.popular-content-section--disable-hover-underline a:focus * {
text-decoration: none !important;
}

/* Dynamic Alignment Overrides */
.text-align-left,
.text-align-left .postcard_title,
.text-align-left .post-card-title,
.text-align-left .postcard_excerpt,
.text-align-left .postcard_meta,
.text-align-left .category-card-name,
.text-align-left .category-post-title,
.text-align-left .category-post-excerpt,
.text-align-left .category-post-date,
.text-align-left .category-card-count,
.text-align-left .category-card-content,
.text-align-left .post-card-date,
.text-align-left .hp-section-title {
text-align: left !important;
}

.text-align-center,
.text-align-center .postcard_title,
.text-align-center .post-card-title,
.text-align-center .postcard_excerpt,
.text-align-center .postcard_meta,
.text-align-center .category-card-name,
.text-align-center .category-post-title,
.text-align-center .category-post-excerpt,
.text-align-center .category-post-date,
.text-align-center .category-card-count,
.text-align-center .category-card-content,
.text-align-center .post-card-date,
.text-align-center .hp-section-title {
text-align: center !important;
}

.text-align-right,
.text-align-right .postcard_title,
.text-align-right .post-card-title,
.text-align-right .postcard_excerpt,
.text-align-right .postcard_meta,
.text-align-right .category-card-name,
.text-align-right .category-post-title,
.text-align-right .category-post-excerpt,
.text-align-right .category-post-date,
.text-align-right .category-card-count,
.text-align-right .category-card-content,
.text-align-right .post-card-date,
.text-align-right .hp-section-title {
text-align: right !important;
}

/* Explicit Item Layout Directions */
.postcard--left-image > a {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}

.postcard--right-image > a {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: 20px;
}

.postcard--top-image > a {
display: flex;
flex-direction: column;
}

/* Ensure content takes available space in row layouts */
.postcard--left-image .postcard_content,
.postcard--right-image .postcard_content {
flex: 1;
min-width: 0;
padding: 0 15px;
}

.postcard--top-image .postcard_content {
width: 100%;
padding-top: 15px;
}

/* Ensure thumbnail sizing for row layouts */
.postcard--left-image .postcard_thumbnail,
.postcard--right-image .postcard_thumbnail {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
}

.postcard--top-image .postcard_thumbnail {
width: 100%;
height: 200px;
}

/* Allow custom thumbnail sizing when explicitly set - Must override specific layouts */
.has-custom-thumb-size .postcard_thumbnail,
article.has-custom-thumb-size .postcard_thumbnail,
.has-fixed-small .postcard_thumbnail,
.has-fixed-medium .postcard_thumbnail,
.has-fixed-large .postcard_thumbnail {
flex: initial !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: initial !important;
}

/* Fixed Preset Sizes (Square & Centered) */
.has-fixed-small .postcard_thumbnail {
width: 120px !important;
height: 120px !important;
flex: 0 0 120px !important;
}

.has-fixed-medium .postcard_thumbnail {
width: 150px !important;
height: 150px !important;
flex: 0 0 150px !important;
}

.has-fixed-large .postcard_thumbnail {
width: 200px !important;
height: 200px !important;
flex: 0 0 200px !important;
}

.has-fixed-small .postcard_thumbnail img,
.has-fixed-medium .postcard_thumbnail img,
.has-fixed-large .postcard_thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}

.has-custom-thumb-size .postcard_thumbnail img,
article.has-custom-thumb-size .postcard_thumbnail img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
object-fit: contain !important;
}

/* Global hp-section variables */
.hp-section {
background-color: var(--hp-bg-color, transparent);
padding-top: var(--hp-padding-top, 0);
padding-bottom: var(--hp-padding-bottom, 0);
padding-left: var(--hp-padding-left, 0);
padding-right: var(--hp-padding-right, 0);
/* Bridge variables: Support both --hp-margin and --block-margin */
margin-top: var(--hp-margin-top, var(--block-margin-top, 30px)) !important;
margin-bottom: var(--hp-margin-bottom, var(--block-margin-bottom, 30px)) !important;
margin-left: var(--hp-margin-left, var(--block-margin-left, 0)) !important;
margin-right: var(--hp-margin-right, var(--block-margin-right, 0)) !important;
min-height: var(--hp-min-height-desktop, auto);
}

/* Global Container Max Width */
.category-cards-block .feature-block-container,
.collection-slider-block .feature-block-container,
.tagcloud-block .feature-block-container,
.image-carousel-block .feature-block-container,
.hp-main-layout-wrapper {
display: flex; /* Ensure flex for main layout */
flex-wrap: wrap;
max-width: var(--rwd-max-width-desktop, 1280px);
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box; /* Crucial for percentage widths */
}

.hp-section-header--inner-width {
max-width: var(--rwd-max-width-desktop, 1280px);
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}

.hp-main-layout-wrapper.main-layout-wrapper--reverse {
flex-direction: row-reverse;
}

.hp-main-layout-wrapper > #postshow-a {
max-width: var(--hp-main-layout-main-width, 70%) !important;
flex: 1 1 var(--hp-main-layout-main-width, 70%) !important;
width: var(--hp-main-layout-main-width, 70%) !important;
box-sizing: border-box;
}

.hp-main-layout-wrapper > #postshow-b {
max-width: var(--hp-main-layout-sidebar-width, 30%) !important;
flex: 1 1 var(--hp-main-layout-sidebar-width, 30%) !important;
width: var(--hp-main-layout-sidebar-width, 30%) !important;
box-sizing: border-box;
}

.custom-sidebar-section--has-bg {
padding: 15px;
border-radius: 4px;
background-color: var(--custom-sidebar-bg, transparent);
}

.hp-category-header {
padding: 20px 40px;
margin: 20px auto;
border: 0;
border-radius: 8px;
background-color: var(--hp-category-header-bg, #f5f5f5);
color: var(--hp-category-header-color, #333);
}

.hp-category-header__title {
margin: 0 0 10px;
color: inherit;
font-size: 1.5rem;
}

.hp-category-header__description {
color: inherit;
}

/* Fix unwanted aspect ratio from CLS prevention */
.hp-main-layout-wrapper .postcard_thumbnail {
aspect-ratio: auto !important;
min-height: auto !important;
}

.postcard_thumbnail--relative {
    position: relative;
}

.main-layout-header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-layout-title--inline {
    display: flex;
    align-items: center;
    margin: 0;
}

.main-layout-title-icon {
    margin-right: 10px;
    font-size: 1.3rem;
}

.feature-block-title--left-accent {
    border-color: var(--accent-color);
    text-align: left;
}

/* Layout Row & Columns */
.hd-layout-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
clear: both;
margin-left: -10px;
margin-right: -10px;
}

.hd-layout-col {
flex: 0 0 var(--col-width, 100%);
max-width: var(--col-width, 100%);
box-sizing: border-box;
padding: 0 10px;
}

.hd-layout-col.hd-mode-right {
margin-left: auto;
}

.hd-layout-col--push-right {
margin-left: auto;
}

.search-block:not(.style-minimal) {
    background-color: var(--search-block-bg, #f5f5f5);
}

.load-more-container--centered {
    text-align: center;
    margin-top: 30px;
}

.infinite-scroll-trigger--sentinel {
    height: 20px;
}

/* Ensure contained sections have centered content */
.hp-layout--contained .feature-block-container,
.hp-layout--contained .hp-main-layout-wrapper {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
}

/* Fullwidth sections - content inside hp-section-inner should fill the inner container */
.hp-section--fullwidth .hp-section-inner .feature-block-container,
.hp-layout--fullwidth .hp-section-inner .feature-block-container,
.hp-section--fullwidth .hp-section-inner .hp-main-layout-wrapper,
.hp-layout--fullwidth .hp-section-inner .hp-main-layout-wrapper {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0;
padding-right: 0;
}


/* =============================================================================
   Visual Layout Editor Row Styles
   ============================================================================= */
.hd-layout-row {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}

.hd-layout-col {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

/* Ensure child modules fill the column */
.hd-layout-col .feature-block-container {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}

@media (max-width: 768px) {
.hd-layout-row {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
display: block !important; /* Stack columns */
}

.hd-layout-col {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 20px;
}
}


/* Mobile Full Width Helper */
@media (max-width: 768px) {
.mobile-full-width {
margin-left: -15px !important;
margin-right: -15px !important;
width: auto !important;
max-width: none !important;
border-radius: 0 !important;
}

.mobile-full-width .feature-block-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
 


/* =============================================================================
   Homepage Section Layout Styles (hp-section)
   ============================================================================= */

/* Base section styles - Only fullwidth when explicitly set */
.hp-section {
width: 100%;
box-sizing: border-box;
position: relative;
--hp-section-shadow-base: 0 0 0 rgba(0, 0, 0, 0);
--hp-section-shadow-edge-top: 0 0 0 rgba(0, 0, 0, 0);
--hp-section-shadow-edge-bottom: 0 0 0 rgba(0, 0, 0, 0);
/* Shadows disabled by default - enable with .hp-section--with-shadow */
box-shadow: var(--hp-section-shadow-base);
}

/* Enable shadows for specific sections - full block shadow */
.hp-section--with-shadow {
--hp-section-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08);
box-shadow: var(--hp-section-shadow-base);
}

/* Base section inner - always centered at 1280px */
.hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
width: 100% !important;
display: block !important;
}

/* Contained layout (default) - 1280px max width, centered */
.hp-layout--contained .hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
display: block !important;
}

/* Custom layout - respects custom percentage width */
.hp-layout--custom .hp-section-inner {
max-width: var(--hp-custom-width, 100%) !important;
width: var(--hp-custom-width, 100%) !important;
}

/* Alignment Modes for Custom Width */
.hp-layout--custom:not(.hp-custom-width--narrow) .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

.hp-layout--custom.hp-custom-width--narrow.hp-mode--left .hp-section-inner {
margin-left: 0 !important;
margin-right: auto !important;
}

.hp-layout--custom.hp-custom-width--narrow.hp-mode--right .hp-section-inner {
margin-left: auto !important;
margin-right: 0 !important;
}

.hp-mode--full .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

/* Fullwidth layout - background full width, content centered at 1280px */
/* Only apply fullwidth when explicitly set */
.hp-section--fullwidth,
.hp-layout--fullwidth {
width: 100vw !important;
max-width: 100vw !important;
position: relative;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
/* Shadows disabled by default */
box-shadow: var(--hp-section-shadow-base);
}

/* Enable shadows for fullwidth sections if needed - top and bottom shadow */
.hp-section--fullwidth.hp-section--with-shadow,
.hp-layout--fullwidth.hp-section--with-shadow {
--hp-section-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08);
box-shadow: var(--hp-section-shadow-base);
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
max-width: 1280px !important; /* Content should still be centered at 1280px */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px;
padding-right: 20px;
width: 100% !important;
display: block !important;
}

/* Override parent container max-width constraints for homepage sections */
/* Break out of .site-main, #main, .fc-content-wrapper max-width: 1200px */
/* Only apply fullwidth breakout for sections that have fullwidth class */
.site-main .hp-section--fullwidth,
#main .hp-section--fullwidth,
.fc-content-wrapper .hp-section--fullwidth,
.site-main .hp-layout--fullwidth,
#main .hp-layout--fullwidth,
.fc-content-wrapper .hp-layout--fullwidth {
width: 100vw !important;
max-width: 100vw !important;
position: relative;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}

/* Prevent horizontal scroll from viewport width technique */
body {
overflow-x: hidden;
}

/* Reset inner container to normal flow and center at 1280px */
.site-main .hp-section-inner,
#main .hp-section-inner,
.fc-content-wrapper .hp-section-inner {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
position: relative;
left: auto !important;
right: auto !important;
}

/* Ensure tabs and carousel containers are centered */
.site-main .hp-section-inner .tabs-with-sidebar-container,
#main .hp-section-inner .tabs-with-sidebar-container,
.fc-content-wrapper .hp-section-inner .tabs-with-sidebar-container,
.site-main .hp-section-inner .rwd-slider-main-area,
#main .hp-section-inner .rwd-slider-main-area,
.fc-content-wrapper .hp-section-inner .rwd-slider-main-area,
.site-main .hp-section-inner .rwd-slider-wrapper,
#main .hp-section-inner .rwd-slider-wrapper,
.fc-content-wrapper .hp-section-inner .rwd-slider-wrapper,
.site-main .hp-section-inner .collection-slider-block,
#main .hp-section-inner .collection-slider-block,
.fc-content-wrapper .hp-section-inner .collection-slider-block,
.site-main .hp-section-inner .image-carousel-block,
#main .hp-section-inner .image-carousel-block,
.fc-content-wrapper .hp-section-inner .image-carousel-block {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}


/* Padding variations */
.hp-padding--none .hp-section-inner {
padding-top: 0;
padding-bottom: 0;
}

.hp-padding--small .hp-section-inner {
padding-top: 15px;
padding-bottom: 15px;
}

.hp-padding--normal .hp-section-inner {
padding-top: 25px;
padding-bottom: 25px;
}

.hp-padding--large .hp-section-inner {
padding-top: 40px;
padding-bottom: 40px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
.hp-section-inner {
padding-left: 15px;
padding-right: 15px;
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
padding-left: 15px;
padding-right: 15px;
}
}

@media (max-width: 767px) {
.hp-section-inner {
padding-left: 10px;
padding-right: 10px;
}

.hp-section--fullwidth .hp-section-inner,
.hp-layout--fullwidth .hp-section-inner {
padding-left: 10px;
padding-right: 10px;
}

.hp-padding--normal .hp-section-inner {
padding-top: 20px;
padding-bottom: 20px;
}

.hp-padding--large .hp-section-inner {
padding-top: 30px;
padding-bottom: 30px;
}
}

@media (max-width: 767px) {
/* Mobile Full Width Layout */
/* Keep a single configurable mobile gutter on the outer section container. */
.hp-mobile-fullwidth > .hp-section-inner {
padding-left: var(--hp-mobile-gutter-left, 0) !important;
padding-right: var(--hp-mobile-gutter-right, 0) !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}

/* Inner containers stay full width so the configured gutter is not doubled. */
.hp-mobile-fullwidth > .hp-section-inner > .feature-block-container,
.hp-mobile-fullwidth > .hp-section-inner > .hp-main-layout-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

/* Module group sections add an extra row/column chain that also needs to defer to
   the outer mobile gutter, otherwise tabs + widgets end up with double spacing. */
.hp-mobile-fullwidth.hp-section--module_group > .hp-section-inner > .hd-layout-row {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

.hp-mobile-fullwidth.hp-section--module_group > .hp-section-inner > .hd-layout-row > .hd-layout-col {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container,
.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container .tabs-section,
.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container .latest-section,
.hp-mobile-fullwidth.hp-section--module_group .widget-area-wrapper {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}

.hp-mobile-fullwidth.hp-section--module_group .tabs-with-sidebar-container {
padding-left: 0 !important;
padding-right: 0 !important;
}

.hp-mobile-fullwidth .hp-section-header--inner-width {
padding-left: 0 !important;
padding-right: 0 !important;
}

/* Ensure internal items don't have double padding if they expect container padding */
.hp-mobile-fullwidth .hp-main-layout-wrapper .postcard {
border-radius: 0 !important; /* Remove border radius for full width look */
border-left: none !important;
border-right: none !important;
}

/* Restore proper box sizing for layout columns on mobile to prevent overflow */
.hd-layout-col {
 box-sizing: border-box !important;
}

/* Ensure custom width sections are full width on mobile */
.hp-layout--custom .hp-section-inner {
    max-width: 100% !important;
    width: 100% !important;
}

.hp-section {
min-height: var(--hp-min-height-mobile, var(--hp-min-height-desktop, auto));
}
}

/* Responsive Visibility Utilities */
@media (min-width: 1024px) {
.hide-on-desktop {
display: none !important;
}
}

@media (min-width: 768px) and (max-width: 1023px) {
.hide-on-tablet {
display: none !important;
}
}

@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}

/* =============================================================================
   Slider Width Fix (Module Separation)
   ============================================================================= */
/* Ensure slider section takes full width now that it is decoupled from popular aside */
.slider-section,
.slider-content-wrapper,
.rwd-slider-wrapper {
width: 100%;
max-width: 100%;
flex: 1 1 100%; 
}

/* Ensure top block container allows full width children */
.top-block-container {
width: 100%;
}

/* =============================================================================
   Responsive Visibility Utilities
   ============================================================================= */
@media (min-width: 1025px) {
.hd-hide-desktop {
display: none !important;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.hd-hide-tablet {
display: none !important;
}
}

@media (max-width: 767px) {
.hd-hide-mobile {
display: none !important;
}
}

/* Final alignment guard: only true narrow custom sections may align to an edge. */
.hp-section:not(.hp-layout--custom) > .hp-section-inner,
.hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
.site-main .hp-section:not(.hp-layout--custom) > .hp-section-inner,
#main .hp-section:not(.hp-layout--custom) > .hp-section-inner,
.fc-content-wrapper .hp-section:not(.hp-layout--custom) > .hp-section-inner,
.site-main .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
#main .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner,
.fc-content-wrapper .hp-section.hp-layout--custom:not(.hp-custom-width--narrow) > .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

.hp-section.hp-section--module_group.hp-layout--custom.hp-custom-width--narrow.hp-mode--left > .hp-section-inner,
.hp-section--module_group.hp-mode--left > .hp-section-inner {
margin-left: auto !important;
margin-right: auto !important;
}

/* =============================================================================
   Fullwidth Shadow Effects (Top/Bottom)
   ============================================================================= */
/* Edge shadows are directional pseudo-elements, so bottom-only shadow never leaks upward. */
.hp-section.has-shadow-top {
--hp-section-shadow-edge-top: linear-gradient(to top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}

.hp-section.has-shadow-bottom {
--hp-section-shadow-edge-bottom: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}

.hp-section.has-shadow-top::before,
.hp-section.has-shadow-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 14px;
pointer-events: none;
z-index: 2;
}

.hp-section.has-shadow-top::before {
top: 0;
transform: translateY(-100%);
background: var(--hp-section-shadow-edge-top);
}

.hp-section.has-shadow-bottom::after {
bottom: 0;
transform: translateY(100%);
background: var(--hp-section-shadow-edge-bottom);
}