/**
 * docs/design/04_Grid_System.md — mobile-first, container caps at 1320px
 * even on ultra-wide monitors (full-bleed reserved for hero backgrounds only).
 */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 640px) {
    .container { padding-inline: var(--space-6); }
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-8); }
}

@media (min-width: 1024px) {
    .container { max-width: var(--container-lg); padding-inline: var(--space-10); }
}

@media (min-width: 1280px) {
    .container { max-width: var(--container-xl); padding-inline: var(--space-10); }
}

@media (min-width: 1536px) {
    .container { max-width: var(--container-2xl); }
}

.card-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
    .card-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

/* minmax(0, 1fr) (not bare 1fr) so a long label's min-content width can
   never blow a track wider than the container and push tiles off-screen
   on narrow viewports. */
.industry-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (min-width: 1024px) {
    .industry-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.industry-tile-grid .industry-tile { min-width: 0; }

.two-col-split {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .two-col-split { grid-template-columns: 7fr 5fr; }
    .two-col-split--even { grid-template-columns: 6fr 6fr; }
    .sidebar-layout { grid-template-columns: 8fr 4fr; }
}

.contact-layout, .sidebar-layout {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .contact-layout { grid-template-columns: 7fr 5fr; }
}

.section {
    position: relative;
    padding-block: var(--space-12);
}

/* Subtle hairline divider instead of an abrupt flat-white-to-flat-white cut
   between consecutive plain sections — colour-variant sections (tint/wash/
   alt/dark) already carry their own strong boundary and skip this. */
.section:not(.section--dark):not(.section--tint):not(.section--wash):not(.section--alt):not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-neutral-200), transparent);
    pointer-events: none;
}

@media (min-width: 768px) {
    .section { padding-block: var(--space-16); }
}

@media (min-width: 1024px) {
    .section { padding-block: var(--space-24); }
}

.section--compact { padding-block: var(--space-12); }
.section--narrow { padding-block: var(--space-12); }
.section--alt { background: var(--color-neutral-100); }

/* ---------- Section background alternation ----------
   White (.section) / light-blue (--tint) / gradient (--wash) / dark navy
   (--dark) rotate down the homepage so no two consecutive sections share a
   background — each variant restyles .eyebrow/headings/body text through
   these same selectors, so no component-level dark-mode CSS is needed. */
.section--tint { background: var(--color-secondary-100); }

.section--wash {
    background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-white) 100%);
}

/* Dark showcase band with a subtle grid pattern + soft top/bottom fade so
   it reads as an intentional visual anchor, not an abrupt colour switch. */
.section--dark { position: relative; background: var(--color-primary-900); overflow: hidden; }
.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 20%, transparent 78%);
    pointer-events: none;
}
/* Soft top-edge glow instead of an abrupt colour switch when entering a
   dark showcase band — reads as an intentional transition, not a hard cut. */
.section--dark::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    z-index: 0;
    pointer-events: none;
}
.section--dark > .container { position: relative; z-index: 1; }
.section--dark .eyebrow { color: var(--color-info-600); }
.section--dark h2,
.section--dark h3,
.section--dark h5 { color: var(--color-white); }
.section--dark p { color: var(--color-neutral-300); }
.section--dark .card { background: var(--color-primary-700); border-color: var(--color-primary-500); }
.section--dark .card__description { color: var(--color-neutral-300); }

@media (min-width: 768px) {
    .card-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
}