/**
* Structure only. Every colour, size, spacing and typography value comes from the
* Elementor panel, so this file deliberately holds no brand values.
*/
/* No underline anywhere in these widgets, including on hover. */
.pp-card, .pp-card:hover, .pp-card:focus,
.pp-feature, .pp-feature:hover, .pp-feature:focus,
.pp-card a, .pp-card a:hover, .pp-feature a, .pp-feature a:hover,
.pp-card *, .pp-feature * { text-decoration: none !important; }
/* ---------- tabs ---------- */
.pp-tabs { display: flex; flex-wrap: wrap; }
.pp-tab { background-color: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
font: inherit; transition: color .3s ease, border-color .3s ease; }
/* ---------- grid ---------- */
.pp-grid { display: flex; flex-wrap: wrap; gap: var(--pp-gap, 32px); align-items: stretch; }
.pp-card { width: calc((100% - (var(--pp-cols, 3) - 1) * var(--pp-gap, 32px)) / var(--pp-cols, 3));
display: flex; flex-direction: column; position: relative; color: inherit;
border: 1px solid transparent; transition: all .4s; }
.pp-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0;
transform: scaleX(0); transform-origin: left; transition: transform .5s; z-index: 3; }
.pp-card:hover::after { transform: scaleX(1); }
.pp-card-body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
.pp-card-title, .pp-feature-title { display: block; }
.pp-card-excerpt { display: block; flex: 1 1 auto; }
.pp-card-foot { display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid transparent; padding-top: 16px; margin-top: auto; }
/* ---------- image ---------- */
.pp-img { position: relative; display: block; overflow: hidden; background-size: cover;
background-position: center; background-color: rgba(10,10,10,0.08); }
.pp-img:not(.pp-img-has)::after { content: 'IMAGE'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%); font-size: 13px; letter-spacing: 4px; opacity: .4; }
.pp-tag { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 6px 12px; display: inline-block; }
/* ---------- shared text bits ---------- */
.pp-eyebrow-sm { display: inline-flex; align-items: center; gap: 12px; }
.pp-eyebrow-sm::before { content: ''; width: 20px; height: 1px; flex: 0 0 auto; background: currentColor; }
.pp-meta { display: inline-block; }
.pp-dot { margin: 0 6px; }
.pp-read { display: inline-flex; align-items: center; gap: 10px; transition: gap .3s ease, color .3s ease; }
.pp-read-arrow::after { content: '\2192'; }
.pp-card:hover .pp-read-arrow { gap: 14px; }
.pp-empty { display: none; text-align: center; padding: 48px 0; }
/* ---------- featured ---------- */
.pp-feature { display: flex; align-items: stretch; position: relative; color: inherit;
border: 1px solid transparent; transition: all .4s; }
.pp-feature::after { content: ''; position: absolute; top: 0; left: 0; right: 0;
transform: scaleX(0); transform-origin: left; transition: transform .5s; z-index: 3; }
.pp-feature:hover::after { transform: scaleX(1); }
.pp-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pp-feature-img { flex: 0 0 auto; }
.pp-btn { display: inline-block; transition: background-color .3s ease, color .3s ease; }
@keyframes ppFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
.pp-feature { flex-direction: column; }
.pp-feature-img { width: 100% !important; }
.pp-feature-body { width: 100% !important; }
}
/* ---------- related posts (horizontal track) ---------- */
.pp-rel-wrap { position: relative; }
.pp-rel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
margin-bottom: 32px; }
.pp-rel-head-text { display: flex; flex-direction: column; }
.pp-rel-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.pp-rel-eyebrow::before { content: ''; width: 32px; height: 1px; flex: 0 0 auto; background: currentColor; }
.pp-rel-arrows { display: flex; gap: 10px; flex: 0 0 auto; }
.pp-rel-arrow { box-sizing: border-box; aspect-ratio: 1 / 1; padding: 0; margin: 0;
border: 1px solid transparent; border-radius: 50%; background-color: transparent;
cursor: pointer; display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
font-size: 18px; line-height: 1; transition: all .3s ease; }
.pp-rel-track { display: flex; gap: var(--pp-gap, 28px); overflow-x: auto; scroll-behavior: smooth;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pp-rel-track::-webkit-scrollbar { display: none; }
.pp-rel-track .pp-card { flex: 0 0 var(--pp-rel-w, 300px); width: var(--pp-rel-w, 300px);
scroll-snap-align: start; }
/* ---------- post content: auto-brand whatever an editor adds to a post ----------
Elementor's own Global Kit styles a bare /