/* ==========================================================================
   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;
}

/* The global .section-top__subtitle margin is 8px, sized for a small heading.
   Under the 48px .sv-infra-title the eyebrow reads as stuck to the title. */
.sv-infra-hero-copy .section-top__subtitle {
  margin-bottom: 14px;
}

.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: 480px;
  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;
  /* Fills the column/grid cell it sits in — without this the card is only as
     tall as its own copy, so cards sharing a line ended at different heights. */
  height: 100%;
  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.
   The facts grid that used to close that column is gone, so space-between had
   nothing left to distribute but the eyebrow, the title and three paragraphs —
   it pinned them to the far ends of the 480px box and opened dead gaps between
   them. The column is centred instead: the copy keeps its own type rhythm and
   sits level with the middle of the photograph.

   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: center;
  }

  /* The photo fills the stretched column rather than standing at a height of
     its own, so the two sides match by construction instead of by the copy
     happening to run to the same number. Pinning the wrap to a fixed 480px
     only held while the copy stayed under 480px — from 992px to about 1400px
     the paragraphs wrap onto more lines, the copy column runs past it, and the
     photo was left visibly short beside it.

     Taking the img out of flow is what makes the match hold in both
     directions: with nothing in flow inside it, the wrap contributes only its
     min-height, so the row is sized by the copy and the photo grows to meet
     whatever that is. min-height keeps the photo from collapsing on the
     short-copy case, and object-fit:cover means it crops rather than distorts
     at whatever height it lands on. */
  .sv-infra-img-wrap {
    height: 100%;
    min-height: 480px;
  }

  .sv-infra-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 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.

   The row is a grid rather than a Bootstrap flex row from lg up. A flex row
   can only equalise cards against the tallest on their own line, so the three
   full lines each settled at a different height; grid-auto-rows: 1fr gives
   every row track the height of the tallest card on the block, so all seven
   cards match. The columns keep their markup but hand their gutters to the
   grid gap. The odd last card spans both tracks and centres at column width,
   which puts it under the gap between the two columns above.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .sv-infra-section .row.g-4.mt-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    /* .row's negative gutter margins have no meaning on a grid. */
    margin-left: 0;
    margin-right: 0;
  }

  .sv-infra-section .row.g-4.mt-1 > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .sv-infra-section .row.g-4.mt-1 > [class*="col-"]:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   "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;
  }
}