/* Plumbing category page. Built to extend the existing MediaTRDG visual system. */
.plumbing-header{position:relative;overflow:hidden;background:#111827;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.plumbing-header-image{position:absolute;inset:0;background:url('assets/images/plumbing/plumbing-materials-supplier-uae.webp') center/cover no-repeat}
.plumbing-header-overlay{position:absolute;inset:0;background:rgba(8,18,30,.72)}
.plumbing-header .header-content{position:relative;z-index:2}
.plumbing-hero{min-height:500px;display:flex;align-items:center;padding:4rem 0 5rem;position:relative}
.plumbing-hero-container{width:100%}
.hero-breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;color:rgba(255,255,255,.82);font-size:.86rem}
.hero-breadcrumb a{color:#fff}
.hero-breadcrumb a:hover{color:var(--accent-color)}
.plumbing-hero .hero-title{max-width:900px}
.plumbing-hero .hero-desc{max-width:850px;margin-left:0;margin-right:0}

.plumbing-page .section-block{margin:0 4rem;padding:clamp(42px,6vw,76px) 0}
.plumbing-page p{color:var(--muted);line-height:1.8}
.plumbing-page .section-heading{margin-bottom:1.2rem}

.plumbing-intro-grid,
.procurement-grid,
.uae-grid,
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

.plumbing-copy p,
.project-procurement p,
.uae-supply p,
.brand-section p{text-align:justify;text-justify:inter-word}

.plumbing-main-image{margin:0;width:100%;overflow:hidden}
.plumbing-main-image img{display:block;width:100%;height:clamp(330px,38vw,500px);object-fit:cover}

.plumbing-links{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.7rem}
.simple-link{color:var(--primary-color);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.simple-link:hover{color:var(--accent-color)}

.plumbing-range{border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3}
.plumbing-section-heading{max-width:900px;margin-bottom:2.2rem}
.plumbing-section-heading>p{max-width:820px}
.plumbing-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.range-column h3{color:var(--primary-color);font-size:1.08rem;margin:0 0 .35rem;padding-top:1.1rem;border-top:1px solid #e8ebef}
.range-column h3:first-child{padding-top:0;border-top:0}
.range-column p{margin:0 0 1.3rem}
.availability-copy{margin-top:1.4rem;font-weight:600}

.project-procurement{background:#f8f9fb;margin-left:0!important;margin-right:0!important;padding-left:4rem!important;padding-right:4rem!important}
.procurement-list{border-left:3px solid var(--primary-color);padding-left:2rem}
.procurement-list h3{color:var(--primary-color);font-size:1.35rem;margin-bottom:1rem}
.procurement-list ul{margin:0;padding-left:1.2rem;display:grid;gap:.7rem;color:#465261;line-height:1.55}

.uae-image{margin:0;width:100%;overflow:hidden}
.uae-image img{display:block;width:100%;height:clamp(320px,34vw,430px);object-fit:cover}

.brand-section{border-top:1px solid #edf0f3}
.brand-logo-wrap{margin:0;width:100%;overflow:hidden}
.brand-logo-wrap img{display:block;width:100%;height:clamp(320px,34vw,430px);object-fit:cover}
.small-note{font-size:.85rem}

/* Why Media section: intentionally uses the site's existing light visual language. */
.why-media{background:#f8f9fb;margin-left:0!important;margin-right:0!important;padding-left:4rem!important;padding-right:4rem!important;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3}
.why-media .section-heading{color:var(--primary-color)}
.why-content{display:grid;grid-template-columns:repeat(2,1fr);column-gap:4rem}
.why-content p{color:var(--muted);padding:1rem 0;margin:0;border-bottom:1px solid #e2e6ea}
.why-content strong{color:var(--text-color)}

.related-materials{text-align:center}
.related-links{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.related-links a{padding:.75rem 1.15rem;border:1px solid #e2e6ea;border-radius:10px;color:var(--primary-color);font-weight:700;background:#fff}
.related-links a:hover{border-color:var(--primary-color)}

.plumbing-quote{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));margin-left:0!important;margin-right:0!important;padding-left:4rem!important;padding-right:4rem!important}
.quote-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem}
.quote-inner>div:first-child{max-width:760px}
.quote-inner h2{color:#fff;font-size:clamp(1.7rem,3vw,2.25rem);margin-bottom:.7rem}
.quote-inner p{color:rgba(255,255,255,.94);margin:0}
.quote-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.plumbing-quote .ai-btn{background:#fff;color:var(--primary-color);box-shadow:none}
.plumbing-quote .brochure-btn{white-space:nowrap}

.plumbing-faq{max-width:1100px;margin-left:auto!important;margin-right:auto!important}
.plumbing-faq .section-heading{text-align:center;margin-bottom:2rem}

@media(max-width:900px){
  .plumbing-page .section-block{margin:0 1rem;padding:42px 0}
  .project-procurement,.why-media,.plumbing-quote{padding-left:1rem!important;padding-right:1rem!important}
  .plumbing-intro-grid,.procurement-grid,.uae-grid,.brand-grid,.plumbing-range-grid{grid-template-columns:1fr}
  .plumbing-intro-grid{gap:2rem}
  .plumbing-main-image{order:-1}
  .plumbing-main-image img{height:300px}
  .procurement-list{border-left:0;border-top:3px solid var(--primary-color);padding:1.5rem 0 0}
  .why-content{grid-template-columns:1fr}
  .quote-inner{flex-direction:column;align-items:flex-start}
  .quote-actions{justify-content:flex-start}
  .plumbing-hero{min-height:440px}
  .plumbing-hero .hero-desc{text-align:left}
}

@media(max-width:520px){
  .plumbing-hero{padding:3rem 0 4rem}
  .plumbing-main-image img{height:240px}
  .plumbing-links{align-items:flex-start;flex-direction:column}
  .related-links{align-items:stretch;flex-direction:column}
  .quote-actions{width:100%;flex-direction:column}
  .quote-actions .btn{justify-content:center;text-align:center}
  .why-media,.project-procurement,.plumbing-quote{padding-left:1rem!important;padding-right:1rem!important}
}