/* =========================================================
   App Development Methodology — Public Styles v1.1
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Google+Sans:wght@400;500;700&display=swap');

/* ---- Section wrapper ---- */
.adm-section {
    width: 100%;
    box-sizing: border-box;
    padding: 70px 24px;
    font-family: 'Google Sans', sans-serif;
}
/* ---- Section header ---- */
.adm-header {
    text-align: center;
    margin-bottom: 30px; /* spec: 2762 - (2704+28) = 30px gap */
}

.adm-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
    color: #191919;
    margin: 0 0 18px; /* normalized section title-to-desc gap */
    padding: 0;
}

.adm-desc {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3 !important;
    letter-spacing: 0;
    color: #778AA9;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
}

/* ---- Grid ---- */
.adm-grid {
    display: grid;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;    /* Center the grid within the section's padding */
    width: 100%;
    box-sizing: border-box;
}

/* Desktop: admin-set columns */
.adm-cols-1 { grid-template-columns: 305px; justify-content: center; }
.adm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.adm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.adm-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 641px to 1024px - Tablet */
@media (max-width: 1024px) and (min-width: 641px) {
    .adm-tablet-1 { grid-template-columns: repeat(1, 1fr); }
    .adm-tablet-2 { grid-template-columns: repeat(2, 1fr); }
    .adm-tablet-3 { grid-template-columns: repeat(3, 1fr); }
}

/* 1025px to 1200px - Laptop */
@media (max-width: 1200px) and (min-width: 1025px) {
    .adm-section {
        padding-left: 48px;
        padding-right: 48px;
    }
    .adm-grid {
        gap: 16px;
    }
}

/* Up to 640px - Mobile */
@media (max-width: 640px) {
    .adm-grid,
    [class*="adm-mobile-"] {
        grid-template-columns: 1fr;
    }
}

/* ---- Card ---- */
.adm-card {
    width: 100%;
    /* let the grid track shrink below the card's content width so the grid
       can't overflow horizontally (default grid-item min-width is auto) */
    min-width: 0;
    background: #FFFFFF;
    border-radius: 35px;
    border: 1px solid #DDDDDD;
    box-shadow: none;
    /* Symmetric top/bottom padding. It used to be 20px top vs 28px bottom. */
    padding: 24px 20px;
    box-sizing: border-box;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    /* Centred, so the whitespace above and below the content is ALWAYS equal.
       Padding alone couldn't guarantee that: `min-height` plus the grid
       stretching every card to the tallest in its row means most cards are
       taller than their content, and with the content top-anchored all of that
       slack piled up underneath it (~23px above vs ~52px below). Centring
       splits the slack evenly instead. */
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
    position: relative;
}

.adm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0px 12px 40px 4px rgba(0, 0, 0, 0.10);
}

/* ---- Card header: icon + title row ---- */
.adm-card-header {
    display: flex;
    align-items: center;
    gap: 10px; /* spec: title left(151) - icon left(106) - icon width(35) = 10px */
    margin-bottom: 16px; /* spec: desc top(2842) - (icon top(2788) + icon height(35)) = 19px ≈ 16-18px */
}

.adm-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
}

.adm-card-icon svg {
    width: 35px;
    height: 35px;
    display: block;
}

.adm-card-icon-img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: block;
}

.adm-card-title {
    font-family: 'Google Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    color: #191919;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ---- Card description ---- */
.adm-card-desc {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #778AA9;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
}

/* =========================================================
   Scroll-reveal entrance — "Diagonal cascade"
   Header fades + rises first, then the cards fade in and
   rise (translateY 40px) with a whisper of scale (0.96 -> 1),
   staggered card 1 -> last. opacity + transform only, so the
   1px card borders stay crisp and layout never shifts.
   ========================================================= */

/* Initial (pre-reveal) state — only applied once JS adds .adm-reveal,
   so content stays fully visible if JS fails to load. */
.adm-section.adm-reveal .adm-header {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
    will-change: opacity, transform;
}

.adm-section.adm-reveal .adm-card {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Diagonal stagger — header leads, then card 1 ... card 6 */
.adm-section.adm-reveal .adm-card:nth-child(1) { transition-delay: 0.30s; }
.adm-section.adm-reveal .adm-card:nth-child(2) { transition-delay: 0.44s; }
.adm-section.adm-reveal .adm-card:nth-child(3) { transition-delay: 0.58s; }
.adm-section.adm-reveal .adm-card:nth-child(4) { transition-delay: 0.72s; }
.adm-section.adm-reveal .adm-card:nth-child(5) { transition-delay: 0.86s; }
.adm-section.adm-reveal .adm-card:nth-child(6) { transition-delay: 1.00s; }
.adm-section.adm-reveal .adm-card:nth-child(n+7) { transition-delay: 1.14s; }

/* Revealed (in-view) state */
.adm-section.adm-reveal.adm-in .adm-header,
.adm-section.adm-reveal.adm-in .adm-card {
    opacity: 1;
    transform: none;
}

/* After the cascade finishes, JS adds .adm-done so the card hover
   (translateY(-6px)) keeps its original snappy .25s transition. */
.adm-section.adm-reveal.adm-done .adm-card {
    transition: transform .25s ease, box-shadow .25s ease;
    transition-delay: 0s;
    will-change: auto;
}
.adm-section.adm-reveal.adm-done .adm-header {
    transition: none;
    will-change: auto;
}

/* Respect reduced-motion — no movement, content simply present. */
@media (prefers-reduced-motion: reduce) {
    .adm-section.adm-reveal .adm-header,
    .adm-section.adm-reveal .adm-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}