/* category-icons.css */

.animate-icons-wrapper {
    text-align: center;
}

.stage-icons-wrapper {
    container-type: inline-size;
}

.stage-icons-title {
    text-align: center;
    margin-bottom: 1em;
    font-weight: 300;
    font-size: 1.5em;
}

.stage-icons-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    padding: 10px 0;
    gap: 0;
}

.stage-icon-block {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 200px;
    margin: 0 -15px;
    text-align: center;
}

/* Clickable stage icon block (pill style) */
a.stage-icon-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

a.stage-icon-link:hover {
    transform: scale(1.05);
}

a.stage-icon-link:active {
    transform: scale(0.95);
}

.icon-block svg {
    height: auto;
    display: block;
    margin: 0 auto;
}

.icon-block svg path:first-of-type {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
}

.trust-icon-block svg {
    width: 70px;
}

.stage-icon-block svg {
    width: 100px;
}

/* Trust Icons Flexible Grid - Auto-responsive based on container width */
.trust-icons-wrapper {
    container-type: inline-size;
    container-name: trust-icons;
}

.trust-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 30px;
    max-width: 100%;
    margin: 0 auto;
    justify-items: center;
    align-items: start;
}

/* Container queries - responds to actual container width, not viewport */
@container trust-icons (min-width: 900px) {
    .trust-icons-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 1200px;
    }
}

@container trust-icons (min-width: 600px) and (max-width: 899px) {
    .trust-icons-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 800px;
    }
}

@container trust-icons (max-width: 599px) {
    .trust-icons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px 10px;
    }

    .trust-icon-block svg {
        width: 50px;
    }

    .trust-icon-label {
        font-size: 11px;
    }
}

.trust-icon-label {
    font-size: 14px;
    margin-top: 0.5em;
    text-align: center;
}

.animate-icons .icon-block:nth-of-type(1) svg path:first-of-type {
    animation-delay: 0s;
}
.animate-icons .icon-block:nth-of-type(2) svg path:first-of-type {
    animation-delay: 0.75s;
}
.animate-icons .icon-block:nth-of-type(3) svg path:first-of-type {
    animation-delay: 1.5s;
}
.animate-icons .icon-block:nth-of-type(4) svg path:first-of-type {
    animation-delay: 2.25s;
}
.animate-icons .icon-block:nth-of-type(5) svg path:first-of-type {
    animation-delay: 3s;
}
.animate-icons .icon-block:nth-of-type(6) svg path:first-of-type {
    animation-delay: 3.75s;
}

.animate-icons .icon-block svg path:first-of-type {
    animation: draw-path 3s ease forwards;
    animation-fill-mode: forwards;
}


@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

/* After PJAX: skip to end state instantly (no animation) */
.animation-complete .icon-block svg path:first-of-type {
    animation: none !important;
    stroke-dashoffset: 0 !important;
}

.stage-label {
    font-weight: bold;
    letter-spacing: 0.02em;
    text-align: center;
    font-size: 0.7rem;
    display: inline-block;
    margin-top: 10px;
}

.stage-label.pill {
    padding: 0.05em 0.3em;
    border-radius: 999px;
    color: white;
    min-width: 70px;
    text-decoration: none;
}

/* ==========================================================================
   Desktop: Larger icons and text (1.5x scale, keeping flex behavior)
   ========================================================================== */

@media screen and (min-width: 850px) {
    .stage-icon-block {
        max-width: 300px;        /* 200 * 1.5 */
        margin: 0 -22px;         /* -15 * 1.5 ~= -22 */
    }

    .stage-icon-block svg {
        width: 150px;           /* 100 * 1.5 */
    }

    .stage-icons-title {
        font-size: 1.4em;
        margin-bottom: 0.8em;
    }

    .stage-label {
        font-size: 1rem;         /* 0.7 * 1.5 ~= 1.05 */
        margin-top: 15px;        /* 10 * 1.5 */
    }

    .stage-label.pill {
        padding: 0.08em 0.45em;  /* 0.05/0.3 * 1.5 */
        min-width: 105px;        /* 70 * 1.5 */
    }

    .trust-icon-block svg {
        width: 100px;
    }

    .trust-icon-label {
        font-size: 17px;
        margin-top: 0.7em;
    }
}

/* Container query - must come after @media to take precedence */
@container (min-width: 1200px) {
    .stage-icons-title {
        font-size: 2.2em;
    }
}

/* Pill hover effect when inside clickable link */
a.stage-icon-link:hover .stage-label.pill {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Homepage stage icons - light background container */
.home-stage-icons {
    background: #f7f7f7;
    border-radius: 16px;
    padding: 25px 0 30px;
    box-sizing: border-box;
    container-type: inline-size;
}

.stage-label.text {
    background: none;
}

.aliza-pink { background-color: var(--aliza-pink); color: white; }
.text.aliza-pink { color: var(--aliza-pink); background: none; }

.aliza-dark-beige { background-color: var(--aliza-dark-beige); color: white; }
.text.aliza-dark-beige { color: var(--aliza-dark-beige); background: none; }

.aliza-green { background-color: var(--aliza-green); color: white; }
.text.aliza-green { color: var(--aliza-green); background: none; }

.aliza-brown { background-color: var(--aliza-brown); color: white; }
.text.aliza-brown { color: var(--aliza-brown); background: none; }

.aliza-blue { background-color: var(--aliza-blue); color: white; }
.text.aliza-blue { color: var(--aliza-blue); background: none; }