/* ====== Tokens ====== */
:root{
  --sc-maxw:1300px;
  --sc-pad:4rem;
  --sc-rad:20px;
  --sc-shadow:0 16px 40px rgba(0,0,0,.35);
  --sc-glass:rgba(20,20,20,.35);
  --sc-accent:#72e6ff;
  --sc-text:#fff;
  --sc-muted:#e5e5e5;
  --sc-slope-pad:clamp(32px,6vw,110px); /* safe space from diagonal cuts */
  --sc-overlap:clamp(48px,7.5vw,140px); /* vertical overlap to remove gap between diagonal items */
  --sc-seam-fix:2px; /* tiny extra overlap to avoid sub-pixel gaps at seams */
  --sc-mid-fix:12px; /* extra upward bias for items 3 & 4 to fully close 2↔3 seam */
}

/* ====== Section ====== */
.sc-blog{
  inline-size:100vw;                /* full-bleed across all viewports */
  margin:4rem calc(50% - 50vw);
  overflow-x:clip;          /* allow angled edges */
  font-family:inherit;      /* inherit theme font */
  color:#fff;               /* force white text in all modes */
}
.sc-blog, .sc-blog *{ color:#fff !important; }
/* Handle themes that override text via webkit text fill or nested spans */
.sc-blog .sc-content, .sc-blog .sc-content *, .sc-blog .sc-title{
  -webkit-text-fill-color:#fff;
}
.sc-blog a, .sc-blog a:visited, .sc-blog a:hover, .sc-blog a:active, .sc-blog a:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}
.sc-blog .sc-content svg{ fill:#fff; stroke:#fff; }

/* Extra hardening for headings and inline spans in light mode */
.sc-blog .sc-item .sc-link .sc-content h3,
.sc-blog .sc-item .sc-link .sc-content h3 *,
.sc-blog .sc-item .sc-link .sc-content p,
.sc-blog .sc-chip,
.sc-blog .sc-cta,
.sc-blog .sc-cta *{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  font-family:inherit !important;
}

/* Ultimate fallback: force common text elements inside sc-blog */
.sc-blog h1, .sc-blog h2, .sc-blog h3, .sc-blog h4, .sc-blog h5, .sc-blog h6,
.sc-blog h1 *, .sc-blog h2 *, .sc-blog h3 *, .sc-blog h4 *, .sc-blog h5 *, .sc-blog h6 *,
.sc-blog p, .sc-blog p *,
.sc-blog span, .sc-blog span *,
.sc-blog a, .sc-blog a *,
.sc-blog strong, .sc-blog em, .sc-blog b, .sc-blog i{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}

/* Gutenberg/Block color utilities */
.sc-blog .has-text-color,
.sc-blog .has-inline-color,
.sc-blog [class*="has-"][class*="-color"],
.sc-blog .wp-block-heading,
.sc-blog .ast-highlight-text,
.sc-blog mark,
.sc-blog mark *{
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}
.sc-title{
  margin:0 0 3rem;
  font-size:clamp(1.6rem,2vw+1rem,2.2rem);
  font-weight:800;
  text-align:center;
  color:#fff !important;    /* title always white */
  position:relative;         /* ensure title stays above overlapped pieces */
  z-index:5;
}

/* ====== Piece ====== */
.sc-item{
  position:relative;
  min-block-size:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Parallax */
  background-image:var(--bg);
  background-size:cover;
  background-attachment:fixed;
  background-position:center center;
  box-shadow:var(--sc-shadow);
  isolation:isolate;
  will-change:clip-path; /* stabilize seam on hover */
  backface-visibility:hidden;
  /* angled edge */
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
}
.sc-item:nth-child(even){
  /* Angle both top and bottom so the middle seam (between item 2 & 3) is slanted */
  clip-path:polygon(0 15%,100% 0,100% 85%,0 100%);
}
/* Also angle the top of odd items except the first (so item 3 top is slanted) */
.sc-item:nth-child(odd):not(:first-child){
  clip-path:polygon(0 15%,100% 0,100% 85%,0 100%);
}
/* Make the bottom edge of the 4th item flat while keeping its top angled */
.sc-item:nth-child(4){
  clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);
}
/* Overlap is split evenly so adjacent items keep equal visual height */
.sc-item:nth-child(odd){
  margin-block-end:calc(-0.5 * var(--sc-overlap) - var(--sc-seam-fix));
}
.sc-item:nth-child(even){
  margin-block-start:calc(-1 * var(--sc-overlap) - var(--sc-seam-fix));
}
/* Push items 3 and 4 a bit further up to fully close the 2↔3 seam */
.sc-item:nth-child(3){
  margin-block-start:calc(-1 * var(--sc-overlap) - var(--sc-seam-fix) - var(--sc-mid-fix));
  will-change:margin-block-start;
}
.sc-item:nth-child(4){
  margin-block-start:calc(-1 * var(--sc-overlap) - var(--sc-seam-fix) - var(--sc-mid-fix));
  will-change:margin-block-start;
}
@media(max-width:768px){
  .sc-item{background-attachment:scroll;}
}

/* Restore parallax on devices that support hover and precise pointer (desktops) */
@media (hover:hover) and (pointer:fine){
  .sc-item{ background-attachment:fixed; }
}

/* Overlay fade */
.sc-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.68) 8%,rgba(0,0,0,.24) 68%,rgba(0,0,0,0));
  z-index:0;
}

/* ====== Link block ====== */
.sc-link{
  position:relative;
  z-index:1;
  inline-size:100%;
  display:flex;
  justify-content:center;
  text-decoration:none;
  color:var(--sc-text);
  padding-block:var(--sc-pad);
  padding-inline:1.5rem;
}
.sc-link:link,.sc-link:visited,.sc-link:active,.sc-link:focus{color:#fff}

/* Keep content away from the clipped edges */
.sc-item:nth-child(even) .sc-link{ /* top edge is angled on even items */
  padding-block-start:calc(var(--sc-pad) + var(--sc-slope-pad));
}
.sc-item:not(:nth-child(even)) .sc-link{ /* bottom edge is angled on odd items */
  padding-block-end:calc(var(--sc-pad) + var(--sc-slope-pad));
}
/* Even items now have angled bottom too; add safe space */
.sc-item:nth-child(even) .sc-link{
  padding-block-end:calc(var(--sc-pad) + var(--sc-slope-pad));
}
/* Odd items (except the first) now have angled top too; add safe space */
.sc-item:nth-child(odd):not(:first-child) .sc-link{
  padding-block-start:calc(var(--sc-pad) + var(--sc-slope-pad));
}
/* 4th item has flat bottom; revert its bottom padding to the base */
.sc-item:nth-child(4) .sc-link{
  padding-block-end:var(--sc-pad);
}

/* ====== Content card (glass) ====== */
.sc-content{
  max-inline-size:720px;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
  background:var(--sc-glass);
  padding:2rem 2.5rem;
  border-radius:var(--sc-rad);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  text-align:center;
}
.sc-chip{
  display:inline-block;
  padding:.35rem 1rem;
  margin-block-end:.8rem;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  font-size:.85rem;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}
.sc-content h3{
  margin:.2rem 0 .8rem;
  font-size:clamp(1.2rem,1vw+1rem,1.6rem);
  font-weight:800;
  line-height:1.4;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}
.sc-content p{
  margin:0 0 1.2rem;
  font-size:1rem;
  line-height:1.8;
  color:#fff !important;    /* paragraph white for readability */
  -webkit-text-fill-color:#fff;
}
.sc-cta{
  display:inline-block;
  font-size:.92rem;
  padding:.55rem 1.25rem;
  border-radius:12px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
  color:#fff;
}
.sc-link:hover .sc-cta{
  transform:translateY(-2px);
  background:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.55);
}

/* ====== Motion ====== */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;}
}

/* ====== Responsive adjustments ====== */
@media(max-width:1200px){
  .sc-blog{ --sc-pad:3rem; }
  .sc-item{ min-block-size:420px; }
  .sc-content{ max-inline-size:680px; padding:1.75rem 2rem; }
}

@media(max-width:992px){
  .sc-blog{ --sc-pad:2.5rem; }
  .sc-content{ max-inline-size:640px; padding:1.5rem 1.75rem; }
  .sc-content h3{ font-size:1.3rem; }
  .sc-cta{ font-size:.9rem; padding:.5rem 1.1rem; }
}

@media(max-width:768px){
  .sc-blog{ margin:1.25rem calc(50% - 50vw); --sc-slope-pad:clamp(18px,6vw,56px); --sc-pad:1.5rem; --sc-overlap:clamp(28px,8vw,90px); --sc-seam-fix:1px; --sc-mid-fix:9px; }
  .sc-item{ background-attachment:scroll; min-block-size:260px; min-height:260px !important; inline-size:100%; }
  .sc-link{ padding:1rem .75rem; }
  .sc-content{ max-inline-size:82vw !important; inline-size:82vw !important; padding:.8rem .8rem !important; -webkit-backdrop-filter:blur(4px) saturate(120%); backdrop-filter:blur(4px) saturate(120%); }
  .sc-title{ font-size:1.15rem !important; margin-bottom:.9rem !important; }
  .sc-item .sc-link .sc-content h3{ font-size:1rem !important; line-height:1.55 !important; }
  .sc-item .sc-link .sc-content p{ font-size:.9rem !important; line-height:1.65 !important; }
  .sc-chip{ font-size:.76rem !important; }
  .sc-cta{ font-size:.82rem !important; padding:.45rem .9rem !important; }
}

@media(max-width:480px){
  .sc-blog{ margin:1rem calc(50% - 50vw); --sc-pad:1.3rem; --sc-slope-pad:clamp(14px,5vw,44px); --sc-overlap:clamp(22px,10vw,72px); --sc-seam-fix:.8px; --sc-mid-fix:6px; }
  .sc-item{ min-block-size:200px; min-height:200px !important; }
  .sc-link{ padding:.7rem .55rem; }
  .sc-content{ max-inline-size:80vw !important; inline-size:80vw !important; padding:.65rem .65rem !important; -webkit-backdrop-filter:blur(1px) saturate(120%); backdrop-filter:blur(1px) saturate(120%); }
  .sc-title{ font-size:1rem !important; }
  .sc-chip{ font-size:.68rem !important; padding:.22rem .68rem !important; }
  .sc-item .sc-link .sc-content h3{ font-size:.92rem !important; }
  .sc-item .sc-link .sc-content p{ font-size:.84rem !important; line-height:1.55 !important; }
  .sc-cta{ padding:.38rem .7rem !important; font-size:.76rem !important; }
}