/**
 * Shared block styles for reusable template parts:
 *  - tile-slider (Owl)            template-parts/tile-slider.php
 *  - video-facade + MicroModal    template-parts/video-facade.php
 *  - feature-media (accordion+media) template-parts/feature-media-section.php
 */

/* ============================================================
   TILE SLIDER
   ============================================================ */
.c-section__tile-slider {
    position: relative;
    padding: 80px 0;
    background-color: #f5f5f5;
}
/* Overflow variant: full-bleed track, so the section must hide horizontal spill. */
.c-section__tile-slider--overflow {
    overflow: hidden;
}
/* Optional decorative background image, behind all content.
   Positioned bottom-left with auto dimensions so nav buttons remain visible. */
.tile-slider__bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
/* Lift the section's own content above the background image. */
.c-section__tile-slider--has-bg > .container,
.c-section__tile-slider--has-bg > .tile-slider__viewport {
    position: relative;
    z-index: 1;
}
.c-section__tile-slider .c-title--underline {
    margin-bottom: 20px;
}
.tile-slider__intro {
    max-width: 820px;
    margin: 0 auto 40px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    text-align: center;
}

/* --- Overflow viewport: first card aligns with the container's left edge,
   the rest of the track bleeds to the right edge of the screen and fades out
   over the last 4rem via a CSS mask. --- */
.tile-slider__viewport {
    /* Left edge aligns with the container's left content edge. With no width
       set, the block fills from there to the section's right edge, bleeding the
       track off the right screen edge. The mask fades BOTH edges over 4rem;
       Owl's stagePadding (set in slider.js) insets the track so the first card
       sits past the left fade — fully visible at rest, fading softly only as
       cards slide into the left edge. */
    margin-left: max(15px, calc((100% - 1640px) / 2 + 15px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
}
/* Give the clipped stage vertical breathing room so card shadows aren't cut. */
.tile-slider__viewport .owl-stage-outer {
    padding: 24px 0 44px;
    margin: -24px 0 -44px;
}

/* Equal-height tiles: Owl floats its autoWidth items, so cards would size to
   their own content. Flexing the stage + items stretches every card to the
   tallest one in view (cross-axis stretch), keeping the row uniform. */
.c-slider--tiles.owl-carousel .owl-stage { display: flex; }
.c-slider--tiles.owl-carousel .owl-item { display: flex; }
.c-slider--tiles.owl-carousel .owl-item .tile-slider__card { height: auto; }

/* --- Card: references the solutions-ai "comparison" tiles. --- */
.c-slider--tiles .tile-slider__card {
    background: #fff;
    padding: 0 0 40px;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tile-slider__media {
    margin-bottom: 24px;
    line-height: 0;
}
.tile-slider__media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
/* Legacy icon support (SAP Joule tiles still use small icons). */
.tile-slider__icon {
    margin: 35px 30px 20px;
}
.tile-slider__icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.tile-slider__card h3 {
    margin: 14px 30px 14px;
}
.tile-slider__body {
    margin: 0 30px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.tile-slider__body p { margin-bottom: 10px; }
.tile-slider__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tile-slider__body ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
.tile-slider__body ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #C23035;
    font-weight: bold;
}

/* --- Bundled nav arrows, below the track, aligned with the container's left edge. --- */
.tile-slider__nav {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    justify-content: flex-end;
}
.tile-slider__arrow {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.tile-slider__arrow:hover {
    border-color: #C23035;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.tile-slider__arrow img { width: 20px; height: auto; }
.tile-slider__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
    border-color: #d8d8d8;
}

/* ============================================================
   VIDEO FACADE
   ============================================================ */
.video-facade {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
}
.video-facade__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.video-facade:hover .video-facade__img { transform: scale(1.03); }
.video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.92;
}
.video-facade:hover .video-facade__play {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
}
.video-facade__label {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: #d00000;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 2px;
}

/* ============================================================
   MICROMODAL
   ============================================================ */
.modal { display: none; }
.modal.is-open { display: block; }
.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}
.modal__container {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.modal__close {
    position: absolute;
    top: -38px;
    right: 0;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.modal__close::before,
.modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background: #fff;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.modal__video-embed,
.modal__video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@keyframes mmfadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } }
.micromodal-slide.is-open .modal__overlay { animation: mmfadeIn 0.25s; }
.micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 0.25s; }

/* ============================================================
   FEATURE-MEDIA SECTION (accordion + image/quote/video)
   ============================================================ */
.c-section__feature-media {
    padding: 90px 0;
    background-color: #fff;
}
.feature-media__grid {
    display: flex;
    gap: 60px;
    align-items: center;
}
.feature-media__text { flex: 1 1 50%; }
.feature-media__media { flex: 1 1 50%; }
.feature-media__text .section-heading {
    font-size: 36px;
    font-weight: 700;
    color: #000C2D;
    margin: 0 0 15px;
    line-height: 1.3;
}
.feature-media__text .heading-divider {
    width: 60px;
    height: 3px;
    background-color: #C23035;
    margin: 0 0 25px;
}
.feature-media__intro {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 30px;
}
.feature-media__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* media = quote block (dark navy card, mirrors solutions-ai .quote-card;
   optional absolutely-positioned bg image) */
.feature-media__quote {
    position: relative;
    overflow: hidden;
    background-color: #000C2D;
    color: #fff;
    padding: 45px 40px;
    border-radius: 2px;
}
/* Optional background image, behind the content. */
.feature-media__quote-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Dark scrim over the bg image so the quote text stays legible. */
.feature-media__quote--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 12, 45, 0.82);
    z-index: 0;
}
.feature-media__quote > *:not(.feature-media__quote-bg) {
    position: relative;
    z-index: 1;
}
.feature-media__quote .quote-text {
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.95);
}
.feature-media__quote .quote-author { display: flex; align-items: center; gap: 15px; }
.feature-media__quote .quote-avatar {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.feature-media__quote .author-name {
    display: block; font-weight: 700; color: #C23035; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
}
.feature-media__quote .author-position {
    display: block; font-size: 11px; color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
}

/* accordion (single-open, red bar) reused in feature-media */
.feature-accordion .feature-accordion-item {
    border-left: 3px solid #e5e5e5;
    padding: 4px 0 4px 20px;
    margin-bottom: 4px;
    transition: border-color 0.3s ease;
}
.feature-accordion .feature-accordion-item.active { border-left-color: #C23035; }
.feature-accordion .feature-accordion-toggle {
    background: none; border: none; padding: 0; margin: 0; width: 100%;
    text-align: left; cursor: pointer; font-family: inherit;
}
.feature-accordion .feature-accordion-toggle h3 {
    font-size: 16px; font-weight: 700; color: #000C2D; margin: 0; padding: 8px 0; line-height: 1.5;
}
.feature-accordion .feature-accordion-toggle:hover h3 { color: #C23035; }
.feature-accordion .feature-accordion-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    font-size: 14px; line-height: 1.6; color: #333;
    padding-bottom: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding-bottom 0.35s ease;
}
.feature-accordion .feature-accordion-item.active .feature-accordion-panel {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 10px;
}
.feature-accordion .feature-accordion-panel p { margin-bottom: 10px; }

@media only screen and (max-width: 991px) {
    .c-section__tile-slider { padding: 50px 0; }
    .tile-slider__media img { height: 170px; }
    /* Shorten the symmetric fade on small screens so cards stay legible. */
    .tile-slider__viewport {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
    }
    .c-section__feature-media { padding: 50px 0; }
    .feature-media__grid { flex-direction: column; gap: 35px; }
    .feature-media__text .section-heading { font-size: 28px; }
}