/**
 * Applari Stat (lukunosto)
 * Number-highlight block family: a big stat + a click-to-expand explanation
 * that opens inline (accordion), no navigation/modal involved.
 *
 * Two layouts share this file:
 *   .applari-stat-single  – one centered stat (mockup: applari-stat-single-1)
 *   .applari-stat-triple  – three stats side by side (mockup: applari-stat-triple-1)
 *
 * GenerateBlocks structural model (matches this project's convention):
 *   <div class=" applari-stat applari-stat-single">
 *     <div class="gb-container as-inner">
 *       <div class="gb-container as-item">          // one stat unit
 *         ...number/label...
 *         <div class="gb-container as-toggle"> ... </div>   // made a11y button by JS
 *         <div class="gb-container as-panel">
 *           <div class="gb-container as-panel-inner">
 *             <p class="as-panel-content">...</p>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * Containers render WITHOUT an inner wrapper (blockVersion >= 3), so layout is
 * applied directly to the Global Class on each .gb-container.
 *
 * Accordion mechanic: `.as-panel` uses `grid-template-rows: 0fr -> 1fr` so height
 * animates without JS measuring. `js/blocks/applari-stat.js` only toggles the
 * `.is-open` class on `.as-item` and manages `role`/`tabindex`/`aria-expanded` on
 * `.as-toggle` (same accessible-div pattern as index-hero-ring.js).
 *
 * Editor support: every selector has an `.editor-styles-wrapper` twin so the rules
 * win against the block editor's base styles. Editor never runs the frontend JS,
 * so every item renders in its default closed state — a safe, correct fallback.
 */

@media only screen and (min-width: 320px) {

    /* ---- Shared brand tokens + base type (both layouts) ---- */
    .applari-stat,
    .editor-styles-wrapper .applari-stat {
        --as-white: var(--body-bg-clr);
        --as-cream: var(--grey);
        --as-green: var(--dark-green);
        --as-orange: var(--orange);
        --as-ink-soft: rgba(43, 43, 40, 0.62);
        --as-line: rgba(22, 51, 44, 0.14);
        color: #2b2b28;
    }

    /* In a dark section the block takes the section's text color. */
    .dark-color-section .applari-stat,
    .editor-styles-wrapper .dark-color-section .applari-stat {
        color: var(--font-clr);
    }

    /* ---- Shared accordion mechanics ---- */
    .applari-stat .as-toggle,
    .editor-styles-wrapper .applari-stat .as-toggle {
        margin-top: 18px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-weight: 700;
        user-select: none;
    }

    .applari-stat .as-toggle-icon,
    .editor-styles-wrapper .applari-stat .as-toggle-icon {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--link-clr);
        transition: background 0.3s ease;
    }

    .applari-stat .as-toggle-icon::before,
    .applari-stat .as-toggle-icon::after,
    .editor-styles-wrapper .applari-stat .as-toggle-icon::before,
    .editor-styles-wrapper .applari-stat .as-toggle-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transition: transform 0.35s ease, background 0.3s ease;
    }

    .applari-stat .as-toggle-icon::before,
    .editor-styles-wrapper .applari-stat .as-toggle-icon::before {
        width: 11px;
        height: 1.5px;
        transform: translate(-50%, -50%);
    }

    .applari-stat .as-toggle-icon::after,
    .editor-styles-wrapper .applari-stat .as-toggle-icon::after {
        width: 1.5px;
        height: 11px;
        transform: translate(-50%, -50%);
    }

    .applari-stat .as-item.is-open .as-toggle-icon,
    .editor-styles-wrapper .applari-stat .as-item.is-open .as-toggle-icon {
        background: var(--link-clr);
    }

    .applari-stat .as-item.is-open .as-toggle-icon::before,
    .applari-stat .as-item.is-open .as-toggle-icon::after,
    .editor-styles-wrapper .applari-stat .as-item.is-open .as-toggle-icon::before,
    .editor-styles-wrapper .applari-stat .as-item.is-open .as-toggle-icon::after {
        background: #fff;
    }

    .applari-stat .as-item.is-open .as-toggle-icon::after,
    .editor-styles-wrapper .applari-stat .as-item.is-open .as-toggle-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
        opacity: 0;
    }

    .applari-stat .as-panel{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.45s ease;
    }

    .applari-stat .as-item.is-open .as-panel{
        grid-template-rows: 1fr;
    }
    .editor-styles-wrapper .applari-stat .as-panel{
        display: block;
    }
    .applari-stat .as-panel-inner{
        overflow: hidden;
    }

    .applari-stat .as-panel-content{
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: var(--as-ink-soft);
    }
    .dark-color-section .applari-stat .as-panel-content{
        color: var(--font-clr);
    }
    /* ============================================================
       .applari-stat-single — one centered stat
       ============================================================ */
    .applari-stat-single,
    .editor-styles-wrapper .applari-stat-single {
        
    }

    .applari-stat-single .as-inner,
    .editor-styles-wrapper .applari-stat-single .as-inner {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .applari-stat-single .as-eyebrow,
    .editor-styles-wrapper .applari-stat-single .as-eyebrow {
        margin: 0 0 18px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--as-orange);
    }

    .applari-stat-single .as-number,
    .editor-styles-wrapper .applari-stat-single .as-number {
        margin: 0;
        font-weight: 600;
        font-size: 64px;
        line-height: 1;
        letter-spacing: -0.02em;
        font-family:var(--title-font);
    }

    .applari-stat-single .as-number sup,
    .editor-styles-wrapper .applari-stat-single .as-number sup {
        font-size: 0.32em;
        font-weight: 600;
        margin-left: 4px;
        top: -0.5em;
        color: var(--as-orange);
    }

    .applari-stat-single .as-label,
    .editor-styles-wrapper .applari-stat-single .as-label {
        margin: 0 auto;
        max-width: 44ch;
        font-size: 17px;
        line-height: 1.5;
    }

    .applari-stat-single .as-toggle,
    .editor-styles-wrapper .applari-stat-single .as-toggle {
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .applari-stat-single .as-panel-content,
    .editor-styles-wrapper .applari-stat-single .as-panel-content {
        margin: 26px auto 0;
        max-width: 54ch;
        padding-top: 26px;
        border-top: 1px solid var(--as-line);
        text-align: left;
    }
    .dark-color-section .applari-stat-single .as-panel-content{
        border-top-color: var(--link-clr);
    }
    /*Fleet numbers*/
    .fleet-numbers-wrapper{
        margin-top:40px;
    }
    .fleet-numbers .as-item{
        margin-bottom: 40px;
    }
    .fleet-numbers .applari-stat .as-toggle, .editor-styles-wrapper .fleet-numbers .applari-stat .as-toggle{
        gap:6px;
        align-items: center;
        flex-direction: column;
    }
    .fleet-numbers .applari-stat .as-toggle-icon, .editor-styles-wrapper .fleet-numbers .applari-stat .as-toggle-icon{
        width: 20px;
        height: 20px;
    }
    .fleet-numbers .applari-stat-single .as-label, .editor-styles-wrapper .fleet-numbers .applari-stat-single .as-label{
        font-size:13px;
        min-height: 40px;
    }
    .fleet-numbers-marker{
        font-size:24px;
    }
    .as-number[data-applari-stat="haettu-teksti"] {
        font-style: italic;
    }
}

/* ---- Tablet ---- */
@media only screen and (min-width: 768px) {
    .applari-stat-single .as-number,
    .editor-styles-wrapper .applari-stat-single .as-number {
        font-size: 96px;
    }
}

/* ---- Desktop ---- */
@media only screen and (min-width: 1280px) {

    .applari-stat-single .as-number,
    .editor-styles-wrapper .applari-stat-single .as-number {
        font-size: 128px;
    }
     /*Fleet numbers*/
     .fleet-numbers .applari-stat .as-toggle, .editor-styles-wrapper .fleet-numbers .applari-stat .as-toggle{
        gap:10px;
        flex-direction: row;
    }
    .fleet-numbers .applari-stat .as-toggle-icon, .editor-styles-wrapper .fleet-numbers .applari-stat .as-toggle-icon{
        width: 30px;
        height: 30px;
    }
    .fleet-numbers .applari-stat-single .as-label, .editor-styles-wrapper .fleet-numbers .applari-stat-single .as-label{
        font-size:17px;
        min-height:55px;
    }
}