/**
 * Layout Container - Grid and Carousel styles.
 */

.pendari-layout-container {
    width: 100%;
    margin-bottom: 20px;
}

/* Grid Layout */
.pendari-layout-grid .pendari-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--pendari-grid-cols-mobile, 1), 1fr) !important;
    gap: var(--pendari-grid-gap, 20px) !important;
    /* align-items controls vertical positioning of items within each row */
    align-items: var(--pendari-grid-v-align, flex-start) !important;
}

@media (min-width: 768px) {
    .pendari-layout-grid .pendari-grid-wrapper {
        grid-template-columns: repeat(var(--pendari-grid-cols-tablet, 2), 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .pendari-layout-grid .pendari-grid-wrapper {
        grid-template-columns: repeat(var(--pendari-grid-cols-desktop, 3), 1fr) !important;
    }
}

/* Equal Height Rows (Grid) */
.pendari-layout-equal-height.pendari-layout-grid .pendari-grid-wrapper {
    align-items: stretch !important;
}

/* Target direct children of the grid wrapper (the actual widgets) */
.pendari-layout-equal-height.pendari-layout-grid .pendari-grid-wrapper > * {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* When equal height is on, the child should fill the container, but we still respect vertical alignment inside the child if possible */
.pendari-layout-equal-height.pendari-layout-grid .pendari-grid-wrapper > * > * {
    flex: 1 !important;
    height: 100% !important;
}

/* Ensure widget link and inner content also stretch */
.pendari-layout-equal-height.pendari-layout-grid .pendari-grid-wrapper .pendari-widget-link,
.pendari-layout-equal-height.pendari-layout-grid .pendari-grid-wrapper .pendari-widget-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Carousel Layout (Swiper) */
.pendari-layout-carousel {
    position: relative !important;
    width: 100% !important;
    padding: 0 60px !important; /* Space for arrows */
    box-sizing: border-box !important;
    
    /* Swiper CSS Variables */
    --swiper-pagination-bullet-width: 16px;
    --swiper-pagination-bullet-height: 16px;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-navigation-size: 30px;
}

.pendari-layout-carousel .swiper {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Navigation arrows — native <button> elements, browser defaults reset */
.pendari-layout-carousel .swiper-button-next,
.pendari-layout-carousel .swiper-button-prev {
    appearance: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: var(--pendari-carousel-arrow-color, #0073aa) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: -40px !important;
    z-index: 10 !important;
    position: absolute !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pendari-layout-carousel .swiper-button-prev {
    left: 10px !important;
}

.pendari-layout-carousel .swiper-button-next {
    right: 10px !important;
}

/* WCAG 2.4.11 — visible keyboard focus indicator (AAA: 2.4.12 enhanced) */
.pendari-layout-carousel .swiper-button-next:focus-visible,
.pendari-layout-carousel .swiper-button-prev:focus-visible {
    outline: 3px solid var(--pendari-carousel-arrow-color, #0073aa) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
}

/* Pause / Play button — hidden by default, shown on hover/focus */
.pendari-carousel-pause {
    appearance: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 2px solid var(--pendari-carousel-arrow-color, #0073aa);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pendari-carousel-arrow-color, #0073aa);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Hidden visually but stays in the tab order — visibility:hidden would remove it from tab flow */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.pendari-layout-carousel:hover .pendari-carousel-pause,
.pendari-carousel-pause:focus-visible,
.pendari-layout-carousel:focus-within .pendari-carousel-pause {
    opacity: 1;
    pointer-events: auto;
}

.pendari-carousel-pause:focus-visible {
    outline: 3px solid var(--pendari-carousel-arrow-color, #0073aa);
    outline-offset: 3px;
}

/* Pause icon — two vertical bars via ::before / ::after */
.pendari-carousel-pause:not([aria-pressed="true"])::before,
.pendari-carousel-pause:not([aria-pressed="true"])::after {
    content: '';
    display: block;
    width: 3px;
    height: 13px;
    background: currentColor;
    border-radius: 1px;
}

/* Play icon — right-facing triangle via border trick */
.pendari-carousel-pause[aria-pressed="true"] {
    gap: 0;
}

.pendari-carousel-pause[aria-pressed="true"]::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
}

.pendari-carousel-pause[aria-pressed="true"]::after {
    display: none;
}

.pendari-layout-carousel .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    box-sizing: border-box !important;
    justify-content: var(--pendari-carousel-v-align, flex-start) !important;
    /* align-items deliberately omitted (defaults to stretch) so widget children always
       fill the full slide width. Horizontal content alignment is per-widget. */
}

/* Slide children always fill the slide width so widgets with hover states, absolute
   positioned elements, or backgrounds render correctly. */
.pendari-layout-carousel .swiper-slide > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
}

/* Pagination Dots */
.pendari-layout-carousel .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 30px !important;
}

.pendari-layout-carousel .swiper-pagination-bullet {
    background: var(--pendari-carousel-dot-color, #ccc) !important;
    opacity: 1 !important;
    position: relative !important;
    cursor: pointer !important;
    border: none !important;
    /* Expand touch target to WCAG 2.5.5 (44x44px) without enlarging the visual dot.
       With --swiper-pagination-bullet-width/height at 16px: (44-16)/2 = 14px padding each side. */
    padding: 14px !important;
    box-sizing: content-box !important;
    background-clip: content-box !important;
}

.pendari-layout-carousel .swiper-pagination-bullet-active {
    background: var(--pendari-carousel-dot-active-color, #0073aa) !important;
    background-clip: content-box !important;
}

/* WCAG 2.4.11/2.4.12: Focus styles — keyboard only via :focus-visible */
.pendari-layout-carousel .swiper-pagination-bullet:focus-visible {
    outline: 3px solid var(--pendari-carousel-dot-active-color, #0073aa) !important;
    outline-offset: 4px !important;
}

.pendari-layout-carousel .swiper-slide:focus-within {
    outline: 3px solid var(--pendari-carousel-dot-active-color, #0073aa) !important;
    outline-offset: 2px !important;
}

/* Swiper equal height: slide children must fill the slide height so widget
   backgrounds and borders span the full card height. */
.pendari-layout-equal-height.pendari-layout-carousel .swiper-slide > * {
    width: 100% !important;
    height: calc(100% - 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 35px !important;
}

/* Mirror the grid equal-height stretching for widget-link and widget-inner. */
.pendari-layout-equal-height.pendari-layout-carousel .swiper-slide .pendari-widget-link,
.pendari-layout-equal-height.pendari-layout-carousel .swiper-slide .pendari-widget-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}