/* ============================================================
   aziPageLayouts.css
   Services page and Products page grid layouts and section
   wrappers. Card components live in aziCards.css.

   COLOUR PHILOSOPHY
   ─────────────────────────────────────────────────────────
   Single accent colour (--color-primary, teal) throughout.
   Group/section headers use neutral slate — no colour
   commitment at the header level. Cards carry all colour.

   SHARED PATTERN — GROUP HEADERS
   ─────────────────────────────────────────────────────────
   Both Services and Products pages use the same group header
   pattern: neutral slate icon + title block + extending rule.
   Services uses .service-group-header / .service-group-icon.
   Products uses .product-group-header / .product-group-icon.
   Both resolve to the same visual result.

   All colour values come from tokens defined in aziBase.css.
   ============================================================ */


/* ============================================================
   SERVICES — SECTION WRAPPER
   ============================================================ */

.services-section {
    background: var(--color-bg-surface);
    padding:    52px 0 56px;
}


/* ============================================================
   SERVICES — GROUP HEADER
   Neutral slate icon + title + extending horizontal rule.
   Same pattern used on Products page (see below).
   ============================================================ */

.service-group-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     36px 0 20px;
}

.service-group-header:first-of-type {
    padding-top: 44px;
}

.service-group-icon {
    width:           36px;
    height:          36px;
    border-radius:   7px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.88rem;
    flex-shrink:     0;
}

.service-group-icon.neutral {
    background: var(--color-neutral-bg);
    color:      var(--color-neutral);
}

.service-group-title h2 {
    font-family:   var(--font-heading);
    font-size:     1.05rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 2px;
}

.service-group-title p {
    font-size:   0.75rem;
    color:       var(--color-text-muted);
    font-weight: 300;
    margin:      0;
}

.service-group-rule {
    flex:        1;
    height:      1px;
    background:  var(--color-border);
    margin-left: 4px;
}

.service-group-divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     26px 0 0;
}


/* ============================================================
   SERVICES — GRID LAYOUTS
   ============================================================ */

/* Operations: 4-column */
.services-grid-4 {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   13px;
    margin-bottom:         13px;
}

/* Development: 2-column */
.services-grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   13px;
    margin-bottom:         13px;
}

/* Two enquiry bands side by side under dev cards */
.services-enquiry-row {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   13px;
}


/* ============================================================
   PRODUCTS — SECTION WRAPPER
   Single white section — software and hardware separated by
   the group header pattern, not by background colour switching.
   ============================================================ */

.products-section {
    background: var(--color-bg-surface);
    padding:    52px 0 56px;
}


/* ============================================================
   PRODUCTS — GROUP HEADER
   Identical visual pattern to the Services group header.
   Neutral slate icon + title + extending rule.
   ============================================================ */

.product-group-header {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     36px 0 20px;
}

.product-group-header:first-of-type {
    padding-top: 44px;
}

/* Neutral slate icon — same treatment as .service-group-icon.neutral */
.product-group-icon {
    width:           36px;
    height:          36px;
    border-radius:   7px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.88rem;
    flex-shrink:     0;
}

.product-group-icon.neutral {
    background: var(--color-neutral-bg);
    color:      var(--color-neutral);
}

.product-group-title h2 {
    font-family:   var(--font-heading);
    font-size:     1.05rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 2px;
}

.product-group-title p {
    font-size:   0.75rem;
    color:       var(--color-text-muted);
    font-weight: 300;
    margin:      0;
}

.product-group-rule {
    flex:        1;
    height:      1px;
    background:  var(--color-border);
    margin-left: 4px;
}

/* Divider between software and hardware groups */
.product-group-divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     26px 0 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .services-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

    .services-section,
    .products-section  { padding: 40px 0 36px; }

    .services-grid-4,
    .services-grid-2,
    .services-enquiry-row { grid-template-columns: 1fr; }

    .service-group-header,
    .product-group-header  { padding-top: 28px; }

    .service-group-header:first-of-type,
    .product-group-header:first-of-type { padding-top: 32px; }
}