/* ========================================
   IRONTEC SERVICES WIDGET
   Namespaced CSS - No conflicts with WordPress
   ======================================== */

/* ========================================
   SERVICES REVEAL SECTION
   ======================================== */

/* Image can overflow vertically; horizontal clip to prevent bottom scrollbar */
.ict-s-reveal {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ict-s-reveal *,
.ict-s-reveal *::before,
.ict-s-reveal *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Green overlay – circle/glow position controlled by --ict-s-glow-x, --ict-s-glow-y (mouse-follow) */
.ict-s-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse 60% 80% at var(--ict-s-glow-x, 75%) var(--ict-s-glow-y, 50%),
        #496B2E 0%,
        rgba(73, 107, 46, 0.6) 25%,
        rgba(73, 107, 46, 0.3) 45%,
        transparent 70%
    );
    opacity: 0.4;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

/* Brighter when any card is active/hovered */
.ict-s-reveal:has(.ict-s-item.ict-s-active)::after {
    opacity: 1;
}

.ict-s-wrapper {
    position: relative;
    max-width: none;
    margin: 0 auto;
    /* padding: 0 80px; */
    display: flex;
    align-items: center;
    min-height: 100vh;
    z-index: 2;
    overflow: visible;
}

/* ========================================
   LEFT COLUMN - SERVICES LIST
   ======================================== */

.ict-s-list {
    flex: 1;
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 200;
}

/* ========================================
   SERVICE ITEM - DEFAULT STATE (COLLAPSED)
   ======================================== */

.ict-s-item {
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    width: 100%;
    z-index: 200;
}

/* Last item: same gap below as above (heading padding) so top/bottom balance */
.ict-s-item:last-child {
    padding-bottom: 72px;
}

/* ========================================
   SERVICE HEADING (ALWAYS VISIBLE)
   ======================================== */

.ict-s-heading {
    padding: 72px 0;
    transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ict-s-title {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    margin: 0;
}

.ict-s-number {
    font-size: 26px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 12px;
    letter-spacing: 0;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   SERVICE DETAILS (HIDDEN BY DEFAULT)
   ======================================== */

.ict-s-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-5px);
    transition:
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ict-s-description {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 28px;
    max-width: 680px;
}

.ict-s-cta {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 1.2px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ffffff;
    position: relative;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ict-s-cta::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #6fb88f, #4a9d7f);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ict-s-cta:hover {
    color: #6fb88f;
    border-bottom-color: transparent;
}

.ict-s-cta:hover::after {
    width: 100%;
}

/* Service Divider - Full Width; equal margin so gap between items is same above/below */
.ict-s-divider {
    position: relative;
    width: 100vw;
    margin-left: calc(-80px);
    margin-top: 32px;
    margin-bottom: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ACTIVE STATE - HOVER REVEAL
   ======================================== */

.ict-s-item.ict-s-active {
    padding-bottom: 0;
}

.ict-s-item.ict-s-active .ict-s-heading {
    padding: 40px 0;
}

.ict-s-item.ict-s-active .ict-s-number {
    color: rgba(255, 255, 255, 0.6);
}

.ict-s-item.ict-s-active .ict-s-details {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 40px;
}

.ict-s-item.ict-s-active .ict-s-cta {
    opacity: 1;
    transform: translateY(0);
}

.ict-s-item.ict-s-active .ict-s-divider {
    margin-top: 32px;
}

/* ========================================
   DIM NON-ACTIVE ITEMS ON HOVER
   ======================================== */

.ict-s-item:not(.ict-s-active) {
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ict-s-list:hover .ict-s-item:not(.ict-s-active) {
    opacity: 0.3;
}

/* ========================================
   RIGHT COLUMN - MULTI-LAYER IMAGE SYSTEM
   CRITICAL: All images stacked, controlled via opacity
   ======================================== */

/* Image aligns with active accordion item (smooth top transition); no scrollbar, image may overflow */
.ict-s-image-reveal-container {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 450px;
    height: 550px;
    overflow: visible;
    pointer-events: auto;
    z-index: 250;
    cursor: default;
    transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ict-s-image-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ========================================
   IMAGE LAYER - SAME AS IRONTEC.COM REVEAL
   Quick fade + subtle zoom, smooth ease-out (irontec.com services section)
   ======================================== */

.ict-s-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transform: rotate(-8deg) scale(0.92);
    transform-origin: center center;
    pointer-events: none;
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.ict-s-image-layer.ict-s-active {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
    pointer-events: auto;
    z-index: 100;
    cursor: default;
}

/* Cursor-follow wrap: no transition so follow is instant; no border-radius */
.ict-s-image-layer .ict-s-image-follow-wrap {
    position: absolute;
    inset: 0;
    display: block;
    transform: translate(var(--ict-s-follow-x, 0), var(--ict-s-follow-y, 0));
    border-radius: 0;
}

/* Image inside each layer – shadow + Irontec-style reveal (no extra transform on img) */
.ict-s-reveal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    cursor: default;
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 25px 50px rgba(0, 0, 0, 0.35),
        -8px 12px 40px rgba(0, 0, 0, 0.4);
}

/* Subtle hover lift on active image */
.ict-s-image-layer.ict-s-active:hover .ict-s-reveal-image {
    box-shadow:
        0 60px 120px rgba(0, 0, 0, 0.55),
        0 30px 60px rgba(0, 0, 0, 0.4),
        -10px 14px 50px rgba(0, 0, 0, 0.45);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Desktop */
@media screen and (max-width: 1400px) {
    .ict-s-image-reveal-container {
        width: 420px;
        height: 520px;
        right: -50px;
    }
}

/* Tablet Landscape – hide image from 1200px and below */
@media screen and (max-width: 1200px) {
    .ict-s-wrapper {
        padding: 0 60px;
    }

    .ict-s-divider {
        margin-left: -60px;
    }

    .ict-s-title {
        font-size: 48px;
    }

    .ict-s-image-reveal-container {
        display: none !important;
    }
}

/* Tablet Portrait */
@media screen and (max-width: 1024px) {
    .ict-s-wrapper {
        flex-direction: column;
        padding: 60px 40px;
    }

    .ict-s-divider {
        margin-left: -40px;
    }

    .ict-s-list {
        max-width: 100%;
        width: 100%;
    }

    .ict-s-title {
        font-size: 42px;
    }

    .ict-s-item.ict-s-active {
        padding-bottom: 0;
    }

    .ict-s-image-reveal-container {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 400px;
        height: 400px;
        margin: 40px auto 0;
    }

    .ict-s-image-layer {
        transform: rotate(-4deg) scale(0.92);
    }

    .ict-s-image-layer.ict-s-active {
        transform: rotate(-4deg) scale(1);
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .ict-s-reveal {
        padding: 40px 0;
        min-height: auto;
    }

    .ict-s-wrapper {
        padding: 0 24px;
        min-height: auto;
    }

    .ict-s-divider {
        margin-left: -24px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .ict-s-item.ict-s-active {
        padding-bottom: 0;
    }

    .ict-s-heading {
        padding: 32px 0;
    }

    .ict-s-item.ict-s-active .ict-s-heading {
        padding: 32px 0;
    }

    .ict-s-title {
        font-size: 32px;
    }

    .ict-s-number {
        font-size: 20px;
        display: block;
        margin-bottom: 8px;
    }

    .ict-s-description {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .ict-s-cta {
        font-size: 12px;
    }

    .ict-s-item.ict-s-active .ict-s-divider {
        margin-top: 24px;
    }

    .ict-s-item:last-child {
        padding-bottom: 32px;
    }

    .ict-s-image-reveal-container {
        max-width: 100%;
        height: 320px;
        margin-top: 30px;
    }

    .ict-s-image-layer {
        transform: rotate(-2deg) scale(0.92);
    }

    .ict-s-image-layer.ict-s-active {
        transform: rotate(-2deg) scale(1);
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    .ict-s-title {
        font-size: 26px;
    }

    .ict-s-number {
        font-size: 18px;
    }

    .ict-s-description {
        font-size: 14px;
    }

    .ict-s-image-reveal-container {
        height: 280px;
    }
}