/* site.css: blog + carried-over WordPress pages. Loads after styles.css and
   only adds classes; it never restyles the home page. */
:root{ --tech:#2F5BFF; --tips:#0E9F6E; --press:#7A3CFF; --feat:#FF6D5A }
.kick{font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:14px}

/* category colours */
.cat-tech-news{--cat:var(--tech)} .cat-tips-tricks{--cat:var(--tips)}
.cat-press-releases{--cat:var(--press)} .cat-feature-updates{--cat:var(--feat)}
.catchip{display:inline-flex; align-items:center; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px; background:var(--cat,var(--coral)); color:#fff}
a.catchip:hover{filter:brightness(1.08)}

/* blog index */
.bloghero{padding-block:clamp(56px,8vw,110px) clamp(30px,4vw,48px)}
.bloghero h1{font-size:clamp(3rem,9.5vw,7.4rem); line-height:.95; letter-spacing:-.055em; max-width:11ch}
.bloghero h1 span{color:var(--coral); display:block}
.bloghero .lede{margin-top:24px; max-width:52ch}
.featured .pcard.big{display:grid; grid-template-columns:1.25fr 1fr; border-radius:32px; overflow:hidden;
  background:var(--cat); color:#fff; box-shadow:var(--lift)}
.featured .pcard.big .pcimg{aspect-ratio:auto; border-radius:0; height:100%; min-height:300px}
.featured .pcard.big .pcbody{padding:clamp(26px,4vw,52px); align-self:center}
.featured .pcard.big h3{font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.06; letter-spacing:-.04em}
.featured .pcard.big p{color:rgba(255,255,255,.88)}
.featured .pcard.big .catchip{background:#fff; color:var(--cat)}
.featured .pcard.big .pcmeta{color:rgba(255,255,255,.78)}
.blogband{padding-top:clamp(40px,5vw,64px)}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,36px)}
.fchip{cursor:pointer; border:2px solid var(--line); background:var(--card); border-radius:999px; padding:9px 18px;
  font-weight:600; font-size:.95rem; color:var(--ink); transition:all .15s}
.fchip:hover{border-color:var(--cat,var(--ink))}
.fchip.on{background:var(--cat,var(--ink)); border-color:var(--cat,var(--ink)); color:#fff}
.fchip.on[data-f="all"]{background:var(--ink); color:var(--paper)}
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}
.pcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s}
.pcard:hover{transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--lift)}
.pcard::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--cat); z-index:1}
.pcard.big::before{display:none}
.pcard[hidden]{display:none}
.pcimg{display:block; aspect-ratio:1500/588; overflow:hidden; background:var(--fill)}
.pcimg img{width:100%; height:100%; object-fit:cover; display:block}
.pcbody{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.pcbody .catchip{align-self:flex-start}
.pcbody h3{font-size:1.18rem; line-height:1.25; letter-spacing:-.02em; font-weight:600}
.pcbody h3 a::after{content:""; position:absolute; inset:0; z-index:2}
.pcbody p{color:var(--body); font-size:.95rem; line-height:1.55}
.pcmeta{margin-top:auto; font-size:.85rem !important; color:var(--faint) !important}

/* post */
.posthero{background:var(--cat); color:var(--catink,#fff); padding-block:clamp(40px,6vw,84px) clamp(110px,14vw,170px)}
.posthero .back{display:inline-block; color:inherit; opacity:.85; font-weight:500; margin-bottom:22px}
.posthero .back:hover{opacity:1}
.posthero .cats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.posthero .catchip{background:#fff; color:var(--cat)}
.posthero h1{font-size:clamp(2.2rem,5.6vw,4.6rem); max-width:20ch; line-height:1.02}
.posthero .pmeta{margin-top:24px; font-weight:500; opacity:.92; line-height:1.9}
.posthero .av{width:30px; height:30px; border-radius:50%; background:#fff; color:var(--cat); display:inline-grid; place-items:center; font-weight:700; font-size:.85rem; vertical-align:middle; margin-right:4px}
.cathero{padding-bottom:clamp(48px,6vw,80px)}
.postimg{margin-top:clamp(-140px,-11vw,-80px)}
.postimg img{width:100%; height:auto; display:block; border-radius:28px; box-shadow:var(--lift); background:var(--fill)}
.postgrid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(30px,5vw,72px); align-items:start;
  padding-block:clamp(40px,5vw,72px) clamp(70px,8vw,120px)}
.postbody{max-width:70ch; margin:0; font-size:1.09rem}
.postbody > *:first-child{margin-top:0}
.postbody h2{font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.03em}
.postbody h2::before{content:""; display:block; width:44px; height:6px; border-radius:6px; background:var(--coral); margin-bottom:16px}
.postbody h3{font-size:1.25rem; margin:28px 0 10px; letter-spacing:-.02em}
.postbody h4{margin:22px 0 8px}
.postbody ol{color:var(--body); line-height:1.7; padding-left:22px; margin-bottom:14px}
.postbody a, .wp main a:not(.btn):not(.g-card):not(.catchip), .legal a{color:var(--coral-deep); text-decoration:underline; text-underline-offset:3px}
.postbody img{max-width:100%; height:auto; border-radius:18px; margin:10px 0}
.postbody figure{margin:20px 0}
.postbody blockquote{margin:24px 0; padding:18px 24px; border-left:6px solid var(--coral); background:var(--wash); border-radius:0 16px 16px 0}
.postbody blockquote p{color:var(--ink)}
.tablewrap{overflow-x:auto; margin:20px 0}
.postbody table, .wp table{border-collapse:collapse; width:100%; font-size:.95rem}
.postbody th, .postbody td, .wp th, .wp td{border-bottom:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
.postbody th, .wp th{font-weight:600; background:var(--band)}
.postside{position:sticky; top:90px}
.trybox{background:var(--ink); color:var(--paper); border-radius:26px; padding:26px; position:relative; overflow:hidden}
.trybox::after{content:""; position:absolute; width:120px; height:120px; border-radius:50%; background:var(--coral); right:-56px; top:-56px; opacity:.9}
.trybox > *{position:relative; z-index:1}
.trykick{font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral)}
.tryname{font-size:1.7rem; font-weight:700; letter-spacing:-.04em; line-height:1.1; margin:8px 0 10px; max-width:9ch}
.trytxt{color:color-mix(in srgb,var(--paper) 78%,transparent); font-size:.97rem; line-height:1.55; margin-bottom:18px}
.trybox .btn{width:100%}
.related h2{margin-bottom:clamp(24px,3vw,36px)}

/* carried-over WordPress pages */
.wphero{text-align:center}
.wphero .wrap{display:flex; flex-direction:column; align-items:center; gap:14px}
.wphero h1{font-size:clamp(2.3rem,5.6vw,4.2rem); max-width:18ch}
.wphero .lede, .wphero p{margin:0 auto; max-width:60ch; color:var(--body)}
.wphero img{max-height:72px; width:auto}
.hl{color:var(--coral)}
.wpsec h2{margin-bottom:12px}
.wpsec h3{font-size:1.15rem; letter-spacing:-.015em; margin-bottom:6px}
.wpsec p{color:var(--body); line-height:1.65; margin-bottom:10px}
.wpsec ul, .wpsec ol{color:var(--body); line-height:1.7; padding-left:20px; margin-bottom:12px}
.wpsec strong{color:var(--ink)}
.g-head{text-align:center; max-width:760px; margin:0 auto clamp(26px,3.4vw,44px)}
.g-head .lede{margin:6px auto 0}
.g-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,1.6vw,22px); margin-block:18px}
.g-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--lift-sm); color:inherit}
a.g-card:hover{transform:translateY(-3px); box-shadow:var(--lift); transition:all .2s}
.band.tint .g-card{background:var(--paper)}
.g-card img{max-width:100%; height:auto; border-radius:14px}
.g-card .g-icon img{max-height:56px; width:auto}
.g-icon{font-size:2rem; line-height:1; margin-bottom:12px; display:block}
.g-num{width:44px; height:44px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:1.15rem; margin-bottom:12px}
.g-chip{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; padding:6px 12px;
  border-radius:999px; background:var(--wash); color:var(--coral-deep); margin:4px 0}
.g-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; color:var(--faint); font-size:.9rem}
.g-note{background:var(--wash); border-radius:20px; padding:20px 24px; margin-block:20px}
.g-note p{color:var(--ink)}
.g-yes{color:var(--green); font-weight:700} .g-no{color:var(--red); font-weight:700}
.wp td.g-jcol, .wp th.g-jcol{background:color-mix(in srgb,var(--coral) 9%,transparent)}
.wp table{background:var(--card); border-radius:20px; overflow:hidden; border:1px solid var(--line)}
.wp details{text-align:left}
.wpsec .faq{margin-top:12px}
.wp img{max-width:100%; height:auto}

/* legal */
.legaltabs{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:26px}
.legaltabs a{padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); font-weight:500; font-size:.94rem}
.legaltabs a[aria-current]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.legal h3{font-size:1.1rem; margin:22px 0 8px}
.legal ol{color:var(--body); line-height:1.7; padding-left:22px; margin-bottom:14px}
.legal .g-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

@media (max-width:980px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .postgrid{grid-template-columns:1fr}
  .postside{position:static}
  .featured .pcard.big{grid-template-columns:1fr}
  .featured .pcard.big .pcimg{aspect-ratio:1500/588}
}
@media (max-width:620px){
  .pgrid{grid-template-columns:1fr}
  .postimg img{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){ .pcard, .pcard:hover{transition:none; transform:none} }
.wp main .legaltabs a{text-decoration:none; color:var(--ink)}
.wp main .legaltabs a[aria-current]{color:var(--paper)}
.wp .faq-section-title, .wp h2 + .faq{margin-top:10px}

/* 11-14 (Julius): photos run to the card edges; no inner padding or frame */
.pcard{padding:0}
.featured .pcard.big{border:0}
.pcard .pcimg{border-radius:0}
.pcard::before{display:none}