/* ===========================================================================
   Palette — Rishikesh Yog Kendra.

   Every colour below is one the root site already uses (assets/css/style.scss),
   so the blog and the main site cannot drift apart: teal #2f555d, gold #c9a227,
   cream #f5f2ea, ink #152124, border #e6e3da.

   The fonts point at the root's own custom properties rather than naming a
   family, so whatever style.css declares is what the blog renders — no second
   font download and nothing to keep in step by hand.

   Ported from the Bali Yoga Retreats values (tan #d0936a, Mulish/Montserrat,
   hard offset shadows). The shadows are soft here because the root site's cards
   are soft; the offset-black look would have read as a different site.
   =========================================================================== */
:root {
    --ptech-font-heading: var(--heading-font-family), system-ui, sans-serif;
    --ptech-font-body: var(--body-font-family), system-ui, sans-serif;
    --ptech-primary: #2f555d;
    --ptech-primary-dark: #244349;
    --ptech-accent: #c9a227;
    --ptech-accent-ink: #152124;
    --ptech-ink: #152124;
    --ptech-border-w: 1px;
    --ptech-shadow-sm: 0 2px 12px rgba(20, 32, 27, .06);
    --ptech-shadow: 0 2px 20px rgba(20, 32, 27, .08);
    --ptech-shadow-lg: 0 12px 40px rgba(20, 32, 27, .15);
    --ptech-dark: #244349;
    --ptech-bg: #fff;
    --ptech-bg-soft: #f5f2ea;
    --ptech-bg-chip: #f5f2ea;
    --ptech-hero-bg: #152124;
    --ptech-border: #e6e3da;
    --ptech-border-soft: #e6e3da;
    --ptech-border-accent: rgba(201, 162, 39, .35);
    --ptech-text: #212529;
    --ptech-text-muted: #8a968f;
    --ptech-text-soft: #8a968f;
    --ptech-on-dark: #fff;
    --ptech-primary-grad: linear-gradient(135deg, #2f555d 0%, #244349 100%);
    --ptech-accent-grad: linear-gradient(135deg, #c9a227 0%, #b8941f 100%);
    --ptech-ease: cubic-bezier(.22, 1, .36, 1);
    --ptech-container: 1400px;
    --ptech-radius: 14px;
    --ptech-radius-sm: 8px;
    --ptech-whatsapp: #0f7d57;
    --ptech-instagram: #d6249f
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important
}

.ptech-skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    overflow: visible;
    top: 12px;
    left: 12px;
    z-index: 100000;
    display: inline-block;
    padding: 12px 20px;
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--ptech-radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    outline: 2px solid var(--ptech-on-dark);
    outline-offset: 2px
}

a,
em,
span,
strong {
    font-size: inherit
}

.ptech-blog {
    min-height: 40vh;
    font-family: var(--ptech-font-body);
    background: var(--ptech-bg);
    padding-bottom: 1px
}

.card-heading,
.section-heading,
.sidebar-heading,
.sub-heading {
    display: block;
    line-height: 1.25
}

.ptech-404__title,
.ptech-archive-head__title,
.ptech-hero__title,
.ptech-page__title,
.ptech-single__title,
.section-heading {
    font-family: var(--ptech-font-heading);
    font-size: clamp(26px, 3.5vw, 38px);
    color: var(--ptech-dark)
}

.ptech-cat-block__title,
.sub-heading {
    font-family: var(--ptech-font-heading);
    font-size: clamp(20px, 2.5vw, 26px);
    color: var(--ptech-dark)
}

.card-heading {
    font-family: var(--ptech-font-heading);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.3;
    color: var(--ptech-text);
    font-weight: 700
}

.ptech-widget__title,
.sidebar-heading {
    font-family: var(--ptech-font-heading);
    font-size: clamp(18px, 2vw, 24px);
    color: var(--ptech-dark)
}

.ptech-container {
    width: 100%;
    max-width: var(--ptech-container);
    margin: 0 auto;
    padding: 0 16px
}

.section-spacing {
    padding: 80px 0
}

.ptech-hero {
    background: var(--ptech-hero-bg);
    color: var(--ptech-on-dark);
    padding: 64px 0;
    text-align: center
}

.ptech-hero__title {
    margin: 0;
    color: var(--ptech-on-dark);
    line-height: 1.2
}

/* ---------------------------------------------------------------------------
   Home hero with no banner image set.

   Previously this fell back to a plain white band, which read as an unfinished
   page rather than a deliberate one. It now paints the same dark banner the
   root site uses at the top of every page, so arriving from the main site into
   the blog feels like one site.

   Built from gradients only — no image file. A background-image here would have
   to reach six directory levels up out of the theme to the root site's assets,
   which breaks the moment the blog is installed anywhere else; the theme is
   meant to be portable.
   --------------------------------------------------------------------------- */
.ptech-hero--home:not(.ptech-hero--banner) {
    position: relative;
    background:
        radial-gradient(circle at 15% 15%, rgba(201, 162, 39, .16) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(47, 85, 93, .55) 0%, transparent 50%),
        linear-gradient(135deg, #1b3238 0%, var(--ptech-ink) 55%, #16272c 100%);
    border-bottom: 0;
    padding: clamp(56px, 8vw, 104px) 0
}

/* Hairline of brand gold along the bottom, in place of the old grey border. */
.ptech-hero--home:not(.ptech-hero--banner)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--ptech-accent-grad)
}

.ptech-hero--home:not(.ptech-hero--banner) .ptech-hero__title {
    color: var(--ptech-on-dark);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25)
}

.ptech-hero--home:not(.ptech-hero--banner) .ptech-hero__eyebrow {
    color: var(--ptech-accent)
}

.ptech-hero--home:not(.ptech-hero--banner) .ptech-hero__subtitle {
    color: rgba(255, 255, 255, .82)
}

/* The search pill sits on the dark band, so it is lifted with a deeper shadow
   and made fully opaque — the translucent default washed out against a light
   page but disappears into a dark one. */
.ptech-hero--home:not(.ptech-hero--banner) .ptech-search {
    max-width: 560px;
    margin-inline: auto;
    background: #fff;
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22)
}

@media (max-width:600px) {
    .ptech-hero {
        padding: 44px 0
    }
}

.ptech-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px
}

.ptech-archive-head {
    margin-bottom: 32px
}

.ptech-archive-head__title {
    line-height: 1.2;
    margin: 0
}

td {
    font-size: clamp(14px, 1.5vw, 16px)
}

.ptech-page__title,
.ptech-single__title {
    line-height: 1.2;
    margin: 0 0 14px;
    color: var(--ptech-primary)
}

.ptech-page__content,
.ptech-single__content {
    line-height: 1.85;
    color: var(--ptech-text)
}

.ptech-page__content img,
.ptech-single__content img {
    max-width: 100%;
    height: auto
}

.ptech-empty {
    font-size: 18px;
    color: var(--ptech-text-muted);
    text-align: center;
    padding: 60px 0
}

.ptech-404 {
    text-align: center;
    padding: 80px 16px
}

.ptech-404__title {
    margin-bottom: 12px
}

.ptech-btn {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ptech-font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    color: var(--ptech-on-dark);
    background: var(--ptech-primary-grad);
    box-shadow: 0 8px 20px -12px rgba(155, 44, 60, .5);
    transition: color .5s var(--ptech-ease), box-shadow .5s var(--ptech-ease), transform .4s var(--ptech-ease);
    width: fit-content
}

.ptech-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ptech-accent-grad);
    clip-path: circle(0 at 50% 50%);
    transition: clip-path .55s var(--ptech-ease)
}

.ptech-btn::after {
    content: "\2192";
    font-size: 16px;
    transition: transform .4s var(--ptech-ease)
}

.ptech-btn:hover {
    color: var(--ptech-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(31, 66, 93, .5)
}

.ptech-btn:hover::before {
    clip-path: circle(150% at 50% 50%)
}

.ptech-btn:hover::after {
    transform: translateX(3px)
}

.ptech-btn.alt {
    color: var(--ptech-dark);
    background: var(--ptech-accent-grad);
    box-shadow: 0 8px 20px -12px rgba(31, 66, 93, .5)
}

.ptech-btn.alt::before {
    background: var(--ptech-primary-grad);
    clip-path: none;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .55s var(--ptech-ease)
}

.ptech-btn.alt:hover {
    color: var(--ptech-on-dark);
    box-shadow: 0 14px 28px -12px rgba(155, 44, 60, .45)
}

.ptech-btn.alt:hover::before {
    transform: scaleY(1)
}

.navigation.pagination {
    margin-top: 48px
}

.navigation.pagination .nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ptech-border);
    border-radius: var(--ptech-radius-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--ptech-text);
    background: var(--ptech-bg);
    transition: border-color .2s ease, color .2s ease, background .2s ease
}

.navigation.pagination a.page-numbers:hover {
    border-color: var(--ptech-accent);
    color: var(--ptech-accent-ink)
}

.navigation.pagination .page-numbers.current {
    background: var(--ptech-accent-grad);
    border-color: transparent;
    color: var(--ptech-on-dark)
}

.navigation.pagination .page-numbers.dots {
    border-color: transparent;
    background: 0 0
}

.ptech-search-head__form {
    max-width: 520px;
    margin: 22px auto 0
}

.ptech-noresults .ptech-search,
.ptech-search-head .ptech-search {
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .2);
    border: 1px solid var(--ptech-border)
}

.ptech-noresults {
    max-width: 520px;
    margin: 0 auto;
    padding: 30px 0 10px;
    text-align: center
}

.ptech-noresults__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    color: var(--ptech-accent)
}

.ptech-noresults__title {
    margin: 0 0 8px;
    font-family: var(--ptech-font-heading);
    font-size: clamp(22px, 3vw, 28px);
    color: var(--ptech-dark)
}

.ptech-noresults__text {
    margin: 0 0 24px;
    color: var(--ptech-text-muted)
}

@media (max-width:600px) {
    .section-spacing {
        padding: 32px 0
    }

    .ptech-container {
        padding-left: 14px;
        padding-right: 14px
    }
}

.ptech-posts--2col {
    grid-template-columns: repeat(2, 1fr)
}

.ptech-sidebar__inner {
    height: 100%
}

.ptech-widget--form {
    position: sticky;
    top: 100px
}

.ptech-widget.ptech-widget--form {
    padding: 0;
    background: 0 0
}

.ptech-widget--form .aside-form {
    max-width: none;
    width: 100%;
    position: static
}

.ptech-widget--form .fixed-form,
.ptech-widget--form .fixedside-menu,
.ptech-widget--form .navigate {
    background: 0 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    position: static
}

.ptech-widget--form .navigate>.head3 {
    display: block;
    margin: 0 0 12px;
    padding: 8px 14px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-heading);
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 700;
    text-align: center
}

.ptech-widget--form .form-body {
    padding: 0 6px 2px
}

.ptech-widget--form .form-body .row {
    --bs-gutter-x: 12px
}

.ptech-widget--form .tr-input,
.ptech-widget--form .tr-select {
    width: 100%;
    margin: 0 0 10px !important;
    padding: 8px 11px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: var(--ptech-radius-sm);
    background-color: #fff;
    box-shadow: none;
    font-family: var(--ptech-font-body);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ptech-text)
}

.ptech-widget--form .tr-input::placeholder {
    color: var(--ptech-text-soft)
}

.ptech-widget--form .tr-input:focus,
.ptech-widget--form .tr-select:focus {
    outline: 0;
    border-color: var(--ptech-primary);
    box-shadow: var(--ptech-shadow-sm)
}

.ptech-widget--form textarea.tr-input {
    min-height: 64px;
    resize: vertical
}

.ptech-widget--form .date-wrap {
    position: static;
    margin-top: 0
}

.ptech-widget--form .date-wrap span {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 5px;
    padding: 2px 10px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: 50px;
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    box-shadow: none;
    font-family: var(--ptech-font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.ptech-widget--form .calendar-img {
    width: 12px;
    height: 12px;
    object-fit: contain
}

.ptech-widget--form .book-appointment {
    margin-top: 12px !important
}

.ptech-widget--form .btn3 {
    display: block;
    width: 100%;
    margin-right: 0;
    padding: 11px 18px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    box-shadow: var(--ptech-shadow-sm);
    font-family: var(--ptech-font-heading);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .15s var(--ptech-ease), box-shadow .15s var(--ptech-ease)
}

.ptech-widget--form .btn3:hover {
    background: var(--ptech-accent);
    color: var(--ptech-on-dark);
    transform: translate(2px, 2px);
    box-shadow: none
}

.ptech-widget--form .btn3 span {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
    color: inherit
}

.ptech-widget--form .contact-call {
    margin: 14px 6px 2px;
    padding: 14px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-accent);
    color: var(--ptech-on-dark)
}

.ptech-widget--form .contact-call .head3 {
    margin: 0 0 6px;
    font-family: var(--ptech-font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ptech-on-dark)
}

.ptech-widget--form .contact-call .para {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82)
}

.ptech-widget--form .con-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: var(--ptech-border-w) solid var(--ptech-ink);
    border-radius: 50px;
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-heading);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .15s var(--ptech-ease)
}

.ptech-widget--form .con-btn:hover {
    background: #fff;
    color: var(--ptech-primary);
    transform: translateY(-1px)
}

.ptech-widget--form .con-btn i {
    font-size: 14px;
    color: inherit
}

/* The page behind these is white now, and so are the widgets, so the card edge
   had nothing to read against. A light shadow puts it back without bringing
   the heavy filled look along with it. */
.ptech-widget {
    background: var(--ptech-bg);
    border-radius: var(--ptech-radius);
    padding: 18px 16px;
    margin-bottom: 30px;
    box-shadow: var(--ptech-shadow-sm)
}

/* Was a solid primary-filled bar. Now a plain heading in the theme colour with
   a rule under it. The 8px inset lines the title up with .ptech-latest and
   .ptech-cats below, which both sit at `padding: 0 8px`. The rule is 2px so it
   reads as a heading divider rather than another list separator — those are
   1px in the same colour. */
.ptech-widget__title {
    display: block;
    margin: 0 0 14px;
    padding: 0 8px 12px;
    border-bottom: 2px solid var(--ptech-border-soft);
    color: var(--ptech-primary);
    font-weight: 700;
    text-align: left
}

.ptech-latest {
    list-style: none;
    margin: 0;
    padding: 0 8px 4px
}

.ptech-latest__item {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ptech-border-soft)
}

.ptech-latest__item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0
}

.ptech-latest__link {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.ptech-latest__thumb {
    flex: 0 0 64px
}

.ptech-latest__thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--ptech-radius-sm);
    display: block
}

.ptech-latest__title {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600
}

.ptech-latest__date {
    display: block;
    font-size: 12px;
    color: var(--ptech-text-soft);
    margin-top: 2px
}

.ptech-cats {
    width:100%;
    list-style: none;
    margin: 0;
    padding: 0 8px 4px
}

.ptech-cats__item {
    display: block;
    border-bottom: 1px solid var(--ptech-border-soft)
}

.ptech-cats__item:last-child {
    border-bottom: 0
}

.ptech-cats__item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    text-decoration: none;
    color: var(--ptech-text)
}

.ptech-cats__item a:hover {
    color: var(--ptech-accent-ink)
}

.ptech-cats__count {
    background: var(--ptech-bg-chip);
    color: var(--ptech-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 20px
}

.ptech-cat-block {
    margin-bottom: 44px
}

.ptech-cat-block:last-child {
    margin-bottom: 0
}

/* The rule belongs to the category name, not to the row. Run across the whole
   head it read as a section divider with "View all" sitting on top of it;
   under the title alone it underlines what it refers to. */
.ptech-cat-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px
}

.ptech-cat-block__title {
    margin: 0;
    padding-bottom: 10px;
    color: var(--ptech-accent-ink);
    font-weight: 600;
    border-bottom: 2px solid var(--ptech-border-accent)
}

.ptech-cat-block__title a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit
}

.ptech-cat-block__count {
    color: var(--ptech-accent-ink);
    font-weight: 600
}

.ptech-cat-block__viewall {
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: var(--ptech-accent-ink)
}

/* Search results had a modifier in the markup but no rule to go with it, so
   they fell through to the base single column and one hit rendered as a
   full-bleed banner. auto-fill rather than auto-fit on purpose: auto-fit
   collapses the empty tracks and stretches a lone result across the row again,
   which is the very thing being fixed. */
.ptech-posts--search {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

.ptech-posts--cat {
    grid-template-columns: repeat(3, 1fr)
}

.ig-feed__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px
}

.ig-feed__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f1f1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ptech-accent)
}

.ig-feed__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block
}

.ig-feed__meta {
    min-width: 0
}

.ig-feed__name {
    display: block;
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ptech-heading, #152124);
    text-decoration: none;
    margin-bottom: 4px
}

.ig-feed__name:hover {
    color: var(--ptech-accent-ink)
}

.ig-feed__bio {
    margin: 0;
    font-family: var(--ptech-font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: #555
}

.ig-feed__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
}

.ig-feed__grid.is-clamped .ig-feed__item:nth-child(n+7) {
    display: none
}

.ig-feed__item {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #000
}

.ig-feed__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease
}

.ig-feed__item:hover img {
    transform: scale(1.06)
}

.ig-feed__item.is-video::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    background: center/38px 38px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.92'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    pointer-events: none
}

.ig-feed__item.is-gallery::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: center/20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='13' height='13' rx='2'/%3E%3Cpath d='M3 8v11a2 2 0 0 0 2 2h11'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
    pointer-events: none
}

.ig-feed__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px
}

.ig-feed__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    font-family: var(--ptech-font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    color: var(--ptech-on-dark);
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease
}

.ig-feed__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05)
}

.ig-feed__btn--more {
    background: #1c6fb0
}

.ig-feed__btn--follow {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    box-shadow: 0 6px 16px rgba(214, 41, 118, .3)
}

.ig-feed__btn--follow::before {
    content: "";
    width: 16px;
    height: 16px;
    background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E")
}

@media (max-width:991px) {
    .ptech-sidebar {
        display: block;
        margin-top: 40px
    }

    .ptech-widget--form {
        position: static
    }
}

@media (max-width:767px) {
    .ptech-posts--2col {
        grid-template-columns: 1fr
    }

    .ptech-posts--cat {
        grid-template-columns: repeat(2, 1fr)
    }

    .ptech-cat-block__head {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start
    }
}

@media (max-width:460px) {
    .ptech-posts--cat {
        grid-template-columns: 1fr
    }
}

.ptech-loadmore-wrap {
    text-align: center;
    margin-top: 44px
}

.ptech-loadmore {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 38px;
    border: 2px solid var(--ptech-accent);
    border-radius: 50px;
    background: 0 0;
    color: var(--ptech-accent);
    font-family: var(--ptech-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: color .3s ease, box-shadow .3s ease, transform .2s ease
}

.ptech-loadmore::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ptech-accent);
    transform: translateY(101%);
    transition: transform .35s ease;
    z-index: 0
}

.ptech-loadmore:hover {
    color: var(--ptech-on-dark);
    box-shadow: 0 12px 26px rgba(31, 66, 93, .35);
    transform: translateY(-2px)
}

.ptech-loadmore:hover::before {
    transform: translateY(0)
}

.ptech-loadmore__arrow,
.ptech-loadmore__wave {
    position: relative;
    z-index: 1
}

.ptech-loadmore__wave {
    display: inline-block
}

.ptech-loadmore__wave span {
    display: inline-block;
    animation: ptechWave 1.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .07s)
}

@keyframes ptechWave {

    0%,
    100%,
    55% {
        transform: translateY(0)
    }

    28% {
        transform: translateY(-5px)
    }
}

.ptech-loadmore__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    animation: ptechBounce 1.8s ease-in-out infinite
}

@keyframes ptechBounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(5px)
    }
}

.ptech-loadmore.is-loading {
    pointer-events: none
}

.ptech-loadmore.is-loading .ptech-loadmore__arrow,
.ptech-loadmore.is-loading .ptech-loadmore__wave span {
    animation: none
}

.ptech-loadmore.is-loading .ptech-loadmore__arrow svg {
    display: none
}

.ptech-loadmore.is-loading .ptech-loadmore__arrow::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ptechSpin .7s linear infinite
}

@keyframes ptechSpin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {

    .ptech-loadmore__arrow,
    .ptech-loadmore__wave span {
        animation: none !important
    }
}

.ptech-divider {
    width: 100%;
    max-width: 480px;
    height: clamp(54px, 9vw, 88px);
    border: none;
    margin: 40px auto;
    background: url(http://localhost/rishikeshYK/assets/img/mask-pattern/divider-pattern.webp) no-repeat center/contain
}

.ptech-divider.empty {
    margin: 0 auto
}

.ptech-divider.no-space {
    margin-top: 0;
    margin-bottom: 0
}

.ptech-breadcrumb {
    font-weight: 300;
    color: var(--ptech-text-soft);
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap
}

.ptech-breadcrumb nav {
    padding: 0
}

.ptech-breadcrumb--cat {
    margin-bottom: 16px
}

/* The banner itself is the <img class="ptech-hero__bg"> below, not a CSS
   background — rendered as a real element so the preload scanner finds it and
   fetchpriority applies. (This rule used to set background-image to a colour
   variable, which is invalid and did nothing.) */
.ptech-hero--banner {
    position: relative
}

/* ── Breadcrumb trail in the hero ──
   Matches the root site's page banner, where every inner page carries the same
   Home › … trail. Sits above the overlay, so its own z-index is needed. */
.ptech-hero__crumb {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, .78)
}

.ptech-hero__crumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.ptech-hero__crumb a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .3s var(--ptech-ease)
}

.ptech-hero__crumb a:hover {
    color: var(--ptech-accent)
}

/* Separator drawn in CSS, so a screen reader hears the trail as words rather
   than a run of chevrons. */
.ptech-hero__crumb li+li::before {
    content: "\203A";
    margin-inline-end: 8px;
    color: rgba(255, 255, 255, .5)
}

.ptech-hero__crumb [aria-current] {
    color: #fff;
    font-weight: 600
}

.ptech-hero--banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .65) 100%)
}

.ptech-hero--banner .ptech-hero__title {
    color: var(--ptech-on-dark);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35)
}

.ptech-hero--banner .ptech-hero__eyebrow {
    color: var(--ptech-on-dark)
}

.ptech-hero--banner .ptech-hero__subtitle {
    color: rgba(255, 255, 255, .85)
}

.ptech-hero--banner .ptech-container {
    position: relative;
    z-index: 2
}

.ptech-hero--home {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 480px;
    padding: 64px 0;
    text-align: center;
    background: radial-gradient(120% 130% at 50% -10%, rgba(31, 66, 93, .3) 0, transparent 55%), var(--ptech-primary-grad)
}

.ptech-hero--home .ptech-container {
    position: relative;
    z-index: 1;
    width: 100%
}

.ptech-hero--home.ptech-hero--banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.ptech-hero__eyebrow {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ptech-accent)
}

.ptech-hero--home .ptech-hero__title {
    font-size: clamp(34px, 5vw, 56px)
}

.ptech-hero__subtitle {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 400
}

.ptech-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    /* 18px on the left is for the bare bar, where the text field starts at the
       edge and needs breathing room. */
    padding: 6px 6px 6px 18px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ptech-search input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--ptech-text)
}

.ptech-search input[type=search]::placeholder {
    color: var(--ptech-text-soft)
}

.ptech-search__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    outline: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: var(--ptech-primary);
    transition: background .2s ease, transform .15s var(--ptech-ease)
}

.ptech-search__go:hover {
    background: var(--ptech-accent);
    transform: translateY(-1px)
}

/* With the category pill in the bar that 18px is doubled up: the pill carries
   its own padding and its own background, so the bar's left inset just pushes
   it off-centre against the 6px on the right. Matching them puts the pill and
   the search button the same distance from their edges, and hands the 12px
   back to the text field — which was short enough to clip the last letter of
   its placeholder. */
.ptech-search:has(.ptech-filter) {
    padding-left: 6px
}

.ptech-search--hero {
    max-width: 540px;
    margin: 30px auto 0
}

.ptech-mobilesearch {
    display: none
}

@media (max-width:767px) {
    .ptech-search--hero {
        display: none
    }

    .ptech-mobilesearch {
        display: block;
        position: sticky;
        top: 57px;
        z-index: 5;
        padding: 8px 0;
        background: var(--ptech-bg-soft);
        transition: box-shadow .25s ease, background .25s ease
    }

    .ptech-mobilesearch.is-stuck {
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(6px);
        box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .28)
    }

    .ptech-mobilesearch .ptech-search {
        box-shadow: none;
        border: 1px solid var(--ptech-border);
        gap: 6px;
        padding: 3px 3px 3px 16px
    }

    .ptech-mobilesearch .ptech-search input[type=search] {
        font-size: 14px
    }

    .ptech-mobilesearch .ptech-search button {
        width: 36px;
        height: 36px
    }

    .ptech-mobilesearch .ptech-search button svg {
        width: 17px;
        height: 17px
    }
}

@media (max-width:767px) {
    .ptech-hero--home {
        min-height: 340px;
        padding: 48px 0
    }
}

.ptech-single-banner {
    width: 100%;
    min-height: 340px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

@media (max-width:767px) {
    .ptech-single-banner {
        min-height: 200px
    }
}

.ptech-breadcrumb p {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden
}

.ptech-breadcrumb .sep,
.ptech-breadcrumb .separator,
.ptech-breadcrumb a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(10px, 1.2vw, 14px)
}

.ptech-breadcrumb a {
    color: var(--ptech-text-muted);
    text-decoration: none
}

.ptech-breadcrumb a:hover {
    color: var(--ptech-accent-ink)
}

.ptech-breadcrumb .sep,
.ptech-breadcrumb .separator {
    margin: 0 7px;
    color: var(--ptech-text-soft)
}

.ptech-breadcrumb .current,
.ptech-breadcrumb .last {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ptech-accent-ink);
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(10px, 1.2vw, 14px)
}

.ptech-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin: 0 0 26px;
    font-size: 13.5px;
    color: var(--ptech-text-muted)
}

/* ---------------------------------------------------------------------------
   Single post — heading block

   The title sits in the root site's .heading-wrap, the same block every section
   heading on the main site uses. It is left-aligned here (no .text-center), so
   the meta row and breadcrumb are pulled left to match — neither aligns itself.

   .heading-wrap also carries a decorative rule on .common-heading::after, the
   gold flourish used under section headings across the main site. An article
   title is not a section heading, so it is dropped here only — the root rule is
   untouched and every other page keeps it.
   --------------------------------------------------------------------------- */
.ptech-single__head .common-heading::after {
    display: none
}

.ptech-single__head .ptech-single__meta {
    justify-content: flex-start;
    margin-bottom: 0
}

.ptech-single__main > .ptech-breadcrumb {
    text-align: left
}

.ptech-single__main > .ptech-breadcrumb p {
    justify-content: flex-start
}

/* The wrap's 1000px cap is meant for a full-width section; inside the 8-column
   article it would never apply, and the auto margins are what centre it. */
.ptech-single__head {
    max-width: 100%
}

/* ---------------------------------------------------------------------------
   Single post — vertical rhythm

   The generic .section-spacing (80px) and .heading-wrap (up to 32px) are sized
   for full-width marketing sections on the root site. Stacked here — section
   padding, breadcrumb, heading wrap, meta, then the content's own 1.2em
   paragraph gaps — they added up to a lot of air before the reader reached any
   actual writing. Everything below is scoped to the single post, so the blog
   index and the related-posts band keep their own spacing.
   --------------------------------------------------------------------------- */
.ptech-single-wrap.section-spacing {
    padding-top: 44px;
    padding-bottom: 56px
}

.ptech-single__head.heading-wrap {
    margin-bottom: 18px
}

.ptech-single__head .ptech-single__meta {
    margin-bottom: 18px
}

/* Paragraph and heading gaps are tightened on the base rules further down
   rather than overridden here — those come later in the file and would win. */

.ptech-single__metaitem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(12px, 1.2vw, 14px) !important
}

.ptech-single__metaitem svg {
    color: var(--ptech-accent);
    flex-shrink: 0
}

.ptech-single__hero {
    position: relative;
    margin: 0 0 30px;
    border-radius: var(--ptech-radius);
    overflow: hidden
}

.ptech-single__hero img {
    display: block;
    width: 100%;
    height: auto
}

.ptech-single__content>* {
    margin: 0 0 .95em
}

.ptech-single__content>:first-child {
    margin-top: 0
}

.ptech-single__content>:last-child {
    margin-bottom: 0
}

.ptech-single__content h2,
.ptech-single__content h3,
.ptech-single__content h4,
.ptech-single__content h5,
.ptech-single__content h6 {
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    color: var(--ptech-dark);
    line-height: 1.3;
    margin: 1.15em 0 .4em
}

.ptech-single__content h2 {
    font-size: clamp(23px, 2.9vw, 29px);
    color: var(--ptech-accent-ink)
}

.ptech-single__content h3 {
    font-size: clamp(20px, 2.4vw, 24px)
}

.ptech-single__content h4 {
    font-size: clamp(18px, 2vw, 20px)
}

.ptech-single__content h5 {
    font-size: clamp(16px, 1.7vw, 17px)
}

.ptech-single__content h6 {
    font-size: clamp(14px, 1.5vw, 15px);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ptech-accent-ink)
}

.ptech-single__content :is(h2, h3, h4, h5, h6) :is(strong, b, span, em, i, u, font) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit
}

.ptech-single__content a {
    color: var(--ptech-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px
}

.ptech-single__content ol,
.ptech-single__content ul {
    list-style: none !important;
    margin: 1.2em 0;
    padding-left: 1.6em !important
}

.ptech-single__content li {
    position: relative;
    margin-bottom: .55em;
    line-height: 1.7
}

.ptech-single__content li:last-child {
    margin-bottom: 0
}

.ptech-single__content ul>li::before {
    content: "";
    position: absolute;
    left: -1.05em;
    top: .62em;
    width: .42em;
    height: .42em;
    border-radius: 50%;
    background: var(--ptech-accent)
}

.ptech-single__content ul ul>li::before {
    background: 0 0;
    border: 2px solid var(--ptech-accent)
}

.ptech-single__content ol {
    counter-reset: ptech-ol
}

.ptech-single__content ol>li::before {
    counter-increment: ptech-ol;
    content: counter(ptech-ol) ".";
    position: absolute;
    left: -1.6em;
    top: 0;
    min-width: 1.3em;
    text-align: right;
    color: var(--ptech-accent-ink);
    font-weight: 700
}

.ptech-single__content #ez-toc-container li::before {
    content: none
}

.ptech-single__content li>ol,
.ptech-single__content li>ul {
    margin: .55em 0 0
}

.ptech-single__content img {
    border-radius: var(--ptech-radius)
}

.ptech-single__content blockquote {
    position: relative;
    margin: 2em 0;
    padding: 32px 38px 32px 66px;
    background: var(--ptech-bg-soft);
    border: 1px solid var(--ptech-border-accent);
    border-radius: var(--ptech-radius);
    box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .2);
    font-family: var(--ptech-font-body);
    font-size: clamp(17px, 1.9vw, 20px);
    font-weight: 500;
    line-height: 1.7;
    color: var(--ptech-dark)
}

.ptech-single__content blockquote::before {
    content: "\201C";
    position: absolute;
    left: 20px;
    top: 10px;
    font-family: Georgia, "Cormorant Garamond", serif;
    font-size: 78px;
    line-height: 1;
    color: var(--ptech-accent);
    opacity: .28;
    pointer-events: none
}

.ptech-single__content blockquote p {
    margin-bottom: .6em
}

.ptech-single__content blockquote p:last-child {
    margin-bottom: 0
}

.ptech-single__content blockquote cite,
.ptech-single__content blockquote footer {
    display: block;
    margin-top: 18px;
    font-family: var(--ptech-font-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ptech-accent-ink)
}

.ptech-single__content blockquote cite::before,
.ptech-single__content blockquote footer::before {
    content: "— "
}

@media (max-width:600px) {
    .ptech-single__content blockquote {
        padding: 24px 22px 24px 64px
    }

    .ptech-single__content blockquote::before {
        font-size: 54px;
        left: 18px
    }
}

.ptech-single__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--ptech-border)
}

.ptech-single__share-label {
    font-family: var(--ptech-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--ptech-dark)
}

.ptech-author {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 34px;
    padding: 28px;
    background: var(--ptech-bg-soft);
    border-radius: var(--ptech-radius)
}

.ptech-author__avatar {
    flex: 0 0 auto
}

.ptech-author__avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 3px var(--ptech-bg), 0 0 0 5px #e0b89a
}

.ptech-author__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ptech-accent-ink);
    margin-bottom: 3px
}

.ptech-author__name {
    margin: 0 0 2px
}

.ptech-author__job {
    display: block;
    font-size: 13px;
    color: var(--ptech-text-muted);
    margin-bottom: 11px
}

.ptech-author__bio {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ptech-text-muted)
}

.ptech-author__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px
}

.ptech-author__socials {
    display: inline-flex;
    gap: 8px
}

.ptech-author__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    transition: background .25s ease, color .25s ease, transform .25s ease
}

.ptech-author__socials a:hover {
    background: var(--ptech-accent);
    color: #fff;
    transform: translateY(-2px)
}

.ptech-author__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 11px 20px
}

/* Wider than the article column on purpose: three of the root site's blog
   cards need the room, and the section reads as its own band under the post.
   .ptech-related__title used to live here; the section now uses the root
   site's .heading-wrap instead. */
.ptech-related .ptech-container {
    max-width: 1320px
}

.ptech-posts--3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

@media (max-width:767px) {
    .ptech-posts--3 {
        grid-template-columns: 1fr
    }

    .ptech-author {
        flex-direction: column;
        gap: 16px;
        text-align: center
    }

    .ptech-author__avatar img {
        margin: 0 auto
    }

    .ptech-author__foot {
        justify-content: center
    }
}

.ptech-author-page {
    padding-bottom: 80px
}

.ptech-author-hero {
    margin-bottom: 8px
}

.ptech-author-hero__banner {
    height: clamp(240px, 34vw, 420px);
    background-color: var(--ptech-bg-soft);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.ptech-author-hero__banner--default {
    background-image: radial-gradient(120% 140% at 50% 0, rgba(255, 255, 255, .12), transparent 60%), var(--ptech-primary-grad)
}

.ptech-author-hero__inner {
    position: relative;
    margin-top: clamp(-86px, -9vw, -64px);
    text-align: center
}

.ptech-author-hero__photo {
    width: clamp(140px, 18vw, 176px);
    aspect-ratio: 1/1;
    margin: 0 auto 20px;
    border-radius: 24px;
    overflow: hidden;
    border: 5px solid var(--ptech-bg);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
    background: var(--ptech-bg)
}

.ptech-author-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block
}

.ptech-author-hero__name {
    margin: 0 0 6px
}

.ptech-author-hero__job {
    max-width: 700px;
    margin: 0 auto;
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ptech-accent-ink)
}

.ptech-author-hero__socials {
    display: inline-flex;
    gap: 10px;
    margin-top: 18px
}

.ptech-author-hero__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ptech-bg-soft);
    border: 1px solid var(--ptech-border-accent);
    color: var(--ptech-text-muted);
    transition: background .25s ease, color .25s ease, transform .25s ease
}

.ptech-author-hero__socials a:hover {
    background: var(--ptech-accent);
    border-color: var(--ptech-accent);
    color: #fff;
    transform: translateY(-2px)
}

.ptech-author-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 760px;
    margin: 40px auto 0;
    padding: 26px 20px;
    background: var(--ptech-bg-soft);
    border: 1px solid var(--ptech-border-accent);
    border-radius: var(--ptech-radius)
}

.ptech-author-stat {
    flex: 1 1 0;
    min-width: 120px;
    padding: 0 10px;
    text-align: center
}

.ptech-author-stat+.ptech-author-stat {
    border-left: 1px solid var(--ptech-border-accent)
}

.ptech-author-stat__num {
    display: block;
    font-family: var(--ptech-font-heading);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ptech-accent-ink)
}

.ptech-author-stat__label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ptech-text-muted)
}

.ptech-author-bio {
    max-width: 820px;
    margin: 44px auto 0;
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.85;
    color: var(--ptech-text)
}

.ptech-author-bio p {
    margin: 0 0 1.1em
}

.ptech-author-bio p:last-child {
    margin-bottom: 0
}

.ptech-author-cta {
    margin-top: 44px;
    text-align: center
}

@media (max-width:600px) {
    .ptech-author-stat+.ptech-author-stat {
        border-left: 0
    }

    .ptech-author-stats {
        gap: 22px
    }
}

#ez-toc-container {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 22px;
    padding: 6px 18px;
    background: var(--ptech-bg-soft);
    border: 1px solid var(--ptech-border);
    border-radius: var(--ptech-radius);
    font-family: var(--ptech-font-body);
    color: var(--ptech-text)
}

#ez-toc-container .ez-toc-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

#ez-toc-container .ez-toc-js-icon-con {
    left: 0 !important
}

#ez-toc-container .ez-toc-title {
    margin: 0;
    font-family: var(--ptech-font-heading) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: var(--ptech-dark) !important
}

#ez-toc-container .ez-toc-title-toggle {
    flex: 0 0 auto
}

#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    cursor: pointer
}

#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle:focus {
    outline: 0 !important
}

#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--ptech-border-accent)
}

#ez-toc-container .ez-toc-icon-toggle-span svg:last-child {
    display: none !important
}

#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle:hover svg {
    fill: var(--ptech-accent-ink) !important;
    color: var(--ptech-accent-ink) !important
}

#ez-toc-container nav {
    margin: 0 !important;
    padding: 0 !important
}

#ez-toc-container nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important
}

#ez-toc-container>nav>ul {
    margin-top: 9px !important;
    padding-top: 9px !important;
    border-top: 1px solid var(--ptech-border)
}

#ez-toc-container nav ul li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important
}

#ez-toc-container nav ul ul {
    margin: 2px 0 !important;
    padding-left: 20px !important
}

#ez-toc-container a.ez-toc-link {
    display: flex;
    align-items: baseline;
    gap: .2em;
    padding: 3px 0;
    font-family: var(--ptech-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45;
    color: var(--ptech-text-muted) !important;
    text-decoration: none;
    transition: color .2s ease
}

#ez-toc-container a.ez-toc-link.active,
#ez-toc-container a.ez-toc-link:hover {
    color: var(--ptech-accent-ink) !important
}

#ez-toc-container a.ez-toc-link.active {
    font-weight: 600 !important
}

#ez-toc-container nav ul li a::before {
    float: none !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
    color: var(--ptech-accent-ink);
    font-weight: 600
}

@media (max-width:991px) {
    #ez-toc-container {
        width: 100%;
        max-width: 100%
    }

    #ez-toc-container.ptech-toc-sticky {
        position: fixed;
        top: 57px;
        left: 0;
        width: 100%;
        z-index: 1000;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .25);
        max-height: calc(100vh - 57px);
        overflow-y: auto
    }
}

#rank-math-faq .rank-math-list-item {
    padding: 18px 22px;
    margin-bottom: 16px;
    background: #faf4f0;
    border-left: 4px solid var(--ptech-primary);
    border-radius: 10px
}

#rank-math-faq .faq-label {
    float: left;
    clear: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0 12px 12px 0;
    border-radius: 50%;
    font-family: var(--ptech-font-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

#rank-math-faq .faq-label-q {
    color: #fff;
    background: var(--ptech-primary)
}

#rank-math-faq .faq-label-a {
    color: var(--ptech-accent-ink);
    background: rgba(31, 66, 93, .18)
}

#rank-math-faq .rank-math-question {
    margin: 0;
    overflow: hidden
}

#rank-math-faq .rank-math-answer {
    margin-top: 4px;
    overflow: hidden
}

#rank-math-faq .rank-math-answer p:last-child {
    margin-bottom: 0
}

.ptech-cat-header__bg,
.ptech-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none
}

.ptech-author,
.ptech-author-bio,
.ptech-comments,
.ptech-empty,
.ptech-noresults,
.ptech-page__content,
.ptech-single__content {
    background: var(--ptech-bg);
    border-radius: var(--ptech-radius);
    padding: 26px
}

.ptech-comments__title {
    display: block;
    margin: 0 0 22px;
    padding: 10px 18px;
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-heading);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700
}

/* No pill fill: the trail reads as plain text, flush with the title's left
   edge, so the horizontal padding that centred it in the chip goes too. */
.ptech-breadcrumb {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 5px 0;
    border-radius: 0;
    background: none;
    color: var(--ptech-text);
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis
}

.ptech-breadcrumb a {
    color: var(--ptech-primary);
    text-decoration: none
}

.ptech-breadcrumb a:hover {
    text-decoration: underline
}

.ptech-single__hero {
    border-radius: var(--ptech-radius)
}

/* Outlined chips, not filled ones — the soft beige fill washed the meta row
   into the page. The hairline border keeps each item legible as its own unit. */
.ptech-single__metaitem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--ptech-border-soft);
    border-radius: 50px;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ptech-text-muted)
}

.ptech-single__author-link {
    color: var(--ptech-primary);
    font-weight: 700;
    text-decoration: none
}

.ptech-author-hero__banner--default {
    background: var(--ptech-primary-grad)
}

.ptech-author-hero__photo,
.ptech-author-hero__photo img,
.ptech-author__avatar img {
    border-radius: 50%
}

.ptech-author-hero__name {
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    color: var(--ptech-text)
}

.ptech-author-stats {
    gap: 0
}

.ptech-author-stat {
    border-left: 1px solid var(--ptech-border-soft)
}

.ptech-author-stat:first-child {
    border-left: 0
}

.ptech-author-stat__num {
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    color: var(--ptech-primary)
}

.ptech-btn,
.ptech-loadmore {
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    transition: background .2s ease, transform .15s var(--ptech-ease)
}

.ptech-btn:hover,
.ptech-loadmore:hover {
    background: var(--ptech-accent);
    color: var(--ptech-on-dark);
    transform: translateY(-2px)
}

.ptech-btn::before,
.ptech-loadmore__wave {
    display: none
}

.ptech-comments__list {
    list-style: none;
    margin: 0;
    padding: 0
}

.ptech-comments__list li {
    display: block
}

.ptech-comments__list .comment-body {
    padding: 16px 0;
    border-bottom: 1px solid var(--ptech-border-soft)
}

.ptech-comments__list>li:last-child .comment-body {
    border-bottom: 0
}

.ptech-comments__list .children {
    list-style: none;
    margin: 0 0 0 26px;
    padding-left: 18px;
    border-left: var(--ptech-border-w) solid var(--ptech-border-soft)
}

.ptech-comments__list .comment-author,
.ptech-comments__list .fn {
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    font-style: normal;
    color: var(--ptech-text)
}

.ptech-comments__list .comment-meta,
.ptech-comments__list .comment-metadata {
    font-size: 12px;
    color: var(--ptech-text-soft)
}

.ptech-comments__list .avatar {
    border-radius: 50%
}

.ptech-comments__closed {
    margin: 0;
    color: var(--ptech-text-muted);
    text-align: center
}

.ptech-comments .comment-form input[type=email],
.ptech-comments .comment-form input[type=text],
.ptech-comments .comment-form input[type=url],
.ptech-comments .comment-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ptech-border-soft);
    border-radius: var(--ptech-radius-sm);
    background: #fff;
    font-family: var(--ptech-font-body);
    font-size: 14px;
    color: var(--ptech-text)
}

.ptech-comments .comment-form .submit {
    padding: 11px 22px;
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-primary);
    color: var(--ptech-on-dark);
    font-family: var(--ptech-font-heading);
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, transform .15s var(--ptech-ease)
}

.ptech-comments .comment-form .submit:hover {
    background: var(--ptech-accent);
    transform: translateY(-2px)
}

.ptech-noresults__title {
    font-family: var(--ptech-font-heading);
    font-weight: 700;
    color: var(--ptech-text)
}

.ptech-noresults__icon {
    color: var(--ptech-primary)
}

@media (max-width:600px) {

    .ptech-author,
    .ptech-author-bio,
    .ptech-comments,
    .ptech-empty,
    .ptech-noresults,
    .ptech-page__content,
    .ptech-single__content {
        padding: 18px
    }
}

.ptech-cat-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    margin-bottom: 34px;
    padding: 40px 34px 46px;
    border-radius: var(--ptech-radius);
    background: var(--ptech-bg);
    text-align: center
}

.ptech-cat-header::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 10px;
    background: var(--ptech-primary-grad)
}

.ptech-cat-header .ptech-container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 16px
}

.ptech-cat-header__main {
    min-width: 0
}

.ptech-cat-header .ptech-breadcrumb {
    margin: 0 0 14px
}

.ptech-cat-header__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--ptech-font-heading);
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ptech-primary);
    overflow-wrap: break-word
}

.ptech-cat-header__desc {
    max-width: 620px;
    margin: 12px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ptech-text-muted)
}

/* Centres the heading, not the heading-plus-chip.
   As a centred flex row the two were balanced as one block, so the count chip
   pushed the title left of the page axis by half its own width — against the
   centred breadcrumb above it the title read as misaligned. Three tracks with
   matching 1fr sides put the title on the axis and let the chip sit in the
   right-hand track without moving it. */
.ptech-cat-header__titlerow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px
}

.ptech-cat-header__titlerow > .ptech-cat-header__title {
    grid-column: 2
}

.ptech-cat-header__titlerow > .ptech-cat-header__count {
    grid-column: 3;
    justify-self: start
}

/* No room to hold the chip beside the title — stack it under instead. */
@media (max-width:575.98px) {
    .ptech-cat-header__titlerow {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px
    }

    .ptech-cat-header__titlerow > .ptech-cat-header__title,
    .ptech-cat-header__titlerow > .ptech-cat-header__count {
        grid-column: 1;
        justify-self: center
    }
}

.ptech-cat-header__count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: baseline;
    gap: 5px;
    padding: 4px 13px;
    border-radius: 50px;
    background: var(--ptech-accent);
    color: white;
    font-family: var(--ptech-font-heading);
    line-height: 1.5;
    white-space: nowrap
}

.ptech-cat-header__countnum {
    color:inherit;
    font-size: 14px;
    font-weight: 700
}

.ptech-cat-header__countword {
    color:inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85
}

.ptech-cat-header--banner {
    min-height: 420px;
    padding: 44px 34px 46px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.ptech-cat-header--banner::before {
    display: none
}

.ptech-cat-header--banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .66) 100%)
}

/* The banner variant recoloured the title, description and count for a dark
   photo but not the breadcrumb, which kept --ptech-text-soft and disappeared
   into the image. Rank Math and the fallback trail render different elements,
   so the anchor, the current item and the separator are all named. */
.ptech-cat-header--banner .ptech-breadcrumb,
.ptech-cat-header--banner .ptech-breadcrumb p,
.ptech-cat-header--banner .ptech-breadcrumb a,
.ptech-cat-header--banner .ptech-breadcrumb .sep,
.ptech-cat-header--banner .ptech-breadcrumb .current,
.ptech-cat-header--banner .ptech-breadcrumb .last {
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45)
}

.ptech-cat-header--banner .ptech-breadcrumb a:hover,
.ptech-cat-header--banner .ptech-breadcrumb a:focus-visible {
    color: var(--ptech-accent)
}

.ptech-cat-header--banner .ptech-cat-header__title {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5)
}

.ptech-cat-header--banner .ptech-cat-header__desc {
    color: rgba(255, 255, 255, .88)
}
.ptech-cat-header__desc p{
    color:inherit;
}

.ptech-cat-header--banner .ptech-cat-header__count {
    background: rgba(255, 255, 255, .16);
    border-color: #fff
}

.ptech-cat-header__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

@media (max-width:782px) {
    .ptech-cat-header {
        min-height: 240px;
        padding: 30px 20px 34px
    }

    .ptech-cat-header__title {
        font-size: clamp(24px, 7vw, 32px)
    }

    .ptech-cat-header--banner {
        min-height: 280px;
        padding: 30px 20px 34px
    }
}
/* ===========================================================================
   Grid utilities (.tr- prefix)

   A small subset of Bootstrap's grid, self-contained: no dependency on
   Bootstrap itself and nothing here reaches outside the .tr- namespace, so it
   cannot collide with the root site's stylesheet that the blog also loads.

   These are load-bearing, not spare parts: the theme's templates already mark
   up the article/sidebar split with .tr-row + .tr-lg8 + .tr-lg4, and without
   these rules that split renders as one stacked column.
   =========================================================================== */
.tr-wrap {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .tr-wrap {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .tr-wrap {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .tr-wrap {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .tr-wrap {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .tr-wrap {
        max-width: 1320px;
    }
}

.tr-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.tr-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

.tr-row--g3 {
    margin-right: -8px;
    margin-left: -8px;
    margin-top: -16px;
}

.tr-row--g3 > * {
    padding-right: 8px;
    padding-left: 8px;
    margin-top: 16px;
}

.tr-row--g4,
.tr-row--gy4 {
    margin-top: -24px;
}

.tr-row--g4 > *,
.tr-row--gy4 > * {
    margin-top: 24px;
}

.tr-c4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.tr-c6 {
    flex: 0 0 auto;
    width: 50%;
}

.tr-c12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 576px) {
    .tr-sm6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .tr-sm12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .tr-md4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .tr-md6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .tr-md12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .tr-lg3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .tr-lg4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .tr-lg6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .tr-lg8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .tr-lg12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .tr-lg-justify-center {
        justify-content: center !important;
    }
}

@media (min-width: 1200px) {
    .tr-xl6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

.tr-flex {
    display: flex !important;
}

.tr-block {
    display: block !important;
}

.tr-hide {
    display: none !important;
}

.tr-items-center {
    align-items: center !important;
}

.tr-justify-center {
    justify-content: center !important;
}

.tr-m0 {
    margin: 0 !important;
}

.tr-mb0 {
    margin-bottom: 0 !important;
}

.tr-mb2 {
    margin-bottom: .5rem !important;
}

.tr-mb4 {
    margin-bottom: 1.5rem !important;
}

.tr-mb5 {
    margin-bottom: 3rem !important;
}

.tr-mt2 {
    margin-top: .5rem !important;
}

.tr-mt4 {
    margin-top: 1.5rem !important;
}

.tr-mt5 {
    margin-top: 3rem !important;
}

.tr-my2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.tr-my5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.tr-text-center {
    text-align: center !important;
}

.tr-white {
    color: #fff !important;
}

.tr-w100 {
    width: 100% !important;
}

.tr-img {
    max-width: 100%;
    height: auto;
}

.tr-px0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* ---------------------------------------------------------------------------
   Heading weight

   The root site self-hosts Bricolage Grotesque in 400/500/600/700 only. Asking
   for 800 — which this theme did in seventeen places — leaves the browser to
   synthesise a faux-bold from the 700 face, and that smeared result is what
   reads as "the wrong font" beside the main site.

   The hero title drops to 400 to match .page-breadcrumb .breadcrumb-title on
   the root site, so the blog banner and every page banner are the same weight.
   --------------------------------------------------------------------------- */
.ptech-hero__title {
    font-weight: 400
}

@media (max-width:575.98px) {
    .ptech-search__cats {
        padding-inline: 10px 26px
    }

    .ptech-search__cats select {
        max-width: 84px;
        font-size: 13px
    }

    /* The label is the widest part of the pill and the icon already says
       "categories", so on the narrowest screens the icon carries it alone. */
    .ptech-search__cats-icon {
        display: none
    }
}

/* ---------------------------------------------------------------------------
   Category + month filter panel in the search bar

   The trigger writes into two hidden inputs — `cat` and `m` — which are the
   query vars WordPress already understands, so submitting the form is an
   ordinary search URL and nothing has to interpret it server-side.
   --------------------------------------------------------------------------- */
.ptech-filter {
    position: relative;
    flex: 0 0 auto
}

.ptech-filter__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    border: 0;
    border-radius: 999px;
    background: 0 0;
    color: var(--ptech-primary);
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    transition: background .3s var(--ptech-ease)
}

.ptech-filter__trigger:hover,
.ptech-filter.is-open .ptech-filter__trigger {
    background: var(--ptech-bg-soft)
}

.ptech-filter__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ptech-bg-soft);
    color: var(--ptech-primary)
}

.ptech-filter__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0
}

.ptech-filter__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ptech-primary);
    opacity: .75
}

/* Capped, and it ellipsises past the cap: the pill and the text field share a
   fixed 540px bar, so every pixel the chosen category takes is one the
   placeholder loses. */
.ptech-filter__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ptech-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px
}

.ptech-filter__caret {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ptech-text-muted);
    transition: transform .3s var(--ptech-ease)
}

.ptech-filter.is-open .ptech-filter__caret {
    transform: rotate(180deg)
}

/* Divider between the trigger and the text field, so they read as two controls
   rather than one very wide input. */
.ptech-filter::after {
    content: "";
    position: absolute;
    inset-inline-end: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: var(--ptech-border)
}

/* ── Panel ── */
.ptech-filter__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 14px);
    inset-inline-start: 0;
    width: min(560px, 86vw);
    padding: 18px;
    background: #fff;
    border: 1px solid var(--ptech-border);
    border-radius: var(--ptech-radius);
    box-shadow: 0 18px 50px rgba(20, 32, 27, .18);
    text-align: start;
    cursor: default
}

.ptech-filter__panel[hidden] {
    display: none
}

.ptech-filter__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.ptech-filter__head {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ptech-primary)
}

/* Both lists scroll independently; a blog with three years of archives would
   otherwise make the panel taller than the viewport. */
.ptech-filter__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 232px;
    overflow-y: auto
}

.ptech-filter__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ptech-radius-sm);
    background: 0 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--ptech-text);
    text-align: start;
    cursor: pointer;
    transition: background .2s var(--ptech-ease), color .2s var(--ptech-ease)
}

.ptech-filter__opt:hover {
    background: var(--ptech-bg-soft)
}

.ptech-filter__opt.is-active {
    background: var(--ptech-bg-soft);
    color: var(--ptech-primary);
    font-weight: 600
}

.ptech-filter__count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--ptech-text-muted)
}

.ptech-filter__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ptech-border)
}

.ptech-filter__clear {
    border: 0;
    background: 0 0;
    padding: 8px 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ptech-text-muted);
    cursor: pointer
}

.ptech-filter__clear:hover {
    color: var(--ptech-primary)
}

.ptech-filter__apply {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ptech-primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s var(--ptech-ease)
}

.ptech-filter__apply:hover {
    background: var(--ptech-primary-dark)
}

@media (max-width:575.98px) {
    /* The label and value stack too wide for a phone; the icon carries it. */
    .ptech-filter__text,
    .ptech-filter::after {
        display: none
    }

    .ptech-filter__panel {
        inset-inline-start: -8px;
        width: calc(100vw - 40px)
    }

    .ptech-filter__cols {
        grid-template-columns: 1fr
    }

    .ptech-filter__list {
        max-height: 168px
    }
}

/* ---------------------------------------------------------------------------
   Filter panel — guards against the root site's global styles

   The blog loads the root's whole style.css, which resets bare <button> and
   carries Bootstrap. Every control inside the panel therefore states its own
   box explicitly rather than inheriting one, and the trigger's two lines are
   kept on one line each so the pill cannot collapse into the text field.
   --------------------------------------------------------------------------- */
.ptech-filter__trigger,
.ptech-filter__clear,
.ptech-filter__apply {
    width: auto;
    height: auto;
    min-width: 0;
    box-shadow: none;
    transform: none
}

.ptech-filter__trigger {
    flex-wrap: nowrap;
    white-space: nowrap
}

.ptech-filter__label,
.ptech-filter__value {
    display: block;
    white-space: nowrap;
    line-height: 1.25
}

.ptech-filter__opt {
    border-radius: var(--ptech-radius-sm);
    white-space: normal;
    line-height: 1.35
}

.ptech-filter__apply {
    border-radius: 999px
}

/* The hero clips its background image with the image's own inset:0, so the
   section itself no longer needs overflow:hidden — which was cutting the panel
   off at the bottom edge of the banner. */
.ptech-hero {
    overflow: visible
}

.ptech-hero__bg {
    border-radius: inherit
}

/* The panel has to sit above the banner overlay and the sticky mobile bar. */
.ptech-filter__panel {
    z-index: 60
}

/* ---------------------------------------------------------------------------
   Stacking for the open filter panel

   The panel hangs out of the hero, but the hero is the FIRST positioned block
   on the page — every section after it paints on top regardless of the panel's
   own z-index, because that z-index only orders siblings inside the hero.

   So the hero itself is raised, and only while the panel is open: left raised
   permanently it would sit above the sticky mobile search bar below it.
   --------------------------------------------------------------------------- */
.ptech-hero:has(.ptech-filter.is-open) {
    z-index: 70
}

/* Fallback for browsers without :has() — the script mirrors the state onto the
   section so the same lift still happens. */
.ptech-hero.has-filter-open {
    z-index: 70
}

/* The panel sits above the hero's own overlay and crumb. */
.ptech-filter__panel {
    z-index: 5
}

/* ---------------------------------------------------------------------------
   Option rows and the count chip

   The rows fill their column so the hover and active states read as bands
   across the list. Shrink-wrapped to the text they looked like loose pills
   stuck to each word.
   --------------------------------------------------------------------------- */
.ptech-filter__opt {
    width: 100%;
    padding: 9px 12px
}

.ptech-filter__list li+li {
    margin-top: 2px
}

/* Frosted disc. backdrop-filter samples whatever sits behind it, so the chip
   picks up the row's own hover tint instead of being painted a flat grey — and
   a fixed square box with place-items keeps a 1 and a 100 the same circle. */
.ptech-filter__count {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--ptech-primary);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(47, 85, 93, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.ptech-filter__opt:hover .ptech-filter__count,
.ptech-filter__opt.is-active .ptech-filter__count {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(201, 162, 39, .45)
}

/* ---------------------------------------------------------------------------
   Trigger and option sizing

   The blog loads the root site's whole stylesheet, which puts a border on
   buttons in places, so the trigger states its own — the pill already reads as
   a control through its hover fill and caret.
   --------------------------------------------------------------------------- */
.ptech-filter__trigger,
.ptech-filter__trigger:hover,
.ptech-filter__trigger:focus,
.ptech-filter__trigger:active {
    border: 0;
    outline: 0;
    box-shadow: none
}

/* Every row the same height whatever it holds — the count chip is 26px tall and
   was making rows that have one taller than rows that do not. box-sizing is
   restated because the padding is set here and a stray content-box rule from
   the root stylesheet would otherwise widen the active row past its column. */
.ptech-filter__opt {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    margin: 0;
    gap: 10px;
    border: 0;
    outline: 0
}

/* ---------------------------------------------------------------------------
   Focus ring

   The gold outline read as a warning band around the trigger. A soft ring in
   the brand teal does the same job quietly — and as box-shadow rather than
   outline it follows the pill's border-radius instead of drawing a rectangle
   around it.

   Kept rather than removed: without any focus style a keyboard user cannot
   tell which control they are on. :focus-visible means a mouse click never
   shows it.
   --------------------------------------------------------------------------- */
.ptech-filter__trigger:focus-visible,
.ptech-filter__opt:focus-visible,
.ptech-filter__clear:focus-visible,
.ptech-filter__apply:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 85, 93, .18)
}

/* The trail now sits under the h1 rather than above it, so its spacing flips:
   room above to separate it from the heading, none below — the divider that
   follows brings its own. */
.ptech-hero__crumb {
    margin-top: 12px;
    margin-bottom: 0
}

/* ---------------------------------------------------------------------------
   Instagram bio links — pill + dialog

   Mirrors Instagram's own treatment: the first link shows as a pill under the
   bio, the rest fold into "and N more" and open in a small dialog.
   --------------------------------------------------------------------------- */
.ig-feed__links {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 10px;
    padding: 7px 13px;
    border: 1px solid var(--ptech-border);
    border-radius: 999px;
    background: var(--ptech-bg-soft);
    font-family: inherit;
    font-size: 13px;
    color: var(--ptech-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background .3s var(--ptech-ease), border-color .3s var(--ptech-ease)
}

.ig-feed__links:hover {
    background: #fff;
    border-color: var(--ptech-accent)
}

.ig-feed__links-icon {
    display: inline-flex;
    flex: 0 0 auto
}

/* The domain truncates rather than wrapping, so the pill stays one line even in
   the narrow sidebar. */
.ig-feed__links-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ig-feed__links-more {
    flex: 0 0 auto;
    color: var(--ptech-text-muted)
}

/* ── Dialog ── */
.ig-links[hidden] {
    display: none
}

.ig-links {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 20px
}

.ig-links__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 32, 27, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px)
}

.ig-links__box {
    position: relative;
    width: min(420px, 100%);
    max-height: 80vh;
    overflow: hidden auto;
    background: #fff;
    border-radius: var(--ptech-radius);
    box-shadow: 0 24px 60px rgba(20, 32, 27, .3)
}

.ig-links__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ptech-border)
}

.ig-links__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--ptech-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ptech-text);
    cursor: pointer
}

.ig-links__close:hover {
    background: var(--ptech-bg-soft)
}

/* Centred against the box, not the row — the close button is the only other
   child, so centring it here keeps the title optically in the middle. */
.ig-links__title {
    flex: 1 1 auto;
    margin: 0;
    margin-inline-end: 32px;
    text-align: center;
    font-family: var(--ptech-font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--ptech-ink)
}

.ig-links__list {
    margin: 0;
    padding: 0;
    list-style: none
}

.ig-links__list li+li {
    border-top: 1px solid var(--ptech-border)
}

.ig-links__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: background .2s var(--ptech-ease)
}

.ig-links__list a:hover {
    background: var(--ptech-bg-soft)
}

.ig-links__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ptech-bg-soft);
    color: var(--ptech-primary)
}

.ig-links__text {
    min-width: 0
}

.ig-links__label,
.ig-links__url {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ig-links__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ptech-ink)
}

.ig-links__url {
    font-size: 12px;
    color: var(--ptech-text-muted)
}

/* Stop the page behind the dialog from scrolling. */
body.ig-links-open {
    overflow: hidden
}

/* ---------------------------------------------------------------------------
   Filter panel — glass

   The sheet itself is defined once, further down under "Filter panel — glass,
   final". The rows and the footer go translucent to match — left opaque they
   would sit on the glass as flat white cards and give the effect away.
   --------------------------------------------------------------------------- */
.ptech-filter__opt:hover,
.ptech-filter__opt.is-active {
    background: rgba(255, 255, 255, .55)
}

.ptech-filter__opt.is-active {
    box-shadow: inset 0 0 0 1px rgba(47, 85, 93, .12)
}

.ptech-filter__head {
    color: var(--ptech-primary-dark)
}

.ptech-filter__foot {
    border-top-color: rgba(47, 85, 93, .14)
}

.ptech-filter__count {
    background: rgba(255, 255, 255, .65);
    border-color: rgba(47, 85, 93, .16)
}

/* The default scrollbar is a grey slab against the glass; this keeps the two
   lists from breaking the effect at their edges. */
.ptech-filter__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 85, 93, .28) transparent
}

.ptech-filter__list::-webkit-scrollbar {
    width: 6px
}

.ptech-filter__list::-webkit-scrollbar-track {
    background: 0 0
}

.ptech-filter__list::-webkit-scrollbar-thumb {
    background: rgba(47, 85, 93, .28);
    border-radius: 999px
}

.ptech-filter__list::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 85, 93, .45)
}

/* ---------------------------------------------------------------------------
   Filter panel — readable glass (supersedes the values above)

   The first attempt sat at .72 alpha over a 22px blur, and over a photograph
   with a white card behind it the labels washed out. Three changes, in the
   order they matter:

   1. Blur 40px. This is what actually buys readability — a heavy blur destroys
      the detail behind the sheet, so there is no edge left to compete with the
      text. Raising opacity instead would just make it a white box.
   2. Alpha .88. Enough to settle the remaining variation without going opaque;
      colour and light still read through, which is the point of the effect.
   3. Darker text. Against a light-but-uneven sheet the muted greys were the
      first thing to disappear, so labels take the ink colour and the secondary
      text moves up from #8a968f.
   --------------------------------------------------------------------------- */
.ptech-filter__opt {
    color: var(--ptech-ink)
}

.ptech-filter__opt:hover {
    background: rgba(255, 255, 255, .85)
}

.ptech-filter__opt.is-active {
    background: rgba(255, 255, 255, .95);
    color: var(--ptech-primary-dark)
}

.ptech-filter__head {
    color: var(--ptech-primary-dark);
    opacity: 1
}

/* Counts were the lightest thing in the panel and went first. */
.ptech-filter__count {
    color: var(--ptech-primary-dark);
    background: rgba(255, 255, 255, .9);
    border-color: rgba(47, 85, 93, .22)
}

.ptech-filter__clear {
    color: var(--ptech-ink)
}

/* ---------------------------------------------------------------------------
   Filter panel — glass, final

   The one place the sheet is defined; three earlier passes stacked here and
   the last one silently won.

   Nothing behind the panel may stay readable. Blur and alpha both hide, but
   differently: alpha evenly fades everything, so it takes near-opacity to kill
   a headline — and at that point it is a white box, not glass. Blur destroys
   the shapes instead, so 36px turns any text into a smear no matter how large,
   and .96 alpha then only has to mute what is left. What survives is colour
   and light, which is the whole point of the effect.
   --------------------------------------------------------------------------- */
.ptech-filter__panel {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .8);
    box-shadow:
        0 24px 60px rgba(20, 32, 27, .26),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(36px) saturate(1.7);
    -webkit-backdrop-filter: blur(36px) saturate(1.7)
}

/* No backdrop-filter means no blur doing the hiding, so the sheet goes solid
   rather than leaving the banner legible through the option labels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ptech-filter__panel {
        background: #fff
    }
}

/* ---------------------------------------------------------------------------
   Filter list scrollbar

   The root stylesheet carries its own ::-webkit-scrollbar rules, which were
   winning here and putting a full-width platform scrollbar — arrows and all —
   down the middle of the glass. These are scoped through the panel so they
   outrank it, and !important covers the arrow buttons, which some builds only
   drop when told twice.

   The bar is inset and semi-transparent so it reads as part of the sheet
   rather than a strip cut out of it. Left visible rather than hidden: with six
   categories on screen and more below, something has to say so.
   --------------------------------------------------------------------------- */
.ptech-filter__panel .ptech-filter__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 85, 93, .3) transparent;
    /* Room for the bar so the labels never sit under it. */
    padding-inline-end: 6px
}

.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important
}

.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar-track,
.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important
}

.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar-thumb {
    background: rgba(47, 85, 93, .3) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important
}

.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 85, 93, .5) !important
}

/* The stepper arrows at each end are what made it look like a Windows widget. */
.ptech-filter__panel .ptech-filter__list::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important
}

/* ---------------------------------------------------------------------------
   Trending strip

   Heading on the left, a horizontally scrolling row of cards to its right, and
   the arrows pinned at the end. The track is a scroll container with snap
   points, so wheel, drag, touch and keyboard all work with no script; the
   buttons are an affordance on top of that, not the mechanism.
   --------------------------------------------------------------------------- */
.ptech-trending {
    padding: clamp(18px, 2vw, 26px) 0
}

.ptech-trending__inner {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
    padding: clamp(16px, 2vw, 24px);
    background:linear-gradient(rgba(white, 0.4) , var(--ptech-bg-soft));
    border: 1px solid var(--ptech-border);
    border-radius: var(--ptech-radius)
}

.ptech-trending__head {
    position: relative
}

.ptech-trending__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ptech-accent)
}

.ptech-trending__title {
    margin: 0;
    font-family: var(--ptech-font-heading);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ptech-ink)
}

/* A tapered brush stroke rather than a bar: masked so it still takes the accent
   gradient, with the shape carried by the path instead of a border-radius. */
.ptech-trending__rule {
    display: block;
    width: 104px;
    height: 11px;
    margin-top: 5px;
    background: var(--ptech-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 11'%3E%3Cpath d='M1 7.4C22 3.1 62 .6 103 2.2c-9 2.1-19 2.6-30 3.1C48 6.4 22 8 1 10.4Z' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 11'%3E%3Cpath d='M1 7.4C22 3.1 62 .6 103 2.2c-9 2.1-19 2.6-30 3.1C48 6.4 22 8 1 10.4Z' fill='%23000'/%3E%3C/svg%3E") left center/contain no-repeat
}

/* ── Track ── */
.ptech-trending__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the card shadow, which a plain overflow box would clip. */
    padding: 6px 2px;
    margin: -6px -2px;
    scrollbar-width: none
}

.ptech-trending__track::-webkit-scrollbar {
    display: none
}

.ptech-trending__track:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 85, 93, .18);
    border-radius: var(--ptech-radius-sm)
}

/* ── Card ── */
.ptech-trend {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
    width: clamp(240px, 24vw, 300px);
    scroll-snap-align: start;
    padding: 10px;
    background: #ffffff65;
    border: 1px solid var(--ptech-border);
    border-radius: var(--ptech-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .3s var(--ptech-ease), box-shadow .3s var(--ptech-ease)
}

.ptech-trend:hover {
    transform: translateY(-1px);
}

.ptech-trend__media {
    flex: 0 0 auto;
    width: 84px;
    height: 96px;
    overflow: hidden;
    border-radius: var(--ptech-radius-sm);
    background: var(--ptech-bg-soft)
}

.ptech-trend__media img,
.ptech-trend__noimg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ptech-trend__body {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.ptech-trend__title {
    font-family: var(--ptech-font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ptech-ink);
    /* Two lines, then ellipsis — cards must stay the same height in a row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ptech-trend__text {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ptech-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* ── Arrows ── */
/* The arrows sit on the track's edges, so the track needs a positioned box of
   its own. min-width:0 stops a grid item from being forced wider than its
   column by the row of cards inside it. */
.ptech-trending__viewport {
    position: relative;
    min-width: 0
}

.ptech-trending__btn--prev,
.ptech-trending__btn--next {
    position: absolute;
    z-index: 2;
    top: 50%;
    translate: 0 -50%
}

.ptech-trending__btn--prev {
    left: -19px
}

.ptech-trending__btn--next {
    right: -19px
}

.ptech-trending__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ptech-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ptech-primary);
    cursor: pointer;
    transition: background .3s var(--ptech-ease), color .3s var(--ptech-ease)
}

.ptech-trending__btn:hover:not(:disabled) {
    background: var(--ptech-primary);
    color: #fff
}

/* Disabled rather than hidden at the ends of the track, so the control does not
   jump out of the layout mid-scroll. */
.ptech-trending__btn:disabled {
    opacity: .4;
    cursor: default
}

/* Below 992px the two columns stack: heading on one row, track beneath. The
   arrows pull inside the track — hanging off the edges they would sit outside
   the panel once there is no column beside them to overlap. */
@media (max-width:991.98px) {
    .ptech-trending__inner {
        grid-template-columns: 1fr;
        row-gap: 14px
    }

    .ptech-trending__btn--prev {
        left: -6px
    }

    .ptech-trending__btn--next {
        right: -6px
    }
}

/* ---------------------------------------------------------------------------
   Trending strip — card fixes

   The strip used to break out of the container and span the viewport. It now
   keeps the shared .ptech-container width instead: running wider than the post
   grid directly beneath it left two competing left edges a few pixels apart,
   which reads as a mistake rather than as a full-bleed band.
   --------------------------------------------------------------------------- */
.ptech-trending__inner {
    /* Two columns now: heading + arrows on the left, track on the right. The
       third column existed only to hold the arrows. */
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    padding: clamp(14px, 1.5vw, 20px);
    border-radius: var(--ptech-radius);

    /* The panel was on --ptech-bg-soft, which is also the page colour, so only
       a hairline border said it was there at all.

       #f3f0e6 sits just under the page's #f5f2ea — close enough to stay part
       of the same cream, far enough that the edge is read rather than hunted
       for, and it keeps the white cards on top as the brightest thing in the
       band. */
    /* background: #f3f0e6; */
    border-color: #e9e4d5;
}

/* ---------------------------------------------------------------------------
   Trending strip — heading block

   Label, heading, brush rule, one line of copy, then the arrows. The leaf sits
   behind all of it, rooted to the left edge of the panel.
   --------------------------------------------------------------------------- */

/* The file is a solid silhouette rather than line art, so it is masked and
   painted in the theme gold.

   Small, and rooted to the panel edge rather than bled through it. Hanging it
   halfway off the side left a cropped fragment that read as a stray mark; sat
   whole with the stem meeting the border it reads as a sprig growing in from
   the edge. The negative left offset is exactly the panel's own padding, so
   the stem lands on the border however that padding scales.

   The tilt is clockwise, not anti-clockwise. Rotating about the stem end, a
   negative angle swings the top of the box out past the border — at 132px tall
   and -16deg that is some 36px of leaf hanging outside the panel. Turning the
   other way sweeps it inward instead, which leaves the bottom-left corner as
   the leftmost point and nothing can cross the edge. */
.ptech-trending__leaf {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: calc(-1 * clamp(14px, 1.5vw, 20px));
    width: 118px;
    height: 118px;
    transform-origin: bottom left;
    rotate: 7deg;
    opacity: .1;
    background: var(--ptech-accent);
    -webkit-mask: var(--tr-leaf) center/contain no-repeat;
    mask: var(--tr-leaf) center/contain no-repeat;
    pointer-events: none
}

/* Below 992px the column stops being a column — the head goes full width and
   there is no left edge for the stem to sit against. */
@media (max-width:991.98px) {
    .ptech-trending__leaf {
        display: none
    }
}

/* Everything real sits above the leaf. */
.ptech-trending__head > *:not(.ptech-trending__leaf) {
    position: relative;
    z-index: 1
}

/* No max-width: the column is already the measure, and capping it on top of
   that broke the last line onto a word of its own. */
.ptech-trending__sub {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ptech-muted, #6b736e)
}

/* The column carries the section now, so the heading is sized to lead it. */
.ptech-trending__title {
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: -.01em
}

/* Discs lifted off the panel instead of outlined against it — against the soft
   band a border alone left them looking like empty holes. The shadow needs a
   tight dark edge as well as the soft spread, or on a cream background the
   white disc has nothing to separate it and reads as flat grey. */
.ptech-trending__btn {
    width: 42px;
    height: 42px;
    border-color: transparent;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(20, 32, 27, .10),
        0 4px 14px rgba(20, 32, 27, .10);
    transition: background .3s var(--ptech-ease), color .3s var(--ptech-ease), box-shadow .3s var(--ptech-ease), translate .3s var(--ptech-ease)
}

.ptech-trending__btn:hover:not(:disabled) {
    background: var(--ptech-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(20, 32, 27, .18)
}

/* ── Card ──
   Width is divided out of the track rather than set in pixels. A fixed width
   only ever fits a whole number of cards at one viewport size; everywhere else
   the last one is sliced by the edge, which reads as broken rather than as
   "there is more". Deriving it from the track means exactly --tr-cards fit,
   whatever the width, and the arrows still move one card per click because the
   script measures the card it finds. */
.ptech-trending__track {
    --tr-cards: 3
}

.ptech-trend {
    width: calc((100% - (var(--tr-cards) - 1) * 14px) / var(--tr-cards));
    gap: 14px;
    padding: 12px
}

/* The thumbnail sets the card height, and the card sets the strip's. */
.ptech-trend__media {
    width: 84px;
    height: 88px
}

.ptech-trend__title {
    font-size: 15.5px;
    -webkit-line-clamp: 2
}

.ptech-trend__text {
    margin-top: 6px;
    -webkit-line-clamp: 2
}

.ptech-trend__body {
    justify-content: flex-start
}

@media (max-width:1199.98px) {
    .ptech-trending__track {
        --tr-cards: 2
    }
}

/* One card, but at 86vw rather than the full width — the sliver of the next
   card is what says the row scrolls. */
@media (max-width:575.98px) {
    .ptech-trend {
        width: 86vw
    }
}