/* ============================================================
   COMMERCIAL GRID REVAMP SECTION
   ============================================================ */
.section--commercial-grid {
   padding: 110px 0;
}
.commercial-grid-header {
   text-align: center;
   margin: 0 auto 40px;
   padding: 32px;
}

.commercial-grid-header .l-title {
  margin-bottom: 18px;
  color: #081535;
  font-size: 46.1px;
}
.commercial-grid__intro {
   color: #2E344D;
   margin-top: 12px;
   font-size: 20px;
}

/* Grid */
.commercial-grid__grid {
   list-style: none;
   padding: 0;
   max-width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}

/* Card — default state */
.commercial-grid__card {
   border-radius: 14px;
   border: 1px solid transparent;   /* reserves space so hover border doesn't shift layout */
   background: #FFF;
   box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
   overflow: hidden;
   transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Card — hover state */
.commercial-grid__card:hover {
   border: 1px solid #D94E52;
   background: #FFF5F5;
   box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}

.commercial-grid__card-link {
   display: block;
   text-decoration: none;
   color: inherit;
   height: 100%;
}
.commercial-grid__card-image {
   margin: 0;
}
.commercial-grid__card-image img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover;
}
.commercial-grid__card-body {
   padding: 32px 32px 24px 32px;
   text-align: center;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   gap: 14px;
}
.commercial-grid__card-title {
   font-size: 24px;
   font-weight: 700;
   color: #2E344D;
   text-transform: uppercase;
   margin: 0;
}
.commercial-grid__card-more {
    font-weight: 700;
    font-size: 18px;
    background: linear-gradient(90deg, #D82226 0%, #721214 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    display: flex;
    gap: 6px;
    justify-content: center;
}
.commercial-grid__card-arrow {
   width: 18px;
   height: 18px;
}

/* CTA */
.commercial-grid__cta {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}
.commercial-grid__note em {
   color: #2E344D;
   font-size: 15.9px;
   font-weight: 700;
   font-style: italic;
}

/* MOBILE SECTION */
@media (max-width: 767px) {
    .commercial-grid-header {
        padding: 0;
        text-align: start;
    }
    .commercial-grid-header .l-title {
        text-align: start;
        font-size: 40px;
    }
    .commercial-grid__note em {
        font-size: 17px;
        font-weight: 600;
    }
}