/* ==========================================================================
   SV Steels Chennai — Modern Professional Product Gallery (Authentic Site Theme)
   ========================================================================== */

.sv-gallery-section {
  /* Reduced top and bottom padding for compact presentation */
  padding: 100px 40px 120px 40px;
  background: var(--white-color, #ffffff);
  position: relative;
  overflow: hidden;
}

/* --- Section Title & Underline Decoration --- */
.sv-gallery-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}

.sv-gallery-header__title {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--black-color, #070707); /* Standard existing site heading color */
  line-height: 1.1667;
  margin-bottom: 12px;
}

/* Responsive scaling matching existing template H2 typography exactly */
@media (max-width: 1499.98px) {
  .sv-gallery-header__title {
    font-size: 44px;
  }
  .sv-gallery-section {
    padding: 45px 30px;
  }
}

@media (max-width: 1199.98px) {
  .sv-gallery-header__title {
    font-size: 40px;
  }
  .sv-gallery-section {
    padding: 40px 24px;
  }
}

@media (max-width: 991.98px) {
  .sv-gallery-header__title {
    font-size: 36px;
  }
  .sv-gallery-section {
    padding: 60px 20px;
  }
}

@media (max-width: 767.98px) {
  .sv-gallery-header__title {
    font-size: 32px;
  }
  .sv-gallery-section {
    padding: 30px 15px;
  }
}

@media (max-width: 575.98px) {
  .sv-gallery-header__title {
    font-size: 28px;
  }
  .sv-gallery-section {
    padding: 60px 12px;
  }
}

.sv-gallery-header__divider {
  width: 180px;
  height: 2px;
  background: var(--secondary-border-color, rgba(200, 201, 204, 0.25));
  margin: 0 auto;
  position: relative;
}

.sv-gallery-header__divider::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  background: var(--primary-color, #AE8333); /* Existing site golden theme accent */
  border-radius: 2px;
}

/* --- Gallery Grid & Card Design --- */
.sv-gallery-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--primary-radius, 8px);
  background: var(--bg-color-primary, #F5F5F5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.sv-gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.sv-gallery-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sv-gallery-card:hover .sv-gallery-card__img {
  transform: scale(1.12);
}

/* --- Hover Overlay --- */
.sv-gallery-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 7, 0.88) 0%, rgba(42, 45, 55, 0.86) 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  z-index: 2;
}

.sv-gallery-card:hover .sv-gallery-card__overlay {
  opacity: 1;
}

/* --- Product Name at Top of Overlay --- */
.sv-gallery-card__title {
  font-family: var(--title-font, "Exo", sans-serif);
  font-size: 20px; /* Matching existing site H6 / product card title size exactly */
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  transform: translateY(-15px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s;
}

.sv-gallery-card__title a {
  color: var(--white-color, #ffffff);
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.sv-gallery-card__title a:hover {
  color: var(--primary-color, #AE8333); /* Transitions to existing site theme color on hover */
}

.sv-gallery-card:hover .sv-gallery-card__title {
  transform: translateY(0);
  opacity: 1;
}


/* Responsive scaling matching existing template H6 typography exactly */
@media (max-width: 1499.98px) {
  .sv-gallery-card__title {
    font-size: 18px;
  }
}
@media (max-width: 1199.98px) {
  .sv-gallery-card__title {
    font-size: 17px;
  }
}
@media (max-width: 991.98px) {
  .sv-gallery-card__title {
    font-size: 16px;
  }
  .sv-gallery-card__overlay {
    padding: 18px;
  }
}
@media (max-width: 767.98px) {
  .sv-gallery-card__title {
    font-size: 15px;
  }
}

/* --- Action Buttons at Bottom of Overlay --- */
.sv-gallery-card__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  transform: translateY(15px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s;
}

.sv-gallery-card:hover .sv-gallery-card__actions {
  transform: translateY(0);
  opacity: 1;
}

.sv-gallery-action-btn {
  width: 44px;
  height: 44px;
  background: #670D0F !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sv-gallery-action-btn i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.sv-gallery-action-btn:hover {
  background: #670D0F !important;
  color: #ffffff !important;
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(103, 13, 15, 0.5);
}

.sv-gallery-action-btn:hover i {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* --------------------------------------------------------------------------
   Gallery grid — column gutter on phones.

   style.css sets `.row { --bs-gutter-x: 0px }` below 576px for every row on
   the site, so the two gallery columns had no horizontal padding at all and
   the cards butted straight into each other. Restoring the variable on this
   grid alone brings the gap back without touching any other row.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .sv-gallery-grid {
    --bs-gutter-x: 16px;
  }
}

/* --------------------------------------------------------------------------
   Section heading — now the sitewide .section-top block (ornamented eyebrow
   above the title), the same markup the products and home pages use, so the
   old bespoke title and its underline rule are no longer rendered. The h1 is
   kept as the element: it is still this page's only top-level heading.
   -------------------------------------------------------------------------- */
.sv-gallery-section .section-top__title {
  margin-bottom: 0;
}