/**
 * @file
 * Banner Title Overlay styles.
 * 
 * Uses CSS custom properties for responsive scaling:
 * --overlap-desktop: Set inline from Drupal block config
 * --padding-desktop: Set inline from Drupal block config
 */

/* Container positioning */
.shss-banner-title-overlay {
    position: relative;
    z-index: 10;
    pointer-events: none;
    /* Use CSS custom properties with fallbacks */
    margin-top: var(--overlap-desktop, -280px);
    padding-bottom: var(--padding-desktop, 100px);
}

/* Wrapper for each line */
.shss-title-line-wrapper {
    margin-bottom: 10px;
}

.shss-title-line-wrapper:last-child {
    margin-bottom: 0;
}

/* Expand from left animation */
@keyframes shssTitleExpandFromLeft {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Common title styling */
.shss-title-line {
    display: inline-block;
    color: #fff;
    font-size: 52px;
    font-weight: 600;
    font-family: "Muli", Arial, sans-serif;
    line-height: 1.3;
    padding: 14px 32px;
    clip-path: inset(0 100% 0 0);
    animation: shssTitleExpandFromLeft 1.2s ease-out forwards;
}

/* Line 1: First animation */
.shss-title-line-1 {
    animation-delay: 0.3s;
}

/* Line 2: Second animation (delayed) */
.shss-title-line-2 {
    animation-delay: 0.9s;
}

/* ============================================
   ALIGNMENT OPTIONS
   ============================================ */

/* Left alignment (default) */
.shss-banner-title-overlay--align-left {
    text-align: left;
    padding-left: 40px;
    padding-right: 0;
}

/* Center alignment */
.shss-banner-title-overlay--align-center {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}

/* Right alignment */
.shss-banner-title-overlay--align-right {
    text-align: right;
    padding-left: 0;
    padding-right: 40px;
}

/* Animation direction adjustments for center */
.shss-banner-title-overlay--align-center .shss-title-line {
    animation-name: shssTitleExpandFromCenter;
}

/* Animation direction adjustments for right */
.shss-banner-title-overlay--align-right .shss-title-line {
    animation-name: shssTitleExpandFromRight;
}

/* Expand from center animation */
@keyframes shssTitleExpandFromCenter {
    from {
        clip-path: inset(0 50% 0 50%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Expand from right animation */
@keyframes shssTitleExpandFromRight {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet landscape and smaller desktops */
@media (max-width: 1200px) {
    .shss-banner-title-overlay {
        /* Scale overlap to ~70% of desktop value */
        margin-top: calc(var(--overlap-desktop, -280px) * 0.7);
        padding-bottom: calc(var(--padding-desktop, 100px) * 0.7);
    }
    .shss-banner-title-overlay--align-left {
        padding-left: 30px;
    }
    .shss-banner-title-overlay--align-right {
        padding-right: 30px;
    }
    .shss-title-line {
        font-size: 40px;
        padding: 12px 26px;
    }
}

/* Tablet portrait */
@media (max-width: 992px) {
    .shss-banner-title-overlay {
        /* Scale overlap to ~55% of desktop value */
        margin-top: calc(var(--overlap-desktop, -280px) * 0.55);
        padding-bottom: calc(var(--padding-desktop, 100px) * 0.55);
    }
    .shss-banner-title-overlay--align-left {
        padding-left: 25px;
    }
    .shss-banner-title-overlay--align-right {
        padding-right: 25px;
    }
    .shss-title-line {
        font-size: 34px;
        padding: 11px 22px;
    }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
    .shss-banner-title-overlay {
        /* Scale overlap to ~40% of desktop value */
        margin-top: calc(var(--overlap-desktop, -280px) * 0.4);
        padding-bottom: calc(var(--padding-desktop, 100px) * 0.4);
    }
    .shss-banner-title-overlay--align-left {
        padding-left: 20px;
    }
    .shss-banner-title-overlay--align-right {
        padding-right: 20px;
    }
    .shss-banner-title-overlay--align-center {
        padding-left: 15px;
        padding-right: 15px;
    }
    .shss-title-line {
        font-size: 26px;
        padding: 10px 18px;
    }
    .shss-title-line-wrapper {
        margin-bottom: 6px;
    }
}

/* Medium phones */
@media (max-width: 576px) {
    .shss-banner-title-overlay {
        /* Scale overlap to ~30% of desktop value */
        margin-top: calc(var(--overlap-desktop, -280px) * 0.3);
        padding-bottom: calc(var(--padding-desktop, 100px) * 0.3);
    }
    .shss-banner-title-overlay--align-left {
        padding-left: 15px;
    }
    .shss-banner-title-overlay--align-right {
        padding-right: 15px;
    }
    .shss-banner-title-overlay--align-center {
        padding-left: 10px;
        padding-right: 10px;
    }
    .shss-title-line {
        font-size: 22px;
        padding: 8px 14px;
    }
    .shss-title-line-wrapper {
        margin-bottom: 5px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .shss-banner-title-overlay {
        /* Scale overlap to ~25% of desktop value */
        margin-top: calc(var(--overlap-desktop, -280px) * 0.25);
        padding-bottom: calc(var(--padding-desktop, 100px) * 0.25);
    }
    .shss-banner-title-overlay--align-left {
        padding-left: 12px;
    }
    .shss-banner-title-overlay--align-right {
        padding-right: 12px;
    }
    .shss-banner-title-overlay--align-center {
        padding-left: 8px;
        padding-right: 8px;
    }
    .shss-title-line {
        font-size: 18px;
        padding: 6px 12px;
    }
    .shss-title-line-wrapper {
        margin-bottom: 4px;
    }
}