/* ==========================================================================
   SV Steels Chennai — Infrastructure Page Styles
   Strictly follows site typography (Exo & Public Sans), standard H2/H4 scaling,
   authentic theme colors (#AE8333, #070707, #4C4F58), and generous side padding.
   ========================================================================== */

.sv-infra-section {
  /* Generous top, bottom, left, and right padding for luxury spatial layout */
  padding: 120px 80px;
  background: var(--white-color, #ffffff);
  position: relative;
  overflow: hidden;
}

/* Responsive section padding matching existing template standards */
@media (max-width: 1499.98px) {
  .sv-infra-section {
    padding: 100px 60px;
  }
}

@media (max-width: 1199.98px) {
  .sv-infra-section {
    padding: 80px 40px;
  }
}

@media (max-width:768px){
.sv-infra-img-wrap img {
    width: 100%;
    height: 400px !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
}
@media (max-width: 991.98px) {
  .sv-infra-section {
    padding: 70px 30px;
  }
}

@media (max-width: 767.98px) {
  .sv-infra-section {
    padding: 60px 20px;
  }
}

@media (max-width: 575.98px) {
  .sv-infra-section {
    padding: 50px 15px;
  }
}

/* --- Typography & Section Headers --- */
.sv-infra-subtitle {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color, #AE8333);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sv-infra-title {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 48px;
  /* Matches template standard H2 font size exactly */
  font-weight: 700;
  color: var(--black-color, #070707);
  line-height: 1.1667;
  margin-bottom: 16px;
}

/* Responsive scaling matching existing template H2 exactly */
@media (max-width: 1499.98px) {
  .sv-infra-title {
    font-size: 44px;
  }
}

@media (max-width: 1199.98px) {
  .sv-infra-title {
    font-size: 40px;
  }
}

@media (max-width: 991.98px) {
  .sv-infra-title {
    font-size: 36px;
  }
}

@media (max-width: 767.98px) {
  .sv-infra-title {
    font-size: 32px;
  }
}

@media (max-width: 575.98px) {
  .sv-infra-title {
    font-size: 30px;
  }
}

.sv-infra-underline {
  display: none !important;
}

.sv-infra-text {
  font-family: var(--body-font, "Public Sans", sans-serif);
  font-size: 17px;
  color: var(--text-secondary, #4C4F58);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* --- Hero Image & Showcase Box --- */
/* Square corners — overflow:hidden stays, it is what contains the hover zoom. */
.sv-infra-img-wrap {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--secondary-border-color, rgba(200, 201, 204, 0.25));
}

.sv-infra-img-wrap img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sv-infra-img-wrap:hover img {
  transform: scale(1.05);
}

.sv-infra-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: #670d0f;
  padding: 20px 26px;
  border-radius: 6px;
  border-left: 5px solid var(--primary-color, #AE8333);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(5px);
}

.sv-infra-badge h5 {
  font-family: var(--title-font, "Exo", sans-serif);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sv-infra-badge p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* --- Facility Metric Showcase Cards --- */
.sv-facility-card {
  background: #F1F1F1 !important;
  /* Light grey card background */
  border-radius: var(--primary-radius, 8px);
  padding: 36px;
  height: 100%;
  color: #070707 !important;
  border-bottom: 5px solid #670D0F !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sv-facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.sv-facility-card__tag {
  color: #670D0F !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sv-facility-card__metric {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 36px;
  font-weight: 700;
  color: #070707 !important;
  line-height: 1.2;
  margin-bottom: 14px;
}

@media (max-width: 1199.98px) {
  .sv-facility-card__metric {
    font-size: 30px;
  }
}

@media (max-width: 767.98px) {
  .sv-facility-card__metric {
    font-size: 26px;
  }
}

.sv-facility-card__desc {
  color: #4C4F58 !important;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* --- Capability & Features List Grid --- */
.sv-cap-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.sv-cap-item {
  background: #F1F1F1 !important;
  padding: 24px 28px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border-left: 4px solid #670D0F !important;
  color: #070707 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.sv-cap-item:hover {
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
}

.sv-cap-icon {
  width: 44px;
  height: 44px;
  background: #670D0F !important;
  /* Maroon Icon Background */
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(103, 13, 15, 0.3);
}

.sv-cap-content h4 {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #070707 !important;
  margin-bottom: 6px;
}

.sv-cap-content p {
  font-family: var(--body-font, "Public Sans", sans-serif);
  font-size: 15px;
  color: #4C4F58 !important;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Hero copy column — matched to the photograph beside it.

   .sv-infra-img-wrap img is a fixed 520px tall, and the copy column ran about
   360px, so the row was visibly lopsided at desktop. Two things fix it: more
   substance in the column (a third paragraph and a four-up facts grid, all
   drawn from figures already stated elsewhere on this page), and the row
   switched from centred to stretched so the column box is the photo's height.
   space-between then spreads the eyebrow-to-facts run across it, so the copy
   starts and finishes level with the image.

   Only from lg up, where the two sit side by side. Below that the columns
   stack and each sizes to its own content.
   -------------------------------------------------------------------------- */
.sv-infra-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(103, 13, 15, 0.12);
}

.sv-infra-stat__num {
  display: block;
  margin-bottom: 4px;
  color: #670D0F;
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.sv-infra-stat__label {
  display: block;
  color: var(--text-secondary, #4C4F58);
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 992px) {
  /* Bootstrap's utility carries !important, so overriding it needs one too. */
  .sv-infra-section .row.align-items-center {
    align-items: stretch !important;
  }

  .sv-infra-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* The photo drops its fixed 520px and fills the stretched column instead, so
     the two sides are the same height by construction rather than by the copy
     happening to run to 520px. It is object-fit:cover, so it crops rather than
     distorts — and the copy is free to be whatever length reads best at any
     width without reopening the mismatch. */
  .sv-infra-img-wrap,
  .sv-infra-img-wrap img {
    height: 100%;
  }

  /* The column now owns the vertical rhythm, so the last paragraph's own
     bottom margin would double up against the facts grid's padding. */
  .sv-infra-hero-copy .sv-infra-text:last-of-type {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .sv-infra-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   Capabilities grid — the last card is half width like the rest.

   "In-House Roofing Profile Manufacturing" was col-12, so it ran the full
   width of the row on its own and read as a different kind of item to the six
   above it. It is col-xl-6 now, which leaves it alone on the last line —
   centring the row places it under the gap between the two columns above.
   The full lines are unaffected: two col-6 fill them exactly.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .sv-infra-section .row.g-4.mt-1 {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   "Key Infrastructure Capabilities" — breathing room above the block.

   This block used Bootstrap's .mt-4 (24px), the same gap the facility cards
   above it already carry between rows, so the eyebrow read as part of that
   group rather than as the start of a new one. It is a section break, so it
   gets a section-sized gap. Replaces .mt-4 on the wrapper rather than sitting
   alongside it — .mt-4 is an !important utility and could not be overridden.
   -------------------------------------------------------------------------- */
.sv-infra-block-spaced {
  margin-top: 80px;
}

@media (max-width: 991.98px) {
  .sv-infra-block-spaced {
    margin-top: 56px;
  }
}

@media (max-width: 767.98px) {
  .sv-infra-block-spaced {
    margin-top: 40px;
  }
}