/* Perroplas — long-form article layout.
   Loaded only on single posts (perroplas_brand_is_article()), on top of
   perroplas-brand.css, from which every token, font and colour here comes.

   Two things this sheet does that the interior styling cannot:

   1. It turns .page-content into a named-column grid, so core's `alignwide`
      and `alignfull` classes land on real tracks instead of being inert. The
      reading measure stays the default track; nothing in the post markup has
      to know the page is 1200px wide.
   2. It adds the editorial components the posts are written from — takeaway
      card, contents list, spec table, pull quote, figure, checklist, band,
      FAQ, CTA — all built from the design system's existing vocabulary
      (eyebrow, kicker, card, arrow) rather than a second visual language.

   Specificity note: `.pp-interior .page-content > *{max-width:var(--prose-max)}`
   in perroplas-brand.css is (0,2,0) and would box every block. The overrides
   here carry `.pp-interior.pp-article` — (0,3,0) — so they win without
   !important and without touching the base sheet. */

/* ================= layout grid ================= */

/* Hello Elementor puts a 1px transparent border on main.site-main. On an
   interior page that is invisible; under a full-bleed navy band it shows as a
   1px white line down both edges, because the band cannot paint over its
   parent's border. */
.pp-interior.pp-article main#content.site-main{border:0}

.pp-interior.pp-article .page-content{
  --pp-gutter:clamp(20px,4vw,56px);
  --pp-measure:72ch;
  --pp-wide:1180px;
  max-width:none;width:100%;margin:0;
  padding:clamp(44px,6vw,80px) 0 clamp(56px,8vw,104px);
  display:grid;
  /* The gutters are 1fr with a floor, not a fixed width: a fixed gutter plus a
     content track measured against 100% of the *container* adds up to more than
     the container on a phone, which is where the 19px of horizontal scroll at
     390px came from. The content track now subtracts both gutters itself, and
     the wide tracks collapse to zero before the gutters ever shrink. */
  grid-template-columns:
    [full-start] minmax(var(--pp-gutter),1fr)
    [wide-start] minmax(0,calc((var(--pp-wide) - var(--pp-measure)) / 2))
    [content-start] min(var(--pp-measure),calc(100% - var(--pp-gutter) * 2)) [content-end]
    minmax(0,calc((var(--pp-wide) - var(--pp-measure)) / 2)) [wide-end]
    minmax(var(--pp-gutter),1fr) [full-end];
}
.pp-interior.pp-article .page-content > *{grid-column:content;max-width:none;
  margin-inline:0}
.pp-interior.pp-article .page-content > .alignwide{grid-column:wide}
.pp-interior.pp-article .page-content > .alignfull{grid-column:full;
  /* block-library gives .alignfull `width:100vw`, and 100vw includes the
     scrollbar - that alone put 16px of horizontal scroll on the page. The grid
     track is already the full content width, so the block needs no width of its
     own. */
  width:auto;max-width:none;margin-left:0;margin-right:0}
/* The `full` track already spans the padding box edge to edge - .page-content
   carries no horizontal padding of its own - so a full-bleed block needs no
   negative margin. Adding one pushed the band 51px off the left of the viewport. */

/* ================= hero ================= */

.pp-article-hero{position:relative;isolation:isolate;background:var(--perro-navy);
  display:flex;align-items:flex-end;
  min-height:clamp(360px,40vw,520px);
  padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px);
  clip-path:polygon(0 0,100% 0,100% 100%,88px 100%,0 calc(100% - 88px));
  overflow:hidden}
/* Positive z-index, not negative. A negative-z child was invisible behind the
   hero's own navy background even with isolation:isolate on the parent, which
   left every article hero rendering as a flat navy block. Photo 0, scrim 1,
   text 2; the navy stays as the fallback for a post with no featured image. */
.pp-article-hero-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% center;z-index:0}
/* Navy from the bottom-left, so the title always sits on solid colour however
   busy the photograph is, while the top right keeps the image legible. */
.pp-article-hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(15,29,61,.93) 0%,rgba(15,29,61,.84) 34%,rgba(15,29,61,.34) 74%,rgba(15,29,61,.10) 100%),
    linear-gradient(0deg,rgba(15,29,61,.55) 0%,rgba(15,29,61,0) 42%)}
.pp-article-hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding-inline:clamp(20px,4vw,56px)}
.pp-article-eyebrow{font-family:var(--font-mono);font-size:var(--size-2xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--perro-green);margin-bottom:var(--space-4)}
.pp-interior .pp-article-hero .pp-article-title{font-family:var(--font-display);
  font-size:clamp(29px,3.9vw,50px);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-tight);line-height:1.08;text-transform:uppercase;
  color:var(--white);max-width:24ch;margin:0}
.pp-interior .pp-article-hero .pp-article-title::after{content:"";display:block;
  width:64px;height:4px;background:var(--brand-accent);margin-top:var(--space-5)}
.pp-article-standfirst{margin:var(--space-5) 0 0;max-width:58ch;
  font-size:var(--size-md);line-height:var(--leading-relaxed);color:var(--navy-100)}
.pp-article-meta{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;font-family:var(--font-mono);font-size:var(--size-2xs);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--navy-200)}
.pp-article-meta-sep{color:var(--perro-green)}

/* ================= typography ================= */

.pp-interior.pp-article .page-content > p{font-size:var(--size-md);
  line-height:1.72;color:var(--ink-800);margin:0 0 var(--space-5)}
.pp-interior.pp-article .page-content .pp-lede{font-size:var(--size-lg);
  line-height:1.6;color:var(--ink-700);margin-bottom:var(--space-7)}
.pp-interior.pp-article .page-content .pp-lede strong{color:var(--perro-navy)}

.pp-interior.pp-article .page-content h2{font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,38px);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-tight);line-height:1.14;text-transform:uppercase;
  color:var(--perro-navy);margin:clamp(56px,7vw,88px) 0 var(--space-5);
  scroll-margin-top:96px}
.pp-interior.pp-article .page-content h2::before{content:"";display:block;
  width:44px;height:4px;background:var(--brand-accent);margin-bottom:var(--space-5)}
.pp-interior.pp-article .page-content h3{font-family:var(--font-core);
  font-size:var(--size-lg);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-normal);text-transform:none;color:var(--steel-600);
  margin:var(--space-7) 0 var(--space-3);scroll-margin-top:96px}
.pp-interior.pp-article .page-content a{color:var(--text-link);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--green-300);text-decoration-thickness:2px}
.pp-interior.pp-article .page-content a:hover{text-decoration-color:var(--perro-green)}

/* ================= takeaway card ================= */

.pp-interior.pp-article .pp-key{background:var(--navy-050);
  border:1px solid var(--navy-100);border-left:5px solid var(--perro-green);
  border-radius:var(--radius-card);
  padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);
  margin:0 0 var(--space-8)}
.pp-interior.pp-article .pp-key .pp-kicker{font-family:var(--font-mono);
  font-size:var(--size-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--steel-600);margin:0 0 var(--space-4)}
.pp-interior.pp-article .pp-key ul,
.pp-interior.pp-article ul.pp-key{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:var(--space-3)}
.pp-interior.pp-article .pp-key li{position:relative;padding-left:26px;
  font-size:var(--size-base);line-height:1.6;color:var(--ink-700);margin:0}
.pp-interior.pp-article .pp-key li::before{content:"";position:absolute;left:2px;
  top:.55em;width:9px;height:9px;background:var(--perro-green);
  transform:rotate(45deg)}

/* ================= contents ================= */

.pp-interior.pp-article .pp-toc{border-top:2px solid var(--perro-navy);
  border-bottom:1px solid var(--ink-200);padding:var(--space-5) 0 var(--space-6);
  margin:0 0 var(--space-8)}
.pp-interior.pp-article .pp-toc .pp-kicker{font-family:var(--font-mono);
  font-size:var(--size-2xs);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-4)}
.pp-interior.pp-article .pp-toc ol{list-style:none;padding:0;margin:0;
  counter-reset:toc;columns:2;column-gap:var(--space-7)}
.pp-interior.pp-article .pp-toc li{counter-increment:toc;margin:0 0 var(--space-3);
  break-inside:avoid;font-size:var(--size-sm);line-height:1.5;
  padding-left:32px;position:relative}
.pp-interior.pp-article .pp-toc li::before{content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--font-mono);color:var(--perro-green);
  font-weight:var(--weight-semibold)}
.pp-interior.pp-article .pp-toc a{color:var(--perro-navy);text-decoration:none}
.pp-interior.pp-article .pp-toc a:hover{text-decoration:underline;
  text-decoration-color:var(--perro-green)}

/* ================= figures ================= */

.pp-interior.pp-article .page-content figure.wp-block-image{margin:var(--space-8) 0}
.pp-interior.pp-article .page-content figure.wp-block-image img{display:block;
  width:100%;height:auto;border-radius:var(--radius-image)}
/* The design's cut corner, reused so a photograph reads as part of the same
   system as the home page's clipped hero. */
.pp-interior.pp-article .pp-figure--clip img{border-radius:0;
  clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%)}
.pp-interior.pp-article .page-content figure.alignfull img{border-radius:0}
.pp-interior.pp-article .page-content figcaption,
.pp-interior.pp-article .page-content .wp-element-caption{
  margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--size-2xs);
  letter-spacing:var(--tracking-wide);color:var(--text-muted);text-align:left}
.pp-interior.pp-article .page-content figcaption{max-width:76ch}
.pp-interior.pp-article .page-content figure.alignfull figcaption{
  max-width:1180px;margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px)}
.pp-interior.pp-article .pp-figure--mono img{filter:grayscale(1) contrast(1.06)}

/* ================= columns ================= */

.pp-interior.pp-article .page-content .wp-block-columns{gap:clamp(24px,3.5vw,48px);
  margin:var(--space-8) 0;align-items:flex-start}
.pp-interior.pp-article .page-content .wp-block-column > :first-child{margin-top:0}
.pp-interior.pp-article .page-content .wp-block-column > :last-child{margin-bottom:0}
.pp-interior.pp-article .pp-cols-tight .wp-block-column p{font-size:var(--size-base);
  line-height:1.65}

/* ================= cards ================= */

.pp-interior.pp-article .pp-card{background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:clamp(22px,2.6vw,32px);height:100%}
.pp-interior.pp-article .pp-card h3{margin-top:0}
.pp-interior.pp-article .pp-card--yes{border-top:5px solid var(--perro-green)}
.pp-interior.pp-article .pp-card--no{border-top:5px solid var(--amber-500)}
.pp-interior.pp-article .pp-card ul{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:var(--space-3)}
.pp-interior.pp-article .pp-card li{position:relative;padding-left:24px;
  font-size:var(--size-sm);line-height:1.6;color:var(--ink-700);margin:0}
.pp-interior.pp-article .pp-card--yes li::before{content:"";position:absolute;
  left:0;top:.42em;width:12px;height:7px;border-left:2.5px solid var(--perro-green);
  border-bottom:2.5px solid var(--perro-green);transform:rotate(-45deg)}
.pp-interior.pp-article .pp-card--no li::before{content:"";position:absolute;
  left:2px;top:.62em;width:10px;height:2.5px;background:var(--amber-500)}

/* ================= numbered steps ================= */

.pp-interior.pp-article .pp-steps{list-style:none;padding:0;margin:var(--space-7) 0;
  counter-reset:st;display:flex;flex-direction:column;gap:var(--space-5)}
.pp-interior.pp-article .pp-steps li{counter-increment:st;position:relative;
  padding-left:64px;min-height:44px;margin:0;font-size:var(--size-base);
  line-height:1.62;color:var(--ink-700)}
.pp-interior.pp-article .pp-steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:44px;height:44px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--size-sm);
  font-weight:var(--weight-semibold);color:var(--perro-navy);
  background:var(--navy-050);border:1px solid var(--navy-100);
  border-radius:var(--radius-capsule)}
.pp-interior.pp-article .pp-steps strong{color:var(--perro-navy);
  display:block;margin-bottom:2px}

/* ================= spec table ================= */

.pp-interior.pp-article .page-content figure.wp-block-table{margin:var(--space-7) 0;
  overflow-x:auto}
.pp-interior.pp-article .page-content .wp-block-table table{width:100%;
  border-collapse:collapse;font-size:var(--size-sm);min-width:520px}
.pp-interior.pp-article .page-content .wp-block-table th{
  font-family:var(--font-mono);font-size:var(--size-3xs);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  text-align:left;color:var(--white);background:var(--perro-navy);
  padding:12px 16px;border:0;font-weight:var(--weight-semibold)}
.pp-interior.pp-article .page-content .wp-block-table td{padding:14px 16px;
  border:0;border-bottom:1px solid var(--ink-150);vertical-align:top;
  color:var(--ink-700);line-height:1.55}
.pp-interior.pp-article .page-content .wp-block-table tbody tr:nth-child(even){
  background:var(--ink-050)}
.pp-interior.pp-article .page-content .wp-block-table td:first-child{
  font-weight:var(--weight-semibold);color:var(--perro-navy);white-space:nowrap}

/* ================= pull quote ================= */

.pp-interior.pp-article .page-content .pp-pull{border:0;border-left:5px solid var(--perro-green);
  background:var(--navy-050);margin:var(--space-8) 0;
  padding:clamp(26px,3.2vw,40px) clamp(24px,3vw,44px);border-radius:0 var(--radius-card) var(--radius-card) 0}
.pp-interior.pp-article .page-content .pp-pull p{font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,27px);font-weight:var(--weight-bold);
  line-height:1.36;letter-spacing:var(--tracking-tight);color:var(--perro-navy);
  margin:0}
.pp-interior.pp-article .page-content .pp-pull cite{display:block;
  margin-top:var(--space-4);font-family:var(--font-mono);font-style:normal;
  font-size:var(--size-2xs);letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--text-muted)}

/* ================= full-bleed statement bands =================
   The band photographs live here rather than in the post markup: a core/group
   cannot carry a background image without a Pro block, and inlining one in the
   block's style attribute would put a URL inside content the editor validates.
   Swapping a band image is a one-line change in this file. */

.pp-interior.pp-article .pp-band{position:relative;isolation:isolate;
  background-color:var(--navy-900);background-size:cover;background-position:center;
  padding-block:clamp(56px,8vw,110px);
  /* The 1180px measure comes from the padding, not from centring each child:
     core's constrained layout gives the group's children their own auto
     margins, so centring here as well left the heading and the buttons on
     different left edges. */
  padding-inline:max(clamp(20px,4vw,56px),calc((100% - 1180px) / 2));
  margin:clamp(48px,6vw,88px) 0}
.pp-interior.pp-article .pp-band::before{content:"";position:absolute;inset:0;
  z-index:-1;background:linear-gradient(100deg,rgba(15,29,61,.93) 0%,rgba(15,29,61,.80) 46%,rgba(15,29,61,.50) 100%)}
.pp-interior.pp-article .pp-band > *{max-width:none;margin-inline:0}
.pp-interior.pp-article .page-content .pp-band h2{color:var(--white);
  margin-top:0;max-width:22ch}
.pp-interior.pp-article .page-content .pp-band p{color:var(--navy-100);
  max-width:62ch;font-size:var(--size-md)}
.pp-interior.pp-article .page-content .pp-band p:last-child{margin-bottom:0}
.pp-interior.pp-article .pp-band--recycling{
  background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/plastic-recycling-plant-conveyor.jpg")}
.pp-interior.pp-article .pp-band--line{
  background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/recycled-plastic-injection-moulding-production-line.jpg")}
.pp-interior.pp-article .pp-band--port{
  background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/container-ship-port-offshore-supply-chain.jpg")}
.pp-interior.pp-article .pp-band--melbourne{
  background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/melbourne-city-skyline-golden-hour.jpg")}

/* ================= stat row ================= */

.pp-interior.pp-article .pp-stats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--navy-100);border:1px solid var(--navy-100);
  border-radius:var(--radius-card);overflow:hidden;margin:var(--space-8) 0}
.pp-interior.pp-article .pp-stat{background:var(--white);
  padding:clamp(20px,2.4vw,30px)}
.pp-interior.pp-article .pp-stat-n{font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,40px);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-tight);color:var(--perro-navy);line-height:1;
  display:block}
.pp-interior.pp-article .pp-stat-l{display:block;margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:var(--size-3xs);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;
  color:var(--text-muted);line-height:1.5}

/* ================= FAQ ================= */

.pp-interior.pp-article .pp-faq{border-top:1px solid var(--ink-200);
  margin:var(--space-7) 0 0}
.pp-interior.pp-article .page-content .pp-faq h3{border-bottom:1px solid var(--ink-150);
  padding-bottom:var(--space-4);margin:var(--space-6) 0 var(--space-4);
  color:var(--perro-navy);font-size:var(--size-md)}
.pp-interior.pp-article .page-content .pp-faq p{font-size:var(--size-base);
  line-height:1.68}

/* ================= closing CTA ================= */

.pp-interior.pp-article .pp-cta{position:relative;isolation:isolate;
  background-color:var(--navy-900);background-size:cover;background-position:center 62%;
  background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/melbourne-bolte-bridge-dusk.jpg");
  padding-block:clamp(48px,7vw,92px);
  padding-inline:max(clamp(20px,4vw,56px),calc((100% - 1180px) / 2));
  margin:clamp(56px,7vw,96px) 0 0;
  clip-path:polygon(0 0,calc(100% - 88px) 0,100% 88px,100% 100%,0 100%)}
.pp-interior.pp-article .pp-cta::before{content:"";position:absolute;inset:0;
  z-index:-1;background:linear-gradient(95deg,rgba(15,29,61,.95) 0%,rgba(15,29,61,.82) 55%,rgba(15,29,61,.55) 100%)}
.pp-interior.pp-article .pp-cta > *{max-width:none;margin-inline:0}
.pp-interior.pp-article .page-content .pp-cta h2{color:var(--white);margin-top:0;
  max-width:20ch}
.pp-interior.pp-article .page-content .pp-cta p{color:var(--navy-100);max-width:58ch}
.pp-interior.pp-article .page-content .pp-cta .wp-block-buttons{margin-top:var(--space-6)}
.pp-interior.pp-article .page-content .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;font-family:var(--font-core);font-size:var(--size-md);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;line-height:1;text-decoration:none;
  border-radius:var(--radius-button);transition:var(--transition-control);
  background:var(--brand-accent);color:var(--text-on-accent);
  border:2px solid var(--brand-accent);box-shadow:var(--shadow-inset)}
.pp-interior.pp-article .page-content .wp-block-button__link:hover{
  background:var(--green-600);border-color:var(--green-600)}
.pp-interior.pp-article .page-content .pp-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);
  box-shadow:none}
.pp-interior.pp-article .page-content .pp-btn-ghost .wp-block-button__link:hover{
  background:var(--white);color:var(--perro-navy);border-color:var(--white)}

/* ================= credits ================= */

.pp-interior.pp-article .pp-credits{margin-top:var(--space-8);
  padding-top:var(--space-5);border-top:1px solid var(--ink-200)}
.pp-interior.pp-article .page-content .pp-credits p{font-size:var(--size-2xs);
  line-height:1.7;color:var(--text-subtle);margin:0}
.pp-interior.pp-article .page-content .pp-credits a{color:var(--text-subtle);
  text-decoration-color:var(--ink-300)}

/* ================= separator ================= */

.pp-interior.pp-article .page-content .wp-block-separator{border:0;height:1px;
  background:var(--ink-200);margin:clamp(48px,6vw,80px) 0;max-width:none}

/* ================= narrow ================= */

@media (max-width:860px){
  .pp-interior.pp-article .pp-toc ol{columns:1}
  .pp-interior.pp-article .page-content .wp-block-columns{flex-wrap:wrap}
  .pp-interior.pp-article .page-content .wp-block-column{flex-basis:100%!important}
  .pp-article-hero{clip-path:polygon(0 0,100% 0,100% 100%,56px 100%,0 calc(100% - 56px))}
  .pp-interior.pp-article .pp-cta{clip-path:polygon(0 0,calc(100% - 56px) 0,100% 56px,100% 100%,0 100%)}
}

/* Narrow-viewport background images.
   Kept at the very end of the file on purpose: these are single-class
   rules competing with the single-class rules that set the full-size
   image, so the later one wins. When this block sat above .pp-cta's own
   declaration the phone variant of the CTA background never applied. */
@media (max-width:1100px){
  .pp-interior.pp-article .pp-band--recycling{
    background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/plastic-recycling-plant-conveyor-1024x576.jpg")}
  .pp-interior.pp-article .pp-band--line{
    background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/recycled-plastic-injection-moulding-production-line-1024x576.jpg")}
  .pp-interior.pp-article .pp-band--port{
    background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/container-ship-port-offshore-supply-chain-1024x576.jpg")}
  .pp-interior.pp-article .pp-band--melbourne{
    background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/melbourne-city-skyline-golden-hour-1024x438.jpg")}
  .pp-interior.pp-article .pp-cta{
    background-image:url("https://perroplas.com.au/wp-content/uploads/2026/09/melbourne-bolte-bridge-dusk-1024x438.jpg")}
}