/* ============================================
   CCPL — inner pages (product pages)
   Loads after site.css and uses its variables.
   ============================================ */

:root{
  --sec-blue:#1b4f9c;
  --sec-grey:#dcdfe4;
}

/* banner with photo behind */
.pbanner{position:relative;color:#fff;background:var(--color-primary-dark) url("../images/banner/banner 1.jpg") center/cover no-repeat;padding:1.75rem 0;overflow:hidden}
.pbanner::before{content:"";position:absolute;inset:0;background:rgba(36,0,0,.72)}
.pbanner .container{position:relative;z-index:1}
.pbanner small{display:block;letter-spacing:.14em;font-weight:600;font-size:.8rem;margin-bottom:.3rem;color:var(--color-highlight)}
.pbanner h1{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;margin:0}
.pbanner h1::after{content:"";display:block;width:56px;height:3px;background:var(--color-highlight);margin-top:.6rem}
.crumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;font-size:.85rem;color:rgba(255,255,255,.8)}
.crumbs a:hover{color:var(--color-highlight)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--color-highlight)}

/* two-column layout: content + product list */
.playout{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}
.pside{position:sticky;top:110px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:1.4rem 0 1.4rem}
.pside h3{font-size:1rem;letter-spacing:.06em;padding:0 1.3rem .8rem;margin:0 0 .4rem;border-bottom:3px solid var(--color-highlight)}
.pside ul{margin:0 0 1.2rem}
.pside li a{display:block;padding:.6rem 1.3rem;font-size:.9rem;font-weight:600;border-left:4px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pside li a:hover{background:var(--color-bg-alt);color:var(--color-primary)}
.pside li a.on{background:var(--color-primary);color:#fff;border-left-color:var(--color-highlight)}
.pside .btn{display:block;margin:0 1.3rem;text-align:center}

/* intro block (grey, first in the grey / blue sequence) */
.phead{background:var(--sec-grey);border:1px solid var(--sec-grey);border-left:5px solid var(--color-highlight);box-shadow:var(--shadow-sm);padding:1.8rem 2rem;margin-bottom:1.75rem}
.plead{font-size:1.05rem;line-height:1.75;text-align:justify;color:var(--color-text);margin:0 0 1.3rem}
.pcta{display:flex;gap:.8rem;flex-wrap:wrap}
.phead:not(:has(.plead)) .pcta{margin:0}

/* section cards */
.psecs{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.psec{grid-column:1/-1;background:var(--sec-grey);border:1px solid var(--sec-grey);box-shadow:var(--shadow-sm);padding:1.6rem 1.9rem}
.psec.half{grid-column:auto}
.psec h3{font-size:1.05rem;letter-spacing:.05em;margin:0 0 1rem;padding-left:.8rem;border-left:5px solid var(--color-highlight)}
.psec p{margin:0;text-align:justify}

/* lists */
.ticks li,.warn li{position:relative;padding:.35rem 0 .35rem 1.7rem;color:var(--color-text-light);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:.15rem;top:.78rem;width:.55rem;height:.55rem;background:var(--color-primary)}
.warn li::before{content:"!";position:absolute;left:0;top:.45rem;width:1.1rem;height:1.1rem;background:var(--color-highlight);color:var(--color-primary);font-size:.75rem;font-weight:800;line-height:1.1rem;text-align:center}
.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}

/* numbered steps: native numbers hidden, red badge numbers only */
.steps{counter-reset:s;list-style:none;padding-left:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:.45rem 0 .45rem 2.6rem;color:var(--color-text-light);line-height:1.55}
.steps li::before{content:counter(s);position:absolute;left:0;top:.35rem;width:1.8rem;height:1.8rem;background:var(--color-primary);color:#fff;font-weight:700;font-size:.9rem;line-height:1.8rem;text-align:center}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec th,.spec td{padding:.7rem 1rem;border:1px solid var(--color-border);text-align:left}
.spec th{width:45%;background:rgba(255,255,255,.55);color:var(--color-text);font-weight:600}
.spec td{color:var(--color-text-light)}

/* disclaimer */
.psec.note{box-shadow:none}
.psec.note p{font-size:.85rem;color:var(--color-text-light)}

/* image galleries (brochure scans) */
.pgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.gimg{display:block;border:1px solid var(--color-border);background:var(--color-bg-alt);transition:box-shadow .25s ease,border-color .25s ease}
.gimg:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.gimg img{width:100%;height:auto}

/* previous / next */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.75rem}
.pnav a{display:block;background:#fff;border:1px solid var(--color-border);padding:1rem 1.3rem;font-weight:600;transition:border-color .2s ease,color .2s ease,transform .25s ease}
.pnav a.r{text-align:right}
.pnav a:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-3px)}
.pnav small{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-light);margin-bottom:.15rem}

/* tagline band */
.band{padding:2.75rem 0;text-align:center;border-top:1px solid var(--color-border)}
.band h3{font-size:clamp(1.2rem,2.4vw,1.7rem);margin-bottom:.4rem}
.band p{margin:0}

/* ============================================
   ALTERNATING SECTION COLOURS
   intro = grey, then sections go blue / grey / blue ...
   (the right-hand product list is not part of this)
   ============================================ */

/* grey sections: slightly darker text for contrast */
.psecs>.psec:nth-child(even) .ticks li,
.psecs>.psec:nth-child(even) .warn li,
.psecs>.psec:nth-child(even) .steps li,
.psecs>.psec:nth-child(even) .spec td,
.psecs>.psec:nth-child(even) p{color:var(--color-text)}

/* blue sections */
.psecs>.psec:nth-child(odd){background:var(--sec-blue);border-color:var(--sec-blue)}
.psecs>.psec:nth-child(odd) h3{color:#fff}
.psecs>.psec:nth-child(odd) p,
.psecs>.psec:nth-child(odd) .ticks li,
.psecs>.psec:nth-child(odd) .warn li,
.psecs>.psec:nth-child(odd) .steps li{color:#fff}
.psecs>.psec:nth-child(odd) .ticks li::before{background:var(--color-highlight)}
.psecs>.psec:nth-child(odd) .steps li::before{background:var(--color-highlight);color:var(--color-primary-dark)}
.psecs>.psec:nth-child(odd) .spec th,
.psecs>.psec:nth-child(odd) .spec td{border-color:rgba(255,255,255,.35);color:#fff}
.psecs>.psec:nth-child(odd) .spec th{background:rgba(255,255,255,.14)}
.psecs>.psec:nth-child(odd) .spec td{background:transparent}

/* hover states from animations.css switch text to dark: keep it readable on blue */
.psecs>.psec:nth-child(odd) .ticks li:hover,
.psecs>.psec:nth-child(odd) .warn li:hover,
.psecs>.psec:nth-child(odd) .steps li:hover{color:#fff}
.psecs>.psec:nth-child(odd) .spec tr:hover td{background:rgba(255,255,255,.18);color:#fff}

@media(max-width:980px){
  .playout{grid-template-columns:1fr}
  .pside{position:static;order:2}
  .pbanner{padding:1.4rem 0}
}
@media(max-width:700px){
  .psecs{grid-template-columns:1fr}
  .psec.half{grid-column:1/-1}
  .cols{grid-template-columns:1fr}
  .pgallery{grid-template-columns:1fr}
  .pnav{grid-template-columns:1fr}
  .phead,.psec{padding:1.1rem .85rem}
  .spec th{width:auto}
}