/* ============================================
   Wincraft – uPVC window type detail pages (banner, two-col, colors, specs)
   ============================================ */

/* Page background (casement page only) – body + main/sections transparent so it shows */
/* All uPVC detail pages: background and transparent sections */
body.page-upvc-detail {
  background-color: #d0ecea;
}

body.page-upvc-detail main.section,
body.page-upvc-detail main .section {
  background-color: transparent;
}

body.page-upvc-detail main.section {
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  body.page-upvc-detail main.section {
    padding-bottom: 1.5rem;
  }
}

/* Banner: rounded image + overlay title box (mobile-first) */
.upvc-detail-banner {
  position: relative;
  border-radius: var(--radius-banner);
  overflow: hidden;
  height: 260px;
  background-color: var(--gray-200);
}

.upvc-detail-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.upvc-detail-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
}

.upvc-detail-banner-title-box {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: calc(100% - 1rem);
}

.upvc-detail-banner-title-box h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #171f34;
  font-family: var(--font);
  line-height: 1.3;
}

@media (min-width: 480px) {
  .upvc-detail-banner { height: 300px; }
  .upvc-detail-banner-title-box { padding: 0.625rem 1.25rem; }
  .upvc-detail-banner-title-box h1 { font-size: 1.25rem; }
}

@media (min-width: 768px) {
  .upvc-detail-banner { height: 360px; }
  .upvc-detail-banner-overlay { padding: 1.5rem; }
  .upvc-detail-banner-title-box { padding: 1rem 1.5rem; }
  .upvc-detail-banner-title-box h1 { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
  .upvc-detail-banner { height: 400px; }
  .upvc-detail-banner-title-box { padding: 1.25rem 2rem; }
  .upvc-detail-banner-title-box h1 { font-size: 2rem; }
}

/* Less top space on detail pages (main has .section from layout) */
main.section {
  padding-top: 1rem;
}

/* Back link */
.upvc-detail-back {
  margin-bottom: 1rem;
}

.upvc-detail-back a {
  color: var(--blue);
  font-weight: 500;
}

.upvc-detail-back a:hover { text-decoration: underline; }

/* Two-col content + image */
.upvc-detail-two-col {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .upvc-detail-two-col {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2.5rem;
  }
}

.upvc-detail-content h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #171f34;
  margin: 0 0 1rem 0;
  font-family: var(--font);
}

.upvc-detail-content p {
  color: #585858;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem 0;
}

.upvc-detail-image-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--gray-100);
  aspect-ratio: 4/3;
}

.upvc-detail-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel section */
/* Carousel section: less top space, heading and text centered */
.upvc-detail-carousel-section {
  padding-top: 1.25rem;
}

.upvc-detail-carousel-section .products-info-title,
.upvc-detail-carousel-section .products-info-lead {
  text-align: center;
}

.upvc-detail-carousel-wrap {
  border-radius: var(--radius-banner);
  overflow: hidden;
  background-color: var(--gray-100);
  margin-top: 0.5rem;
  height: 440px;
  position: relative;
}

.upvc-detail-carousel-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colors section: no top space, header-style title and text centered */
.upvc-detail-colors-section {
  padding-top: 0;
}

.upvc-detail-colors-box {
  border-radius: var(--radius-banner);
  border: 1px solid var(--gray-200);
  padding: 1.5rem 1.25rem;
  background-color: var(--white);
}

.upvc-detail-colors-box h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #171f34;
  margin: 0 0 0.75rem 0;
  font-family: var(--font);
  text-align: center;
}

@media (min-width: 768px) {
  .upvc-detail-colors-box h2 { font-size: 1.6rem; }
}

.upvc-detail-colors-box > p {
  color: #585858;
  font-size: 0.9375rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.6;
  text-align: center;
}

.upvc-color-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 639px) {
  .upvc-color-strip { grid-template-columns: repeat(3, 1fr); }
}

.upvc-color-swatch {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.upvc-color-name {
  font-size: 0.75rem;
  color: var(--gray-600);
  text-align: center;
  margin-top: 0.35rem;
}

/* Precision profiles section: no top space, header-style title and text centered */
.upvc-detail-profiles-section {
  padding-top: 0;
}

.upvc-detail-profiles {
  border-radius: var(--radius-banner);
  border: 1px solid var(--gray-200);
  padding: 1.5rem 1.25rem;
  background-color: var(--white);
}

.upvc-detail-profiles h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #171f34;
  margin: 0 0 1rem 0;
  font-family: var(--font);
  text-align: center;
}

@media (min-width: 768px) {
  .upvc-detail-profiles h2 { font-size: 1.6rem; }
}

.upvc-detail-profiles p {
  color: #585858;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.25rem 0;
  text-align: center;
}

.upvc-detail-profiles-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--gray-100);
  max-width: 100%;
}

.upvc-detail-profiles-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Technical specs */
/* Technical specs: separate section box, no top space, header + lead centered, same font as other headers */
.upvc-detail-specs-section {
  padding-top: 0;
  padding-bottom: 1rem;
}

.upvc-detail-specs-box {
  border-radius: var(--radius-banner);
  border: 1px solid var(--gray-200);
  padding: 1.5rem 1.25rem;
  background-color: var(--white);
}

.upvc-detail-specs-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #171f34;
  margin: 0 0 0.5rem 0;
  font-family: var(--font);
  text-align: center;
}

@media (min-width: 768px) {
  .upvc-detail-specs-title { font-size: 1.6rem; }
}

.upvc-detail-specs-lead {
  color: #585858;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1.25rem 0;
  text-align: center;
}

.upvc-detail-specs-box .products-table-wrap,
.upvc-detail-specs-box .blog-table-wrap {
  margin-top: 1rem;
}

.upvc-detail-dimensions {
  font-size: 1rem;
  color: #171f34;
  margin: 0 0 1rem 0;
}

.upvc-detail-dimensions strong { margin-right: 0.5rem; }

/* Specs: Type of Handles, Other Specifications, Type of Glass in one row – bordered box */
.upvc-detail-specs-row {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background-color: #f8fafc;
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .upvc-detail-specs-row {
    grid-template-columns: minmax(140px, 0.45fr) 1.5fr minmax(140px, 0.55fr);
    align-items: start;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

.upvc-detail-specs-col {
  min-width: 0;
}

.upvc-detail-specs-col > p:first-child {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #171f34;
}

.upvc-detail-specs-col .products-table-wrap {
  margin-top: 0;
}

.upvc-detail-specs-col .products-info-bullets {
  margin: 0;
  padding-left: 1.25rem;
}