/* ==============================================
   OUR SERVICES — services-destinations.css
   Icon grid section shown on the front page,
   right below the hero search widget.
   Enqueue via: wp_enqueue_style() — front page only.
   ============================================== */

#tx-services {
    padding: 60px 0 50px;
    background: #fff;
}

#tx-services h2 {
    font-family: 'Oswald', sans-serif;
    font-size:   clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color:       var(--color-navy, #00406B);
    margin-bottom: 6px;
}

#tx-services > .container > .row:first-child p {
    color: var(--color-muted, #6c757d);
    font-size: 0.95rem;
}

.tx-services-row {
    display:               grid;
    grid-template-columns: repeat(8, 1fr);
    gap:                   12px;
}

.tx-service-card {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    text-align:       center;
    text-decoration:  none;
    background:       #fff;
    border:           1px solid var(--color-border, #e9ecef);
    border-radius:    10px;
    padding:          20px 8px;
    transition:       transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tx-service-card:hover {
    transform:     translateY(-4px);
    box-shadow:    0 12px 28px rgba(1, 82, 133, 0.12);
    border-color:  transparent;
}

.tx-service-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            64px;
    height:           64px;
}

.tx-service-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.tx-service-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size:   12.5px;
    font-weight: 700;
    color:       var(--color-navy, #00406B);
    line-height: 1.3;
}

.tx-service-view-all {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background:       var(--color-navy, #00406B);
    color:            #fff;
    text-decoration:  none;
    font-family:      'Oswald', sans-serif;
    font-size:        14px;
    font-weight:      600;
    letter-spacing:   0.03em;
    padding:          10px 24px;
    border-radius:    30px;
    transition:       background 0.2s ease;
}

.tx-service-view-all:hover {
    background: var(--color-primary, #015285);
    color:      #fff;
}

/* ── Responsive: 1 row on desktop, wraps to fewer columns on smaller screens ── */
@media (max-width: 1199px) {
    .tx-services-row { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .tx-services-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media (max-width: 576px) {
    #tx-services { padding: 40px 0 34px; }
    .tx-services-row { grid-template-columns: repeat(2, 1fr); }
    .tx-service-card { padding: 16px 6px; }
    .tx-service-icon { width: 50px; height: 50px; }
    .tx-service-label { font-size: 11.5px; }
}