/* 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;
}

.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;
}

/* 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);
padding-bottom: var(--hp-padding-bottom);
padding-left: var(--hp-padding-left);
padding-right: var(--hp-padding-right);
/* 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));
margin-right: var(--hp-margin-right, var(--block-margin-right, 0));
}

/* 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,
.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 */
}

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

/* 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;
}

/* Ensure contained sections have centered content */
.hp-layout--contained .feature-block-container,
.hp-layout--contained .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 .main-layout-wrapper,
.hp-layout--fullwidth .hp-section-inner .main-layout-wrapper {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0;
padding-right: 0;
}

/* =============================================================================
   Tabs with Sidebar Container (moved from inline styles for RWD)
   ============================================================================= */
.tabs-with-sidebar-container {
display: flex;
gap: 20px;
align-items: flex-start;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

.tabs-with-sidebar-container .tabs-section {
flex: 2;
min-width: 0;
}

.tabs-with-sidebar-container .latest-section {
flex: 1;
min-width: 280px;
max-width: 320px;
}

/* No sidebar modifier - tabs section takes full width */
.tabs-with-sidebar-container.no-sidebar .tabs-section {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}

/* Tabs scroll buttons (arrows) - matching page-home.css style */
.tabs-header-container .scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #333;
transition: all 0.3s ease;
z-index: 10;
font-size: 18px;
line-height: 1;
padding: 0;
}

.tabs-header-container .scroll-btn.left {
left: 5px;
}

.tabs-header-container .scroll-btn.right {
right: 5px;
}

.tabs-header-container .scroll-btn:hover {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}

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

/* =============================================================================
   Main Layout Wrapper Responsive Overrides
   ============================================================================= */
@media (max-width: 991px) {
.main-layout-wrapper {
flex-direction: column !important;
display: block !important; /* Simplified stacking */
}

#postshow-a,
#postshow-b {
max-width: 100% !important;
flex: none !important;
width: 100% !important;
padding-right: 0 !important; /* Reset any padding if needed */
}

/* Ensure sidebar has top margin when stacked */
#postshow-b {
margin-top: 30px;
padding-left: 0;
}
}

/* Mobile specific styling for Latest Articles module items */
@media (max-width: 768px) {
.main-layout-wrapper .postcard--left-image > a,
.main-layout-wrapper .postcard--right-image > a {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 15px !important;
}
.main-layout-wrapper .postcard--left-image .postcard_thumbnail,
.main-layout-wrapper .postcard--right-image .postcard_thumbnail {
flex: 0 0 160px !important;
width: 160px !important;
max-width: 160px !important;
min-height: auto !important;
}
.main-layout-wrapper .postcard_content {
padding: 0 !important;
flex: 1 !important;
}
.main-layout-wrapper .postcard_title h3 {
font-size: 1.1rem !important;
line-height: 1.4 !important;
margin-bottom: 5px !important;
}
.main-layout-wrapper .postcard_meta {
font-size: 0.85rem !important;
}
}

/* =============================================================================
   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;
}
}

/* Ensure Main Layout Wrapper (Latest Articles) fits perfectly inside Layout Column */
.hd-layout-col .main-layout-wrapper {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}

/* 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;
}
}
 

/* Ensure content inside doesn't overflow */
.hd-layout-col .main-layout-wrapper #postshow-a {
max-width: 100% !important;
flex: 0 0 100% !important;
}

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

/* Base section styles - Only fullwidth when explicitly set */
.hp-section {
width: 100%;
box-sizing: border-box;
/* Shadows disabled by default - enable with .hp-section--with-shadow */
box-shadow: none;
}

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

/* 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;
}

/* 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: none;
}

/* 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 {
box-shadow: 
0 -4px 12px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.08);
}

.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 */
/* Only remove padding for the direct children of the fullwidth section to avoid affecting nested grids */
.hp-mobile-fullwidth > .hp-section-inner,
.hp-mobile-fullwidth > .hp-section-inner > .feature-block-container,
.hp-mobile-fullwidth > .hp-section-inner > .main-layout-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}

/* Ensure internal items don't have double padding if they expect container padding */
.hp-mobile-fullwidth .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;
}
}

/* 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% !important;
max-width: 100% !important;
flex: 0 0 100% !important; /* In case parent is flex */
}

/* 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;
}
}

/* =============================================================================
   Fullwidth Shadow Effects (Top/Bottom)
   ============================================================================= */
/* Top shadow only - must override base box-shadow: none */
.hp-section--fullwidth.has-shadow-top:not(.has-shadow-bottom) {
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Bottom shadow only - must override base box-shadow: none */
.hp-section--fullwidth.has-shadow-bottom:not(.has-shadow-top) {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Both top and bottom shadows */
.hp-section--fullwidth.has-shadow-top.has-shadow-bottom {
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}