/* ============================================================
   SINGLE TREND - trend-single.css

   Plum hero with the featured image overlapping its lower edge,
   a readable article column with a sticky share rail, and three
   related cards. Brand tokens come from trends.css, which is
   enqueued alongside this file and scopes them to .single-trend.
   ============================================================ */

.single-trend {
    /* How far the featured image hangs below the hero's lower edge, and the
       hero's own bottom padding. The overhang equals
       (figure margin-bottom) - (hero padding-bottom), so both live here and
       the hero and article can each read them. */
    --tr-hero-pad-b: clamp(2.5rem, 5vw, 4rem);
    --tr-overlap:    clamp(56px, 8vw, 110px);
}

/* -- Reading progress ---------------------------------------------- */
.trend-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 200;
    pointer-events: none;
    background: transparent;
}
.trend-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tr-gradient-alt);
    transition: width .12s linear;
}

/* -- Hero ---------------------------------------------------------- */
.trend-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(84px, 11vw, 128px);
    padding-bottom: var(--tr-hero-pad-b);
    background: linear-gradient(135deg, var(--tr-dark) 0%, var(--tr-dark-2) 100%);
    color: #fff;
}
.trend-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.trend-hero__orb {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3;
}
.trend-hero__orb--1 {
    width: 560px; height: 560px; top: -220px; right: -120px;
    background: var(--tr-accent, var(--tr-magenta));
}
.trend-hero__orb--2 {
    width: 460px; height: 460px; bottom: -160px; left: -120px;
    background: var(--tr-violet);
}
.trend-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.trend-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

/* Breadcrumb */
.trend-hero__crumbs {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .8rem; color: var(--tr-on-dark-mute);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.trend-hero__crumbs a { color: inherit; text-decoration: none; transition: color .2s ease; }
.trend-hero__crumbs a:hover,
.trend-hero__crumbs a:focus-visible { color: #fff; }

/* Category + read time */
.trend-hero__top {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.trend-hero__cat {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    padding: .32rem .8rem; border-radius: 999px;
    color: #fff;
    background: var(--tr-accent, var(--tr-magenta));
}
.trend-hero__read {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: var(--tr-on-dark);
}

.trend-hero__title {
    font-size: clamp(1.75rem, 4.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.trend-hero__standfirst {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: var(--tr-on-dark);
    max-width: 62ch;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    text-wrap: pretty;
}

/* Byline */
.trend-hero__byline {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    font-size: .85rem; color: var(--tr-on-dark);
}
.trend-hero__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 800; color: #fff;
    background: var(--tr-gradient-alt);
    box-shadow: 0 6px 16px -6px rgba(198,32,82,.9);
}
.trend-hero__author a { color: #fff; font-weight: 600; text-decoration: none; }
.trend-hero__author a:hover { text-decoration: underline; }
.trend-hero__dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .5;
}

/* Featured media, pulled up over the band's lower edge */
.trend-hero__media {
    position: relative;
    z-index: 1;
    margin: clamp(2.25rem, 5vw, 3.5rem) auto calc((var(--tr-hero-pad-b) + var(--tr-overlap)) * -1);
    max-width: 1000px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 40px 90px -40px rgba(8, 0, 24, .85);
    background: #fff;
    line-height: 0;
}
.trend-hero__media img,
.trend-hero__media .trend-ph {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* -- Article ------------------------------------------------------- */
.trend-article {
    position: relative;
    /* Clears the overhanging media above, plus breathing room. */
    padding-top: calc(var(--tr-overlap) + clamp(1.75rem, 3.5vw, 3rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
    background: var(--color-bg-white, #fff);
}
.trend-article__layout {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    /* Narrower than .container, and centred explicitly rather than relying on
       this file winning the max-width cascade against it. */
    max-width: 920px;
    margin-inline: auto;
}

/* Share rail */
.trend-share {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}
.trend-share__label {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tr-muted);
    margin-bottom: .2rem;
}
.trend-share__btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--tr-border);
    background: var(--tr-surface);
    color: var(--tr-body);
    cursor: pointer;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.trend-share__btn:hover,
.trend-share__btn:focus-visible {
    color: #fff;
    background: var(--tr-accent, var(--tr-magenta));
    border-color: transparent;
    transform: translateY(-2px);
}
.trend-share__toast {
    font-size: .62rem; font-weight: 600; color: var(--tr-accent, var(--tr-magenta));
    opacity: 0; transition: opacity .2s ease; text-align: center;
}
.trend-share__toast.is-shown { opacity: 1; }

/* -- Article typography -------------------------------------------- */
.trend-content {
    max-width: 68ch;
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    line-height: 1.8;
    color: var(--tr-body);
}
.trend-content > * + * { margin-top: 1.35em; }

.trend-content p { margin: 0; }

.trend-content__lede {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--tr-heading);
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--tr-accent, var(--tr-magenta));
    background: color-mix(in srgb, var(--tr-accent, #C62052) 6%, transparent);
    border-radius: 0 10px 10px 0;
}

.trend-content h2,
.trend-content h3,
.trend-content h4 {
    color: var(--tr-heading);
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.trend-content h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    margin-top: 2.2em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tr-border);
}
.trend-content h3 {
    font-size: clamp(1.12rem, 1.8vw, 1.3rem);
    font-weight: 700;
    margin-top: 1.9em;
}
.trend-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 1.7em;
}
.trend-content h2 + *,
.trend-content h3 + *,
.trend-content h4 + * { margin-top: .7em; }

.trend-content a {
    color: var(--tr-accent, var(--tr-magenta));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity .2s ease;
}
.trend-content a:hover { opacity: .75; }

.trend-content strong { color: var(--tr-heading); font-weight: 700; }

.trend-content ul,
.trend-content ol { padding-left: 1.35rem; }
.trend-content li + li { margin-top: .5em; }
.trend-content li::marker { color: var(--tr-accent, var(--tr-magenta)); font-weight: 700; }

.trend-content blockquote {
    margin-inline: 0;
    padding: 1.35rem 1.6rem;
    border-radius: 14px;
    border: 1px solid var(--tr-border);
    border-left: 3px solid var(--tr-accent, var(--tr-magenta));
    background: #FBF8FD;
    font-size: 1.08em;
    line-height: 1.65;
    font-weight: 500;
    color: var(--tr-heading);
}
.trend-content blockquote p { margin: 0; }
.trend-content blockquote p + p { margin-top: .7em; }

.trend-content img,
.trend-content figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--tr-border);
}
.trend-content figure { margin-inline: 0; }
.trend-content figcaption {
    margin-top: .6rem;
    font-size: .82rem;
    color: var(--tr-muted);
    text-align: center;
}

.trend-content hr {
    border: 0;
    height: 1px;
    background: var(--tr-border);
    margin-block: 2.2em;
}

.trend-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    padding: .15em .4em;
    border-radius: 5px;
    background: color-mix(in srgb, var(--tr-accent, #C62052) 9%, transparent);
    color: var(--tr-heading);
}
.trend-content pre {
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: var(--tr-dark);
    color: #EDE6F7;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.65;
}
.trend-content pre code { background: none; padding: 0; color: inherit; }

/* Tables scroll rather than pushing the page sideways. */
.trend-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    display: block;
    overflow-x: auto;
}
.trend-content th,
.trend-content td {
    padding: .7rem .9rem;
    border: 1px solid var(--tr-border);
    text-align: left;
}
.trend-content th {
    background: #FBF8FD;
    color: var(--tr-heading);
    font-weight: 700;
}

.trend-content__source {
    margin-top: 2.5em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tr-border);
    font-size: .85rem;
    color: var(--tr-muted);
}

/* -- Related ------------------------------------------------------- */
.trend-related {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--color-bg, #F8F5FB);
    border-top: 1px solid var(--tr-border);
}
.trend-related__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.trend-related__heading {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tr-heading);
    margin: 0;
}
.trend-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
/* Related cards reuse .trend-card from trends.css; only the footer author
   differs here (no avatar), so it just needs its own alignment. */
.trend-related .trend-card__author { gap: 0; }

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
    .trend-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    /* Share rail moves under the article and goes horizontal. */
    .trend-article__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .trend-content { max-width: none; order: 1; }
    .trend-share {
        order: 2;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: .5rem;
        padding-top: 1.5rem;
        margin-top: .5rem;
        border-top: 1px solid var(--tr-border);
    }
    .trend-share__label { margin: 0 .35rem 0 0; }
}

@media (max-width: 640px) {
    .trend-related__grid { grid-template-columns: minmax(0, 1fr); }
    .trend-hero__media { border-radius: 16px; }
    .trend-content blockquote { padding: 1.1rem 1.2rem; }
    .trend-content h2 { margin-top: 1.9em; }
}

@media (max-width: 480px) {
    .trend-hero__byline { font-size: .8rem; gap: .55rem; }
    .trend-hero__avatar { width: 34px; height: 34px; font-size: .72rem; }
    .trend-content__lede { padding: .9rem 1rem; }
}

/* -- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .trend-progress__bar,
    .trend-share__btn,
    .trend-share__toast { transition: none; }
    .trend-share__btn:hover,
    .trend-share__btn:focus-visible { transform: none; }
}