/* ==========================================================================
   SV Steels Chennai — Products page styles (products.html)
   Loaded AFTER style.css and sv-chennai.css so it can override both.
   Do not edit style.css — that file is compiled from SCSS (style.css.map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product grid — 4 equal columns, equal-height cards
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .project-page .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .project-page .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
  }
}

/* Equal heights. Grid rows stretch, but .project-card is a separate box inside
   the column — without height:100% it collapses to its content and a two-line
   product name leaves one card shorter than its neighbours. */
.project-page .project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-page .project-card__content {
  flex: 1 1 auto;
  padding: 16px 14px !important;
}

.project-page .project-card__title {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* Product photos vary in source dimensions, so a fixed frame plus object-fit
   keeps every thumbnail the same size and crops instead of distorting. */
.project-page .project-card__thumb {
  height: 240px;
  flex: none;
}

.project-page .project-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card content is a flex row built to push a link button to the right.
   These cards have no button, so the title block just sits left as normal. */
.project-page .project-card__content-left {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Left & Right Section Padding for Products Page
   -------------------------------------------------------------------------- */
.project-page {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

@media (max-width: 1199.98px) {
  .project-page {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 767.98px) {
  .project-page {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 575.98px) {
  .project-page {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}


/* --------------------------------------------------------------------------
   Product grid — section heading.

   The grid used to start straight after the breadcrumb with no heading of its
   own, so the page had no H2 and the cards read as an unlabelled wall. Uses the
   template's .section-top pattern so it matches every other section on the
   site; only the standfirst underneath needs styling, since .section-top__desc
   is not a class the template ships.
   -------------------------------------------------------------------------- */
.project-page .section-top__desc {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .project-page .section-top__desc {
    margin-top: 12px;
    font-size: 15px;
  }
}