/**
 * Writers archive (page-writers.php) + single writer page (author.php).
 * Enqueued conditionally in functions.php (gratefulweb_assets()) so it only
 * loads on those two templates.
 */

/* =========================================================================
 * WRITERS ARCHIVE (page-writers.php)
 * ====================================================================== */

.writers-sort-wrapper select.writers-sort-select {
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}
.gw-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #d44f49;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}
.gw-avatar-placeholder-responsive {
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: clamp(24px, 8vw, 48px);
}
.writer-location {
    margin: 0 0 6px;
    font-size: 14px;
    color: #787c82;
}
.writer-desc-text {
    margin: 0;
}

/* =========================================================================
 * SINGLE WRITER PAGE (author.php)
 * ====================================================================== */

/* Infinite-scroll sentinel — replaces the old numbered pagination strip
   (which listed every page in one un-wrapped row and overflowed the
   viewport on both sides once a writer had more than a handful of pages).
   Sits below the grid at all times; author.php's IntersectionObserver
   watches it and loads the next page whenever it scrolls into view. Hidden
   entirely via inline style once there's nothing left to load. */
.articles-infinite-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 0;
    color: #787c82;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.articles-infinite-sentinel.is-loading { opacity: 1; }
.articles-infinite-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #d44f49;
    border-radius: 50%;
    animation: gw-articles-spin 0.7s linear infinite;
}
@keyframes gw-articles-spin { to { transform: rotate(360deg); } }

/* Article/gallery card date — moved above the image, left-aligned (was a
   right-hand sibling of the title below the image). Shared by both the
   articles grid and the photo-galleries grid — same card layout, same
   convention. */
#author-articles-container .artist-card-date,
#author-galleries-container .artist-card-date {
    display: block;
    text-align: left;
    margin-bottom: 6px;
    font-size: 13px;
    color: #787c82;
}

/* Year divider — a full-width break in the `.allcard-wrapper` CSS grid
   (grid-column spans every column) so scrolling through a writer's articles
   or galleries reads as a timeline instead of an undifferentiated grid. */
#author-articles-container .article-year-divider,
#author-galleries-container .article-year-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 4px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
    color: #333;
}
#author-articles-container .article-year-divider:first-child,
#author-galleries-container .article-year-divider:first-child { margin-top: 0; }
#author-articles-container .article-year-divider::before,
#author-articles-container .article-year-divider::after,
#author-galleries-container .article-year-divider::before,
#author-galleries-container .article-year-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ddd;
}

.author_header { align-items: center; gap: 24px; position: relative; z-index: 1; padding-top: 100px;}

.author-avatar {
    border: 0;
}
/* The rainbow ring wrapper (#author-avatar-ring, author.php markup) is a
   fixed 220x220 — it used to be resized by JS to match the bio box's own
   rendered height, but that ran after first paint and shifted the whole
   header down/up as soon as it fired, so it was dropped in favor of just
   always sizing for the larger case. Everything visual (the tie-dye swirl,
   the 5px border gap, the photo/placeholder) lives on .author-avatar-swirl
   below, sized to fill this ring completely. */
.author-avatar-ring {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
}
/* padding:5px here (not on the photo) is the "border" — the photo/
   placeholder below is a normal child sized to 100% of this box's PADDED
   content area, so it naturally sits 5px in from the edge and the
   ::before gradient behind it (which paints under the padding, all the
   way to this element's own edge — default background-clip:border-box)
   shows through as a ring around it. Giving the photo itself a real,
   ordinary width/height instead of position:absolute + inset math is also
   what keeps it sized correctly — the old inset-based approach was
   fighting the <img>'s own width/height="300" attributes. */
.author-avatar-swirl {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;
}
/* The tie-dye layer itself — several randomly-placed, randomly-colored
   radial blobs (positions/colors set as CSS custom properties by
   randomizeAvatarSwirl() below, re-rolled on every page load) plus a
   conic-gradient for hue continuity between them, blurred together and
   slowly rotated + hue-shifted for a subtle "lava lamp" swirl instead of a
   static rainbow ring. Sized well past its own parent (inset: -35%) so the
   rotation never reveals a flat corner; z-index:-1 (not document order)
   is what keeps it behind the photo/placeholder sibling below, since an
   absolutely positioned box otherwise paints above normal-flow content
   regardless of source order. */
.author-avatar-swirl::before {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -1;
    background:
        radial-gradient(circle at var(--gw-b1x, 30%) var(--gw-b1y, 30%), var(--gw-c1, #ff3b30), transparent 55%),
        radial-gradient(circle at var(--gw-b2x, 70%) var(--gw-b2y, 20%), var(--gw-c2, #ffcc00), transparent 55%),
        radial-gradient(circle at var(--gw-b3x, 20%) var(--gw-b3y, 75%), var(--gw-c3, #34c759), transparent 55%),
        radial-gradient(circle at var(--gw-b4x, 80%) var(--gw-b4y, 80%), var(--gw-c4, #007aff), transparent 55%),
        radial-gradient(circle at var(--gw-b5x, 50%) var(--gw-b5y, 50%), var(--gw-c5, #af52de), transparent 60%),
        conic-gradient(from var(--gw-angle, 0deg), #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff3b30);
    filter: blur(7px) saturate(1.5);
    animation: gw-avatar-swirl-spin var(--gw-spin-duration, 26s) linear infinite, gw-avatar-swirl-hue var(--gw-hue-duration, 17s) ease-in-out infinite;
}
@keyframes gw-avatar-swirl-spin { to { transform: rotate(360deg); } }
@keyframes gw-avatar-swirl-hue {
    0%, 100% { filter: blur(7px) saturate(1.5) hue-rotate(0deg); }
    50%      { filter: blur(7px) saturate(1.7) hue-rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
    .author-avatar-swirl::before { animation: none; }
}
.author-avatar-swirl .author-avatar,
.author-avatar-swirl .gw-avatar-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .4) ;
}

.gw-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1; /* keeps the initials glyph itself centered inside the flex box, not just its (taller-than-the-text) line box */
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 40px; /* the placeholder's box is fluid (sized by the ring around it), so this is a fixed reasonable initials size rather than one measured against it */
}
.gw-avatar-placeholder span {
    position: relative;
    top: 40%;
}

.writer-location { margin: 4px 0; font-size: 14px; color: #787c82; }
.writer-joined-label { margin: 0 0 6px; font-size: 13px; color: #787c82; font-style: italic; }
/* Pinned to the bio box's own top-right corner (.author_header_content is
   position:relative below) rather than flowing at the end of the bio text,
   so it stays put regardless of the Read More/Read Less state. */
.writer-social-links { position: absolute; top: 20px; right: 24px; margin: 0; }
.writer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    border-radius: 50%;
    background: #d44f49;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}
.writer-social-links a:hover { background: #333; }
.writer-social-links a .gw-social-icon { width: 15px; height: 15px; display: block; }
/* Reserves room under the corner social icons on just the name line — the
   rest of the bio box's content isn't indented for it. */
.author-name { padding-right: 100px; }

/* Profile header bio box — capped at 600px wide, clipped down to
   .author-bio-clip's own max-height before a Read More/Read Less toggle.
   position:relative anchors the social icons (.writer-social-links above)
   to this box's own corner instead of the page. */
.author_header_content {
    position: relative;
    max-width: 600px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
}
.author-bio-clip {
    position: relative;
    max-height: 170px;
    overflow: hidden;
}
.author-bio-clip.is-expanded { max-height: none; }
.author-bio-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.author-bio-clip.is-expanded .author-bio-fade { display: none; }
.author-bio-more-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #d44f49;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.author-bio-more-btn:hover { text-decoration: underline; }

/* Background photo behind the profile header + topic clouds — the first
   photo from a writer's latest gallery (gw_get_author_hero_bg_image_url(),
   inc/writers.php), stretched to the full viewport width and cropped by
   this wrapper's overflow:hidden rather than any layout change to the
   header/cloud content sitting on top of it. */
.author-hero-bg-wrapper { position: relative; }
.author-hero-bg-photo {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: auto;
    z-index: -1;
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}

/* Concert-poster look for the "More Topics Covered" strip — a condensed
   display face with real weight range, since the size+weight hierarchy
   below leans on both. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');

.writer-topic-outer { text-align: left; margin-bottom: 20px; background: white; opacity: .8;}
.writer-topic-heading {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 6px;
}
.writer-topic-cloud {
    margin: 0;
    line-height: 1.5;
    font-family: 'Oswald', sans-serif;
}
@media (min-width: 768px) {
    /* Full justification on desktop: each wrapped line (including the
       last) stretches edge-to-edge instead of ending ragged-right. Mobile
       keeps its existing left-aligned flow — narrower lines with only a
       couple of short words would just get oddly wide gaps if stretched. */
    .writer-topic-cloud { text-align: justify; text-align-last: justify; }
}
.writer-topic-cloud .topic-cloud-item {
    display: inline-block;
    color: var(--topic-color, #555);
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
}
.writer-topic-cloud .topic-dot {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: #ccc;
}
.writer-topic-cloud .topic-cloud-item:hover { opacity: 0.7; }
.writer-topic-cloud .topic-cloud-item.active-tag {
    color: #fff;
    background: var(--topic-color, #d44f49);
    padding: 2px 10px;
    border-radius: 4px;
}
.writer-topic-cloud .topic-cloud-all {
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #333;
}

/* Fixed-height clip instead of a JS-measured "show N, then reveal the
   rest" collapse: simpler, and any topics beyond 110px just aren't shown —
   no toggle. Matches the hero cloud's same fixed-height + fade treatment
   below (.writer-hero-cloud). */
.writer-topic-section { position: relative; margin: 0; padding: 10px 25px 0px 25px; background:white; }
.writer-topic-clip {
    max-height: 130px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
}
.writer-topic-clip.is-expanded { max-height: none; }
.writer-topic-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 64px;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f2f2f2);
    pointer-events: none;
}
.writer-topic-clip.is-expanded ~ .writer-topic-fade { display: none; }

.writer-topic-more-btn-div {
    position: relative;
    padding: 15px;
    background: #F2F2F2;
    left: -25px;
    width: calc(100% + 50px);
}

.writer-topic-more-btn {
    display: block;
    padding: 18px;
    margin: 0 auto;
    border: none;
    background: none;
    color: #d44f49;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.writer-topic-more-btn:hover { text-decoration: underline; }

.articles-sort-wrapper select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 14px; min-width: 200px; }

/* Content-type tabs (Articles / Photo Galleries) — deliberately big and
   plain (no underline-only "quiet tabs" look) so switching between article
   and gallery grids reads as an obvious choice, not a secondary control
   next to the sort dropdown. */
.writer-content-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.writer-content-tab {
    padding: 10px 26px;
    border: none;
    border-radius: 8px;
    background: #f2f2f3;
    color: #555;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.writer-content-tab:hover { background: #e6e6e7; }
.writer-content-tab.active { background: #d44f49; color: #fff; }

.writer-hero-cloud-wrapper { width: 100%; position: relative; }
.writer-hero-cloud {
    opacity: .8;
    position: relative;
    width: 100%;
    max-height: 195px;
    overflow: hidden;
    padding: 24px 20px;
    background: #fff;
    text-align: center; /* mobile default — centered, not stretched-to-edges */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
@media (min-width: 768px) {
    /* Full justification: however many topics fit inside the fixed height
       above, text-align-last (plus text-align) stretches every line —
       including the last — edge-to-edge, so it reads as one even
       rectangle instead of a ragged cluster. */
    .writer-hero-cloud { text-align: justify; text-align-last: justify; }
}
.writer-hero-cloud .hero-topic-item {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 600;
    margin: 0 6px 12px;
    transition: transform 0.15s ease-in-out;
}
.writer-hero-cloud .hero-topic-item:hover { text-decoration: underline; transform: scale(1.08) !important; z-index: 2; }
.writer-hero-cloud .hero-topic-item.active-tag { text-decoration: underline; font-weight: 800; }
.writer-hero-cloud noscript .writer-topic-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 16px;
    line-height: 1.8;
}