/*
 * CormackCoreWeb 2.0 - Percentage-Based Row/Module Grid System
 * Author: Charlie - Cormack Advertising
 *
 * Usage: Build page layouts as rows of modules with percentage widths.
 * Base: 20-column grid (each column = 5%), supports 5% increments.
 *
 * Example row: 25% + 25% + 20% + 20% + 10% = 100%
 *   <div class="ccw-row">
 *     <div class="ccw-mod ccw-mod--25">...</div>
 *     <div class="ccw-mod ccw-mod--25">...</div>
 *     <div class="ccw-mod ccw-mod--20">...</div>
 *     <div class="ccw-mod ccw-mod--20">...</div>
 *     <div class="ccw-mod ccw-mod--10">...</div>
 *   </div>
 */

/* ===== Row Container ===== */
.ccw-row {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: var(--space-xs, 8px);
    align-items: stretch;
}

.ccw-row + .ccw-row {
    margin-top: var(--space-xs, 8px);
}

/* ===== Module Spans (percentage → column count) ===== */
/* 5% = 1 col */
.ccw-mod--5  { grid-column: span 1; }
/* 10% = 2 cols */
.ccw-mod--10 { grid-column: span 2; }
/* 15% = 3 cols */
.ccw-mod--15 { grid-column: span 3; }
/* 20% = 4 cols */
.ccw-mod--20 { grid-column: span 4; }
/* 25% = 5 cols */
.ccw-mod--25 { grid-column: span 5; }
/* 30% = 6 cols */
.ccw-mod--30 { grid-column: span 6; }
/* 35% = 7 cols */
.ccw-mod--35 { grid-column: span 7; }
/* 40% = 8 cols */
.ccw-mod--40 { grid-column: span 8; }
/* 45% = 9 cols */
.ccw-mod--45 { grid-column: span 9; }
/* 50% = 10 cols */
.ccw-mod--50 { grid-column: span 10; }
/* 55% = 11 cols */
.ccw-mod--55 { grid-column: span 11; }
/* 60% = 12 cols */
.ccw-mod--60 { grid-column: span 12; }
/* 65% = 13 cols */
.ccw-mod--65 { grid-column: span 13; }
/* 70% = 14 cols */
.ccw-mod--70 { grid-column: span 14; }
/* 75% = 15 cols */
.ccw-mod--75 { grid-column: span 15; }
/* 80% = 16 cols */
.ccw-mod--80 { grid-column: span 16; }
/* 85% = 17 cols */
.ccw-mod--85 { grid-column: span 17; }
/* 90% = 18 cols */
.ccw-mod--90 { grid-column: span 18; }
/* 95% = 19 cols */
.ccw-mod--95 { grid-column: span 19; }
/* 100% = 20 cols (full width) */
.ccw-mod--100 { grid-column: span 20; }

/* ===== Module Base Styling ===== */
.ccw-mod {
    position: relative;
    border-radius: var(--radius, 10px);
    overflow: hidden;
    min-height: 280px;
}

/* ===== Module Card Styles ===== */
.ccw-mod .mod-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--space-md, 24px);
    display: flex;
    flex-direction: column;
}

/* Background image layer */
.ccw-mod .mod-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Background video layer */
.ccw-mod .mod-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Tint overlays */
.ccw-mod .mod-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ccw-mod .mod-tint--dark {
    background: rgba(0, 0, 0, 0.35);
}

.ccw-mod .mod-tint--gradient-top {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 60%);
}

.ccw-mod .mod-tint--gradient-bottom {
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.45) 100%);
}

/* Content positioning helpers */
.ccw-mod .mod-inner--top {
    justify-content: flex-start;
}

.ccw-mod .mod-inner--center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ccw-mod .mod-inner--bottom {
    justify-content: flex-end;
}

/* Badge (top-left icon) */
.ccw-mod .mod-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius, 10px);
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.ccw-mod .mod-badge img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Round badge (top-right) */
.ccw-mod .mod-badge-round {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.ccw-mod .mod-badge-round img,
.ccw-mod .mod-badge-round svg {
    width: 28px;
    height: 28px;
}

/* Feature icon (bottom-left circle) */
.ccw-mod .mod-fi {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 3;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 20px rgba(27, 79, 48, 0.08);
}

/* CTA link */
.ccw-mod .mod-cta {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    margin-top: auto;
    z-index: 3;
}

.ccw-mod .mod-cta img {
    width: 13px;
    height: 13px;
}

/* On-media text (white) */
.ccw-mod.mod--on-media h3,
.ccw-mod.mod--on-media p {
    color: #ffffff;
}

.ccw-mod.mod--on-media p {
    color: rgba(255, 255, 255, 0.9);
}

/* ===== Row Height Variants ===== */
.ccw-row--sm .ccw-mod { min-height: 180px; }
.ccw-row--md .ccw-mod { min-height: 280px; }
.ccw-row--lg .ccw-mod { min-height: 380px; }
.ccw-row--xl .ccw-mod { min-height: 480px; }
.ccw-row--auto .ccw-mod { min-height: auto; }

/* ===== Multi-Row Span ===== */
.ccw-mod--span-2rows { grid-row: span 2; }
.ccw-mod--span-3rows { grid-row: span 3; }

/* ===== Section Wrapper ===== */
.ccw-section {
    padding: var(--space-lg, 40px) 0;
}

.ccw-section > .container {
    max-width: var(--container-max, 1380px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 38px);
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    .ccw-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .ccw-mod {
        grid-column: span 1 !important;
    }

    /* Full-width modules stay full-width */
    .ccw-mod--100 {
        grid-column: 1 / -1 !important;
    }

    /* Modules >= 50% go full-width on tablet */
    .ccw-mod--50,
    .ccw-mod--55,
    .ccw-mod--60,
    .ccw-mod--65,
    .ccw-mod--70,
    .ccw-mod--75,
    .ccw-mod--80,
    .ccw-mod--85,
    .ccw-mod--90,
    .ccw-mod--95 {
        grid-column: 1 / -1 !important;
    }

    .ccw-mod--span-2rows,
    .ccw-mod--span-3rows {
        grid-row: span 1;
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
    .ccw-row {
        grid-template-columns: 1fr;
    }

    .ccw-mod {
        grid-column: 1 / -1 !important;
        min-height: 220px;
    }

    .ccw-row--sm .ccw-mod { min-height: 140px; }
}