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

/* Horizontal padding only. The section carries .section-padding in the markup,
   which supplies the top and bottom on the sitewide 120/100/80 scale — the
   same one the products page runs on. Declaring the padding shorthand here
   would overwrite that top and bottom, so every breakpoint below sets the
   left/right longhands and leaves the vertical alone. */
.sv-gallery-section {
  padding-left: 40px;
  padding-right: 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-left: 30px;
    padding-right: 30px;
  }
}

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

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

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

@media (max-width: 575.98px) {
  .sv-gallery-header__title {
    font-size: 28px;
  }
  .sv-gallery-section {
    padding-left: 12px;
    padding-right: 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 {
  display: block;
  text-decoration: none;
  color: inherit;
  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;
  color: var(--white-color, #ffffff);
  transform: translateY(-15px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s;
}

.sv-gallery-card:hover .sv-gallery-card__title {
  color: var(--primary-color, #AE8333); /* Transitions to existing site theme color on hover */
  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;
}