/**
 * Ghost CMS Overrides for hpsr-blog theme
 * This file contains styles specific to Ghost integration
 * Using RAYO theme variables
 */

/* ==========================================================================
   GLOBAL: Override accent color with Ghost's configured color
   This ensures all accent colors match the one set in Ghost admin
   ========================================================================== */
:root {
    --accent: var(--ghost-accent-color, #6166DC);
    --accent-rgb: var(--ghost-accent-color-rgb, 97, 102, 220);
    /* Override RAYO's additional/green color with Ghost accent */
    --additional: var(--ghost-accent-color, #6166DC);
}

/* Force accent color override for all color schemes */
:root,
[color-scheme=light],
[color-scheme=dark] {
    --additional: var(--ghost-accent-color, #6166DC) !important;
    --additional--light: var(--ghost-accent-color, #6166DC) !important;
    --additional--dark: var(--ghost-accent-color, #6166DC) !important;
}

/* Override mark icon background color */
.mark-icon {
    background-color: var(--ghost-accent-color, var(--accent)) !important;
}

.mxd-hero__mark .mark-icon {
    background-color: var(--ghost-accent-color, var(--accent)) !important;
}

/* ==========================================================================
   NOTE: Main .gh-content styles are defined later in this file (around line 1119)
   Those styles use the correct RAYO theme variables.
   This section contains legacy Ghost card styles with .gh-content prefix
   that will be overridden by the more specific styles later.
   ========================================================================== */

/* Ghost Cards - using RAYO theme variables */
.gh-content .kg-card {
    margin: 3rem 0;
}

/* Image Cards */
.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img {
    border-radius: var(--_radius-m);
}

.gh-content .kg-image-card figcaption,
.gh-content .kg-gallery-card figcaption {
    text-align: center;
    font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
    color: var(--t-muted);
    margin-top: 1.2rem;
}

@media only screen and (min-width: 1600px) {
    .gh-content .kg-image-card figcaption,
    .gh-content .kg-gallery-card figcaption {
        font-size: 1.8rem;
    }
}

/* Wide and Full Width */
.gh-content .kg-width-wide {
    margin-left: -3rem;
    margin-right: -3rem;
}

@media only screen and (min-width: 768px) {
    .gh-content .kg-width-wide {
        margin-left: -6rem;
        margin-right: -6rem;
    }
}

.gh-content .kg-width-full {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Bookmark Card - using theme colors */
.gh-content .kg-bookmark-card {
    background: var(--base-tint);
    border: 1px solid var(--st-muted);
    border-radius: var(--_radius-m);
    overflow: hidden;
}

.gh-content .kg-bookmark-container {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.gh-content .kg-bookmark-content {
    flex: 1;
    padding: 2rem;
}

.gh-content .kg-bookmark-title {
    font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
    color: var(--t-bright);
    margin-bottom: 0.8rem;
}

@media only screen and (min-width: 1200px) {
    .gh-content .kg-bookmark-title {
        font-size: 3rem;
    }
}

.gh-content .kg-bookmark-description {
    font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
    color: var(--t-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media only screen and (min-width: 1600px) {
    .gh-content .kg-bookmark-description {
        font-size: 1.8rem;
    }
}

.gh-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
    font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
    color: var(--t-muted);
}

.gh-content .kg-bookmark-author {
    font-weight: var(--fw-medium);
}

.gh-content .kg-bookmark-publisher {
    color: var(--t-muted);
}

.gh-content .kg-bookmark-author::after {
    content: '•';
    margin: 0 0.8rem;
    color: var(--t-muted);
}

.gh-content .kg-bookmark-icon {
    width: 20px;
    height: 20px;
}

.gh-content .kg-bookmark-thumbnail {
    width: 200px;
    min-width: 200px;
}

.gh-content .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Callout Card - using theme colors and radius */
.gh-content .kg-callout-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--_radius-m);
}

@media only screen and (min-width: 768px) {
    .gh-content .kg-callout-card {
        padding: 2.5rem;
    }
}

.gh-content .kg-callout-card-grey {
    background: var(--base-tint);
}

.gh-content .kg-callout-card-white {
    background: var(--base);
    border: 1px solid var(--st-muted);
}

.gh-content .kg-callout-card-blue {
    background: rgba(52, 152, 219, 0.1);
}

.gh-content .kg-callout-card-green {
    background: rgba(46, 204, 113, 0.1);
}

.gh-content .kg-callout-card-yellow {
    background: rgba(241, 196, 15, 0.1);
}

.gh-content .kg-callout-card-red {
    background: rgba(231, 76, 60, 0.1);
}

.gh-content .kg-callout-card-pink {
    background: rgba(155, 89, 182, 0.1);
}

.gh-content .kg-callout-card-purple {
    background: rgba(142, 68, 173, 0.1);
}

.gh-content .kg-callout-card-accent {
    background: var(--accent);
    color: var(--base);
}

.gh-content .kg-callout-emoji {
    font-size: 2rem;
}

/* Toggle Card - using theme colors */
.gh-content .kg-toggle-card {
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 2rem;
}

.gh-content .kg-toggle-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
    color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
    .gh-content .kg-toggle-heading {
        font-size: 3rem;
    }
}

.gh-content .kg-toggle-card-icon svg {
    width: 1.2em;
    height: 1.2em;
    transition: transform var(--_animspeed-medium) var(--_animbezier);
}

.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon svg {
    transform: rotate(180deg);
}

.gh-content .kg-toggle-content {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--st-muted);
}

/* Button Card - using RAYO btn styles */
.gh-content .kg-button-card {
    display: flex;
    justify-content: center;
}

.gh-content .kg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    border-radius: var(--_radius-s);
    font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
    text-decoration: none;
    transition: all var(--_animspeed-medium) var(--_animbezier);
}

.gh-content .kg-btn-accent {
    background: var(--accent);
    color: var(--base);
}

.no-touch .gh-content .kg-btn-accent:hover {
    opacity: 0.9;
}

/* Product Card */
.gh-content .kg-product-card {
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    overflow: hidden;
}

.gh-content .kg-product-card-image {
    width: 100%;
}

.gh-content .kg-product-card-container {
    padding: 2rem;
}

.gh-content .kg-product-card-title {
    font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
    color: var(--t-bright);
    margin-bottom: 0.8rem;
}

.gh-content .kg-product-card-rating {
    color: #f1c40f;
    margin-bottom: 0.8rem;
}

/* File Card */
.gh-content .kg-file-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 1.5rem;
}

.gh-content .kg-file-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--base);
    border-radius: var(--_radius-s);
}

.gh-content .kg-file-card-contents {
    flex: 1;
}

.gh-content .kg-file-card-title {
    font: normal var(--fw-medium) 1.8rem/1.2 var(--_font-accent);
    color: var(--t-bright);
}

.gh-content .kg-file-card-metadata {
    font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
    color: var(--t-muted);
}

/* Audio Card */
.gh-content .kg-audio-card {
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 1.5rem;
}

/* Video Card */
.gh-content .kg-video-card {
    border-radius: var(--_radius-m);
    overflow: hidden;
}

/* Header Card */
.gh-content .kg-header-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 3rem;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: var(--_radius-m);
}

.gh-content .kg-header-card h2 {
    margin: 0;
}

.gh-content .kg-header-card p {
    margin-top: 1.5rem;
}

/* Gallery */
.gh-content .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.gh-content .kg-gallery-row {
    display: flex;
    gap: 0.5em;
}

.gh-content .kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Code Block */
.gh-content pre {
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 1.25em;
    overflow-x: auto;
}

.gh-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
}

.gh-content :not(pre) > code {
    background: var(--base-tint);
    padding: 0.2em 0.4em;
    border-radius: var(--_radius-s);
}

/* Blockquote */
.gh-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1.5em;
    font-style: italic;
    color: var(--t-muted);
}

/* Lists */
.gh-content ul,
.gh-content ol {
    padding-left: 1.5em;
}

.gh-content li + li {
    margin-top: 0.5em;
}

/* Tables */
.gh-content table {
    width: 100%;
    border-collapse: collapse;
}

.gh-content th,
.gh-content td {
    padding: 0.75em;
    border: 1px solid var(--st-muted);
    text-align: left;
}

.gh-content th {
    background: var(--base-tint);
    font-weight: 600;
}

/* Embed */
.gh-content .kg-embed-card {
    display: flex;
    justify-content: center;
}

.gh-content .kg-embed-card iframe {
    border-radius: var(--_radius-m);
}

/* ==========================================================================
   Ghost Comments
   ========================================================================== */

.mxd-article-comments {
    margin-top: 3rem;
}

.gh-comments {
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 1.5em;
}

/* ==========================================================================
   Ghost Members Portal Buttons
   ========================================================================== */

.gh-portal-triggerbtn-iframe {
    border-radius: var(--_radius-s) !important;
}

/* ==========================================================================
   Archive Headers (Tag, Author)
   ========================================================================== */

.mxd-archive-header {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--st-muted);
}

.mxd-archive-header__content {
    flex: 1;
}

.mxd-archive-header__breadcrumbs {
    display: flex;
    gap: 0.5em;
    font-size: 1.4rem;
    color: var(--t-muted);
    margin-bottom: 0.5em;
}

.mxd-archive-header__breadcrumbs span:not(:last-child)::after {
    content: '/';
    margin-left: 0.5em;
}

.mxd-archive-header__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.mxd-archive-header__breadcrumbs a:hover {
    color: var(--accent);
}

.mxd-archive-header__title {
    font-size: 4.4rem;
    margin-bottom: 0.25em;
}

.mxd-archive-header__description {
    color: var(--t-muted);
}

.mxd-archive-header__image {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
}

.mxd-archive-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Author Header
   ========================================================================== */

.mxd-author-header {
    padding: 3rem 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--st-muted);
}

.mxd-author-header__content {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.mxd-author-header__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.mxd-author-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mxd-author-header__info {
    flex: 1;
}

.mxd-author-header__breadcrumbs {
    display: flex;
    gap: 0.5em;
    font-size: 1.4rem;
    color: var(--t-muted);
    margin-bottom: 0.5em;
}

.mxd-author-header__breadcrumbs span:not(:last-child)::after {
    content: '/';
    margin-left: 0.5em;
}

.mxd-author-header__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.mxd-author-header__breadcrumbs a:hover {
    color: var(--accent);
}

.mxd-author-header__name {
    font-size: 4.4rem;
    margin-bottom: 0.25em;
}

.mxd-author-header__location {
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin-bottom: 0.5em;
}

.mxd-author-header__bio {
    margin-bottom: 1em;
}

.mxd-author-header__socials {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.mxd-author-header__cover {
    margin-top: 3rem;
    border-radius: var(--_radius-m);
    overflow: hidden;
}

.mxd-author-header__cover img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Error Page
   ========================================================================== */

.mxd-error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mxd-error-page__code h1 {
    font-size: 8rem;
    line-height: 1;
    margin-bottom: 0.25em;
    background: linear-gradient(135deg, var(--accent) 0%, var(--t-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mxd-error-page__message {
    margin-bottom: 2em;
}

.mxd-error-page__details {
    margin-top: 3em;
    text-align: left;
    background: var(--base-tint);
    padding: 1.5em;
    border-radius: var(--_radius-m);
    max-width: 600px;
}

.mxd-error-page__stack {
    list-style: none;
    padding: 0;
    margin: 1em 0 0;
}

.mxd-error-page__stack-item {
    padding: 1em 0;
    border-bottom: 1px solid var(--st-muted);
}

.mxd-error-page__stack-item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.mxd-pagination {
    padding: 3rem 0;
}

.mxd-pagination__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.mxd-pagination__info {
    font-size: 1.6rem;
    color: var(--t-muted);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .mxd-archive-header {
        flex-direction: column;
        text-align: center;
    }

    .mxd-archive-header__image {
        width: 150px;
        height: 150px;
    }

    .mxd-author-header__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mxd-author-header__avatar {
        width: 100px;
        height: 100px;
    }

    .mxd-author-header__socials {
        justify-content: center;
    }

    .mxd-error-page__code h1 {
        font-size: 5rem;
    }

    .gh-content .kg-bookmark-container {
        flex-direction: column;
    }

    .gh-content .kg-bookmark-thumbnail {
        width: 100%;
        min-width: auto;
        height: 200px;
    }
}

/* ==========================================================================
   Menu Animation Fix
   Force opacity 1 on menu items after GSAP animation completes
   ========================================================================== */

.mxd-menu__wrapper[style*="display: flex"] .main-menu__item.menu-fade-in,
.mxd-menu__wrapper[style*="display: flex"] .menu-fade-in {
    opacity: 1 !important;
}

/* ==========================================================================
   Menu Navigation Styling
   Custom styles for the fullscreen menu (matching RAYO original)
   ========================================================================== */

/* Menu inner - flex column to push footer to bottom */
.mxd-menu__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Left section grows to push footer down */
.mxd-menu__left {
    flex: 1;
}

/* Brand/Logo section at top */
.mxd-menu__brand {
    margin-bottom: 4.4rem;
}

.mxd-menu__logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mxd-menu__logo-link:hover {
    opacity: 0.7;
}

.mxd-menu__logo-img {
    max-height: 36px;
    width: auto;
}

.mxd-menu__logo-text {
    font-weight: var(--fw-regular-opp);
    color: var(--t-opp-medium);
}

/* Footer section at bottom - matching original mxd-menu__data styles */
.mxd-menu__footer {
    position: relative;
    z-index: 99999999999999 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0 3rem 2.6rem 3rem;
    margin-top: auto;
    border-top: none;
}

.mxd-menu__description {
    font-weight: var(--fw-regular-opp);
    color: var(--t-opp-medium);
    margin-bottom: 0;
    max-width: 380px;
}

.mxd-menu__credits {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mxd-menu__copyright {
    color: var(--t-opp-medium);
    margin: 0;
}

.mxd-menu__domain-line {
    margin: 0;
}

.mxd-menu__domain {
    color: var(--t-opp-medium);
    text-decoration: none;
    background: linear-gradient(to right, var(--t-opp-muted), var(--t-opp-muted)),
                linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0));
    background-size: 100% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s, color 0.3s;
}

.mxd-menu__domain:hover {
    background-size: 0 1px, 100% 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mxd-menu__footer {
        padding: 0 1.5rem 2rem 1.5rem;
    }

    .mxd-menu__description {
        max-width: 100%;
    }
}

/* ==========================================================================
   Ghost Design Settings - Cover Image
   ========================================================================== */

.mxd-section-inner-headline.has-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mxd-section-inner-headline.has-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--base-rgb), 0.7) 0%,
        rgba(var(--base-rgb), 0.9) 100%
    );
    z-index: 0;
}

.mxd-section-inner-headline.has-cover > * {
    position: relative;
    z-index: 1;
}

/* Light mode cover overlay */
[data-theme="light"] .mxd-section-inner-headline.has-cover::before,
.light-mode .mxd-section-inner-headline.has-cover::before {
    background: linear-gradient(
        to bottom,
        rgba(250, 247, 246, 0.7) 0%,
        rgba(250, 247, 246, 0.9) 100%
    );
}

/* Tags page: Remove top padding from headline section */
.tag-template .mxd-section-inner-headline {
    padding-top: 0 !important;
}

/* ==========================================================================
   Hero 09 - Full viewport height
   ========================================================================== */

.mxd-hero-09__wrap {
    height: 100vh !important;
}

/* Hero Objects - Add top spacing */
.mxd-hero-09__objects {
    padding-top: 12rem;
}

/* Small mobile devices (iPhone 13 and similar ~390px) */
@media only screen and (max-width: 430px) {
    .mxd-hero-09__wrap {
        height: 100% !important;
        padding-top: 2.6rem;
    }

    .mxd-section.padding-hero-06,
    .mxd-section.padding-hero-09 {
        padding-top: 5rem;
    }

    .mxd-hero-09__objects {
        padding-top: 3rem;
    }

    .hero-09-objects__image {
        margin: 0 auto;
    }

    .mxd-hero-06__btn-mobile {
        display: none;
    }

    body.author-template .mxd-page-content {
        margin-bottom: 3rem;
    }
}

@media only screen and (min-width: 768px) {
    .mxd-hero-09__objects {
        padding-top: 16rem;
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-hero-09__objects {
        padding-top: 20rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-hero-09__objects {
        padding-top: 22rem;
    }
}

/* ==========================================================================
   Hero 09 - Portfolio Style Adjustments
   ========================================================================== */

/* Title - SVG-like full width effect */
.hero-09-headline__title {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.hero-09-headline__title h1 {
    font-size: clamp(4rem, 13vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    white-space: nowrap;
    margin: 0;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .hero-09-headline__title h1 {
        font-size: clamp(6rem, 14vw, 20rem);
    }
}

@media only screen and (min-width: 1200px) {
    .hero-09-headline__title h1 {
        font-size: clamp(8rem, 13vw, 18rem);
    }
}

@media only screen and (min-width: 1600px) {
    .hero-09-headline__title h1 {
        font-size: 14vw;
    }
}

/* Tag links in hero - just add hover effect, sizes come from main.css */
.hero-09-headline__tags .tag {
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-09-headline__tags .tag:hover {
    background-color: var(--ghost-accent-color, var(--accent));
    border-color: var(--ghost-accent-color, var(--accent));
    color: var(--base);
}

/* ==========================================================================
   Project Item - Dynamic Background Image
   ========================================================================== */

.mxd-project-item__preview {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Footer - Dynamic Text (replaces SVG)
   Same style as hero title - full width viewport effect
   ========================================================================== */

.mxd-footer__fullwidth-text {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.mxd-footer__text-dynamic {
    font-size: clamp(4rem, 13vw, 16rem);
    font-weight: var(--fw-medium);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    color: var(--t-bright);
    white-space: nowrap;
    margin: 0;
    width: 100%;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .mxd-footer__text-dynamic {
        font-size: clamp(6rem, 14vw, 20rem);
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-footer__text-dynamic {
        font-size: clamp(8rem, 13vw, 18rem);
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-footer__text-dynamic {
        font-size: 14vw;
    }
}

/* ==========================================================================
   Post Header Styles (Project-details style)
   Using RAYO theme variables and values
   ========================================================================== */

/*
   Post header section - reduced padding for mobile
*/
.mxd-section-project-headline {
    padding-top: 4rem;
    padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .mxd-section-project-headline {
        padding-top: 12rem;
    }
}

@media only screen and (min-width: 1200px) {
    .mxd-section-project-headline {
        padding-top: 13rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-section-project-headline {
        padding-top: 15rem;
    }
}

/* Back Link - using theme spacing */
.mxd-project-back {
    margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .mxd-project-back {
        margin-bottom: 2.5rem;
    }
}

/*
   Title - reduced sizes for mobile
*/
.project-headline__title {
    font: normal var(--fw-medium) 3.2rem/1.15 var(--_font-accent);
    letter-spacing: -0.04rem;
    color: var(--t-bright);
    margin: 0;
    margin-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .project-headline__title {
        font-size: 5rem;
        margin-bottom: 2.5rem;
    }
}

@media only screen and (min-width: 1200px) {
    .project-headline__title {
        font-size: 6rem;
        margin-bottom: 3rem;
    }
}

@media only screen and (min-width: 1600px) {
    .project-headline__title {
        font-size: 7rem;
        margin-bottom: 3.5rem;
    }
}

/* Post Meta Section - using theme spacing */
.mxd-project-meta {
    padding-bottom: 1.5rem;
}

@media only screen and (min-width: 768px) {
    .mxd-project-meta {
        padding-bottom: 2.5rem;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-project-meta {
        padding-bottom: 3rem;
    }
}

/* Excerpt - using p styles from RAYO: 1.8rem (mobile), 2.2rem (1600px) */
.mxd-project-excerpt p {
    font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
    color: var(--t-medium);
    margin: 0;
}

@media only screen and (min-width: 1600px) {
    .mxd-project-excerpt p {
        font-size: 2.2rem;
    }
}

/* Details section */
.mxd-project-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.project-detail {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Label - using p.t-small: 1.6rem (mobile), 1.8rem (1600px), with t-muted color */
.project-detail__label {
    font: normal var(--fw-regular) 1.6rem/1.2 var(--_font-accent);
    color: var(--t-muted);
}

@media only screen and (min-width: 1600px) {
    .project-detail__label {
        font-size: 1.8rem;
    }
}

/* Value - using p styles: 1.8rem (mobile), 2.2rem (1600px), with t-bright color */
.project-detail__value {
    font: normal var(--fw-medium) 1.8rem/1.4 var(--_font-accent);
    color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
    .project-detail__value {
        font-size: 2.2rem;
    }
}

/* Tags - using theme gap: 1rem (mobile), 1.4rem (1600px) */
.mxd-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

@media only screen and (min-width: 1200px) {
    .mxd-project-tags {
        justify-content: flex-end;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1600px) {
    .mxd-project-tags {
        gap: 1.4rem;
    }
}

/* Feature Image Section */
.mxd-section-project-image {
    padding-top: 0;
    padding-bottom: 0;
}

/* Image container - using theme radius: --_radius-l (3.8rem mobile, 5rem 768px) */
.mxd-project-image {
    width: 100%;
    overflow: hidden;
    border-radius: var(--_radius-l);
}

.mxd-project-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption - using p.t-small values */
.mxd-project-image__caption {
    margin-top: 1.5rem;
    font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
    color: var(--t-muted);
    text-align: center;
}

@media only screen and (min-width: 1600px) {
    .mxd-project-image__caption {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Ghost Content Styles (gh-content)
   Styles for Ghost editor content in articles
   Enhanced for better readability and RAYO integration
   ========================================================================== */

/* Override article content gap from main.min.css */
.mxd-article__content {
    gap: 0.8rem;
}

@media only screen and (min-width: 768px) {
    .mxd-article__content {
        gap: 1rem;
    }
}

/* Base content styling */
.gh-content {
    font: normal var(--fw-regular) 1.8rem/1.7 var(--_font-accent);
    color: var(--t-medium);
    max-width: 100%;
}

@media only screen and (min-width: 1600px) {
    .gh-content {
        font-size: 2rem;
    }
}

.gh-content > * + * {
    margin-top: 1rem;
}

@media only screen and (min-width: 768px) {
    .gh-content > * + * {
        margin-top: 1.2rem;
    }
}

/*
   Headings - Large, bold sizes for visual impact
   Using Ghost accent color for consistency
*/
.gh-content h1 {
    font: normal var(--fw-bold) 3.2rem/1.1 var(--_font-accent);
    letter-spacing: -0.03rem;
    color: var(--t-bright);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
    .gh-content h1 {
        font-size: 4rem;
        margin-top: 3rem;
    }
}

@media only screen and (min-width: 1200px) {
    .gh-content h1 {
        font-size: 4.8rem;
    }
}

.gh-content h2 {
    font: normal var(--fw-bold) 2.8rem/1.15 var(--_font-accent);
    letter-spacing: -0.02rem;
    color: var(--t-bright);
    margin-top: 2.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ghost-accent-color, var(--accent));
}

@media only screen and (min-width: 768px) {
    .gh-content h2 {
        font-size: 3.4rem;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (min-width: 1200px) {
    .gh-content h2 {
        font-size: 3.8rem;
    }
}

.gh-content h3 {
    font: normal var(--fw-bold) 2.2rem/1.2 var(--_font-accent);
    color: var(--t-bright);
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 1rem;
}

.gh-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 3px;
    background: var(--ghost-accent-color, var(--accent));
    border-radius: 2px;
}

@media only screen and (min-width: 768px) {
    .gh-content h3 {
        font-size: 2.6rem;
        margin-top: 2.5rem;
        margin-bottom: 0.8rem;
    }
}

@media only screen and (min-width: 1200px) {
    .gh-content h3 {
        font-size: 2.8rem;
    }
}

.gh-content h4 {
    font: normal var(--fw-semibold) 1.9rem/1.25 var(--_font-accent);
    color: var(--ghost-accent-color, var(--accent));
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
    .gh-content h4 {
        font-size: 2.2rem;
        margin-top: 2rem;
    }
}

@media only screen and (min-width: 1200px) {
    .gh-content h4 {
        font-size: 2.4rem;
    }
}

.gh-content h5 {
    font: normal var(--fw-semibold) 1.6rem/1.3 var(--_font-accent);
    color: var(--t-bright);
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media only screen and (min-width: 768px) {
    .gh-content h5 {
        font-size: 1.8rem;
    }
}

@media only screen and (min-width: 1200px) {
    .gh-content h5 {
        font-size: 2rem;
    }
}

.gh-content h6 {
    font: normal var(--fw-medium) 1.4rem/1.4 var(--_font-accent);
    color: var(--ghost-accent-color, var(--accent));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1.2rem;
    margin-bottom: 0.3rem;
}

@media only screen and (min-width: 768px) {
    .gh-content h6 {
        font-size: 1.5rem;
    }
}

/* Paragraphs */
.gh-content p {
    margin-bottom: 1rem;
}

/* Links - using Ghost accent color with fallback */
.gh-content a:not(.btn):not(.kg-btn) {
    color: var(--ghost-accent-color, var(--accent));
    text-decoration: none;
    background: linear-gradient(to right, var(--ghost-accent-color, var(--accent)), var(--ghost-accent-color, var(--accent))) no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: background-size var(--_animspeed-medium) var(--_animbezier), color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .gh-content a:not(.btn):not(.kg-btn):hover {
    color: var(--t-bright);
    background-size: 0 1px;
}

/* Lists - enhanced styling */
.gh-content ul,
.gh-content ol {
    padding-left: 0;
    margin: 1rem 0;
    list-style: none;
}

.gh-content ul li,
.gh-content ol li {
    position: relative;
    font: normal var(--fw-regular) 1.8rem/1.7 var(--_font-accent);
    color: var(--t-medium);
    margin-bottom: 0.5rem;
    padding-left: 2.4rem;
}

@media only screen and (min-width: 1600px) {
    .gh-content ul li,
    .gh-content ol li {
        font-size: 2rem;
    }
}

/* Unordered list bullets */
.gh-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9em;
    width: 6px;
    height: 6px;
    background: var(--ghost-accent-color, var(--accent));
    border-radius: 50%;
}

/* Ordered list numbers */
.gh-content ol {
    counter-reset: list-counter;
}

.gh-content ol li {
    counter-increment: list-counter;
}

.gh-content ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    font-weight: var(--fw-medium);
    color: var(--ghost-accent-color, var(--accent));
}

/* Nested lists */
.gh-content li > ul,
.gh-content li > ol {
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.gh-content li > ul li::before {
    width: 4px;
    height: 4px;
    background: var(--t-muted);
}

/* Blockquotes - elegant styling */
.gh-content blockquote {
    position: relative;
    padding: 1.2rem 0 1.2rem 1.5rem;
    margin: 1.2rem 0;
    border-left: 3px solid var(--ghost-accent-color, var(--accent));
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 0%, transparent 100%);
    border-radius: 0 var(--_radius-m) var(--_radius-m) 0;
}

.gh-content blockquote p {
    font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
    font-style: italic;
    color: var(--t-bright);
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .gh-content blockquote {
        padding: 1.5rem 0 1.5rem 2rem;
    }

    .gh-content blockquote p {
        font-size: 1.9rem;
    }
}

/* Quote attribution */
.gh-content blockquote cite,
.gh-content blockquote footer {
    display: block;
    margin-top: 1.5rem;
    font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
    font-style: normal;
    color: var(--t-muted);
}

.gh-content blockquote cite::before,
.gh-content blockquote footer::before {
    content: '— ';
}

/* Images - using theme radius */
.gh-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--_radius-m);
}

.gh-content figure {
    margin: 1.2rem 0;
}

.gh-content figcaption {
    margin-top: 1.2rem;
    font: normal var(--fw-regular) 1.4rem/1.4 var(--_font-accent);
    color: var(--t-muted);
    text-align: center;
}

@media only screen and (min-width: 1600px) {
    .gh-content figcaption {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   Code Blocks - Enhanced with Highlight.js Integration
   Dark theme matching RAYO aesthetic
   ========================================================================== */

/* Code wrapper for copy button positioning */
.gh-content .code-wrapper {
    position: relative;
    margin: 1.2rem 0;
}

/* Pre/Code block base styles */
.gh-content pre {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--_radius-m);
    padding: 0;
    margin: 1.2rem 0;
    overflow: hidden;
}

.gh-content pre code {
    display: block;
    padding: 2rem 2.5rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #e6edf3;
    tab-size: 4;
}

@media only screen and (min-width: 768px) {
    .gh-content pre code {
        font-size: 1.5rem;
        padding: 2.5rem 3rem;
    }
}

/* Inline code */
.gh-content :not(pre) > code {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--ghost-accent-color, var(--accent));
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85em;
    font-weight: var(--fw-regular);
}

/* Light mode: Better contrast for inline code and links */
[color-scheme=light] .gh-content :not(pre) > code {
    background: rgba(var(--accent-rgb), 0.2);
    color: #1a1a1a;
}

[color-scheme=light] .gh-content a:not(.btn):not(.kg-btn) {
    background: rgba(var(--accent-rgb), 0.15);
    color: #1a1a1a !important;
    padding: 0.1em 0.3em;
    border-radius: 0;
}

[color-scheme=light] .gh-content a:not(.btn):not(.kg-btn):hover {
    background: rgba(var(--accent-rgb), 0.3);
    color: #000;
}

/* Copy button styling */
.gh-content .copy-button,
.copy-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.6rem 1.2rem;
    font: normal var(--fw-medium) 1.2rem/1 var(--_font-accent);
    background: var(--ghost-accent-color, var(--accent)) !important;
    color: var(--base) !important;
    border: none;
    border-radius: var(--_radius-s);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--_animspeed-medium) var(--_animbezier),
                transform var(--_animspeed-medium) var(--_animbezier);
    transform: translateY(-4px);
}

.gh-content .code-wrapper:hover .copy-button,
.gh-content pre:hover + .copy-button,
.gh-content .copy-button:focus {
    opacity: 1;
    transform: translateY(0);
}

.no-touch .gh-content .copy-button:hover {
    background: var(--t-bright);
}

/* Scrollbar styling for code blocks */
.gh-content pre code::-webkit-scrollbar {
    height: 8px;
}

.gh-content pre code::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.gh-content pre code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.gh-content pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Tables - Enhanced styling
   ========================================================================== */

.gh-content table:not(.gist table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 3rem 0;
    border-radius: var(--_radius-m);
    overflow: hidden;
    border: 1px solid var(--st-muted);
}

.gh-content table:not(.gist table) thead {
    background: rgba(var(--accent-rgb), 0.1);
}

.gh-content table:not(.gist table) th {
    padding: 1.4rem 1.6rem;
    text-align: left;
    font: normal var(--fw-medium) 1.5rem/1.3 var(--_font-accent);
    color: var(--t-bright);
    border-bottom: 2px solid var(--ghost-accent-color, var(--accent));
}

.gh-content table:not(.gist table) td {
    padding: 1.2rem 1.6rem;
    font: normal var(--fw-regular) 1.6rem/1.5 var(--_font-accent);
    color: var(--t-medium);
    border-bottom: 1px solid var(--st-muted);
}

.gh-content table:not(.gist table) tbody tr:last-child td {
    border-bottom: none;
}

.gh-content table:not(.gist table) tbody tr:hover {
    background: rgba(var(--accent-rgb), 0.03);
}

@media only screen and (min-width: 768px) {
    .gh-content table:not(.gist table) th {
        font-size: 1.6rem;
        padding: 1.6rem 2rem;
    }

    .gh-content table:not(.gist table) td {
        font-size: 1.7rem;
        padding: 1.4rem 2rem;
    }
}

/* Table responsive wrapper */
.gh-content .table-wrapper {
    overflow-x: auto;
    margin: 3rem 0;
    border-radius: var(--_radius-m);
}

.gh-content .table-wrapper table {
    margin: 0;
}

/* Horizontal rule - elegant separator */
.gh-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-muted), transparent);
    margin: 1.5rem 0;
}

/* ==========================================================================
   Special Content Enhancements
   ========================================================================== */

/* Strong/Bold text */
.gh-content strong,
.gh-content b {
    font-weight: var(--fw-medium);
    color: var(--t-bright);
}

/* Emphasis/Italic */
.gh-content em,
.gh-content i {
    font-style: italic;
}

/* Mark/Highlight */
.gh-content mark {
    background: rgba(var(--accent-rgb), 0.2);
    color: inherit;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* Abbreviations */
.gh-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Keyboard input */
.gh-content kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    background: var(--base-tint);
    border: 1px solid var(--st-muted);
    border-radius: 4px;
    box-shadow: 0 2px 0 var(--st-muted);
}

/* Definition lists */
.gh-content dl {
    margin: 2rem 0;
}

.gh-content dt {
    font-weight: var(--fw-medium);
    color: var(--t-bright);
    margin-top: 1.5rem;
}

.gh-content dd {
    margin-left: 2rem;
    margin-top: 0.5rem;
    color: var(--t-medium);
}

/* Subscript/Superscript */
.gh-content sub,
.gh-content sup {
    font-size: 0.75em;
}

/* Details/Summary (collapsible) */
.gh-content details {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    border: 1px solid var(--st-muted);
}

.gh-content summary {
    font-weight: var(--fw-medium);
    color: var(--t-bright);
    cursor: pointer;
    padding: 0.5rem 0;
}

.gh-content details[open] summary {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--st-muted);
}

/* First paragraph emphasis (lead) - removed to maintain consistent spacing */

/* ==========================================================================
   Ghost Card Styles (Koenig Editor Cards)
   Using RAYO theme variables
   ========================================================================== */

/* Gallery Card */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 4rem 0;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
}

.kg-gallery-row:not(:first-of-type) {
    margin-top: 1.5rem;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--_radius-m);
}

/* Image Card - Wide */
.kg-width-wide {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: none;
    width: 100vw;
}

@media only screen and (min-width: 1200px) {
    .kg-width-wide {
        margin-left: -10rem;
        margin-right: -10rem;
        width: calc(100% + 20rem);
    }
}

/* Image Card - Full */
.kg-width-full {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: none;
    width: 100vw;
}

.kg-width-full img {
    border-radius: 0;
}

/* Header Card Full Width - Fix overflow */
.kg-header-card.kg-width-full {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--_radius-m);
}

/* Prevent horizontal scroll from full-width cards */
.gh-content,
.mxd-article__content {
    overflow-x: clip;
}

/* Bookmark Card - using theme colors and radius */
.kg-bookmark-card {
    margin: 3rem 0;
}

.kg-bookmark-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--st-muted);
    border-radius: var(--_radius-m);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .kg-bookmark-container:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

@media only screen and (min-width: 768px) {
    .kg-bookmark-container {
        flex-direction: row;
    }
}

.kg-bookmark-content {
    padding: 2rem;
    flex: 1;
    order: 2;
}

@media only screen and (min-width: 768px) {
    .kg-bookmark-content {
        order: 1;
        padding: 2.5rem;
    }
}

/* Title - using h6 size: 2.2rem (mobile), 3rem (1200px) */
.kg-bookmark-title {
    font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
    color: var(--t-bright);
    margin-bottom: 0.8rem;
}

@media only screen and (min-width: 1200px) {
    .kg-bookmark-title {
        font-size: 3rem;
    }
}

/* Description - using p.t-small: 1.6rem (mobile), 1.8rem (1600px) */
.kg-bookmark-description {
    font: normal var(--fw-regular) 1.6rem/1.4 var(--_font-accent);
    color: var(--t-muted);
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media only screen and (min-width: 1600px) {
    .kg-bookmark-description {
        font-size: 1.8rem;
    }
}

/* Metadata - using p.t-xsmall: 1.4rem */
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font: normal var(--fw-regular) 1.4rem/1.2 var(--_font-accent);
    color: var(--t-muted);
}

.kg-bookmark-icon {
    width: 20px;
    height: 20px;
}

.kg-bookmark-thumbnail {
    order: 1;
    min-height: 160px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) {
    .kg-bookmark-thumbnail {
        order: 2;
        flex: 0 0 200px;
    }
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Callout Card - using theme colors and radius */
.kg-callout-card {
    display: flex;
    padding: 2rem;
    border-radius: var(--_radius-m);
    margin: 3rem 0;
}

@media only screen and (min-width: 768px) {
    .kg-callout-card {
        padding: 2.5rem;
    }
}

.kg-callout-card-grey {
    background: var(--base-tint);
}

.kg-callout-card-white {
    background: var(--base);
    border: 1px solid var(--st-muted);
}

.kg-callout-card-blue {
    background: rgba(52, 152, 219, 0.1);
}

.kg-callout-card-green {
    background: rgba(46, 204, 113, 0.1);
}

.kg-callout-card-yellow {
    background: rgba(241, 196, 15, 0.1);
}

.kg-callout-card-red {
    background: rgba(231, 76, 60, 0.1);
}

.kg-callout-card-pink {
    background: rgba(255, 105, 180, 0.1);
}

.kg-callout-card-purple {
    background: rgba(155, 89, 182, 0.1);
}

.kg-callout-emoji {
    font-size: 2rem;
    margin-right: 1.5rem;
}

.kg-callout-text {
    flex: 1;
}

/* Button Card */
.kg-button-card {
    margin: 2rem 0;
    display: flex;
    justify-content: flex-start;
}

.kg-button-card.kg-align-center {
    justify-content: center;
}

.kg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: var(--_radius-s);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: all 0.3s ease;
}

.kg-btn-accent {
    background: var(--ghost-accent-color, var(--additional));
    color: white;
}

.kg-btn-accent:hover {
    opacity: 0.9;
}

/* Toggle Card (Accordion) */
.kg-toggle-card {
    margin: 2rem 0;
    border: 1px solid var(--st-muted);
    border-radius: var(--_radius-m);
}

.kg-toggle-heading {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kg-toggle-heading-text {
    font-weight: var(--fw-medium);
    color: var(--t-bright);
}

.kg-toggle-content {
    padding: 0 1.5rem 1.5rem;
}

/* Video Card */
.kg-video-card {
    margin: 3rem 0;
}

.kg-video-container {
    position: relative;
    border-radius: var(--_radius-m);
    overflow: hidden;
}

/* Audio Card */
.kg-audio-card {
    margin: 2rem 0;
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    padding: 1.5rem;
}

/* File Card */
.kg-file-card {
    margin: 2rem 0;
}

.kg-file-card-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--st-muted);
    border-radius: var(--_radius-m);
    text-decoration: none;
    transition: background 0.3s ease;
}

.kg-file-card-container:hover {
    background: var(--base-tint);
}

.kg-file-card-contents {
    flex: 1;
}

.kg-file-card-title {
    font-weight: var(--fw-medium);
    color: var(--t-bright);
}

.kg-file-card-metadata {
    font-size: 1.6rem;
    color: var(--t-muted);
}

/* Product Card */
.kg-product-card {
    margin: 3rem 0;
    border: 1px solid var(--st-muted);
    border-radius: var(--_radius-m);
    overflow: hidden;
}

.kg-product-card-image {
    width: 100%;
    height: auto;
}

.kg-product-card-container {
    padding: 1.5rem;
}

.kg-product-card-title {
    font-size: 1.25rem;
    font-weight: var(--fw-medium);
    color: var(--t-bright);
    margin-bottom: 0.5rem;
}

.kg-product-card-description {
    color: var(--t-muted);
    margin-bottom: 1rem;
}

/* Header Card */
.kg-header-card {
    margin: 4rem 0;
    padding: 4rem 2rem;
    text-align: center;
    border-radius: var(--_radius-m);
}

.kg-header-card h2 {
    margin: 0 0 1rem;
}

/* Signup Card (Members) */
.kg-signup-card {
    margin: 3rem 0;
    padding: 3rem;
    background: var(--base-tint);
    border-radius: var(--_radius-m);
    text-align: center;
}

/* ==========================================================================
   Blog Preview Card Styles
   ========================================================================== */

.mxd-blog-preview__image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--base-tint);
}

.mxd-preview-hover__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mxd-preview-hover__icon i {
    font-size: 2rem;
}

/* ==========================================================================
   Article Excerpt Styles
   ========================================================================== */

.mxd-article__excerpt {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--t-bright);
}

.mxd-article__thumb-caption {
    margin-top: 1rem;
    font-size: 1.6rem;
    color: var(--t-muted);
    text-align: center;
}

/* ==========================================================================
   Author Avatar Styles
   ========================================================================== */

.author-avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radius-full {
    border-radius: 50%;
}

@media only screen and (min-width: 1200px) {
    .author-avatar {
        width: 120px;
        height: 120px;
    }
}

/* Author Avatar Placeholder (when no profile image) */
.author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--accent);
    color: var(--base);
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    border-radius: 50%;
}

.author-avatar-placeholder::before {
    content: attr(data-initial);
    display: block;
    overflow: hidden;
    width: 1.5em;
    text-align: center;
}

.mxd-article-author__avatar .author-avatar-placeholder {
    width: 60px;
    height: 60px;
}

/* ==========================================================================
   Inner Headline Socials
   ========================================================================== */

.inner-headline__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inner-headline__image img {
    width: 100%;
    height: auto;
}

.inner-headline__controls {
    margin-top: 2rem;
}

/* ==========================================================================
   Error Page Styles
   ========================================================================== */

.error-code {
    font-size: clamp(8rem, 20vw, 20rem);
    line-height: 0.9;
    color: var(--t-muted);
}

.mxd-error-details {
    padding: 2rem;
    background: var(--base-tint);
    border-radius: var(--_radius-m);
}

.mxd-error-details__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.mxd-error-details__item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--st-muted);
}

.mxd-error-details__item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Divider Image Styles
   ========================================================================== */

.mxd-divider__image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Footer Avatar Styles
   ========================================================================== */

.footer-blocks__column .footer-avatar-card {
    flex: 1;
    padding: 0 !important;
    overflow: hidden;
    display: block;
}

.footer-avatar-full {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.footer-avatar-card:hover .footer-avatar-full {
    transform: scale(1.05);
}

/* Fallback for logo instead of cover image */
.footer-avatar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--base-tint);
}

.footer-avatar-logo img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* ==========================================================================
   Force Ghost Accent Color Override
   Ensures all accent-colored elements use Ghost's accent color
   ========================================================================== */

/* Force copy button to use Ghost accent color (overrides any injected styles) */
pre .copy-button,
.hljs-copy-button,
button[class*="copy"],
[class*="copy-button"],
.gh-content .code-wrapper .copy-button,
.code-block .copy-button {
    background: var(--ghost-accent-color, var(--accent)) !important;
    color: var(--base) !important;
    border: none !important;
}

/* Links in content */
.gh-content a,
.mxd-article__content a {
    color: var(--ghost-accent-color, var(--accent)) !important;
}

.gh-content a:hover,
.mxd-article__content a:hover {
    color: var(--t-bright) !important;
}

/* Exclude buttons and specific elements from link color override */
.gh-content a.btn,
.gh-content a.kg-btn,
.gh-content a.tag,
.mxd-article__content a.btn {
    color: inherit !important;
}

/* ==========================================================================
   Author Hero Section
   Uses RAYO hero-06 structure with background image instead of video
   ========================================================================== */

/* Background image layer (replaces video in hero-06) */
.author-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Placeholder background when no image */
.author-hero-bg--placeholder {
    background: linear-gradient(135deg,
        var(--base) 0%,
        var(--base-tint) 50%,
        rgba(var(--accent-rgb), 0.15) 100%);
}

/* Icon inside rotating button */
.btn-rotating .btn-rotating__icon {
    font-size: 2.4rem;
    color: var(--t-bright);
}

/* Author social links in hero list */
.author-social-link {
    color: var(--t-medium);
    text-decoration: none;
    transition: color 0.3s ease;
}

.author-social-link:hover {
    color: var(--ghost-accent-color, var(--accent));
}

/* Fix author page content padding */
body.author-template .mxd-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Page Hero Section
   Uses RAYO hero-06 structure with background image
   ========================================================================== */

/* Background image layer for pages */
.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Placeholder background when no image on pages */
.page-hero-bg--placeholder {
    background: linear-gradient(135deg,
        var(--base) 0%,
        var(--base-tint) 50%,
        rgba(var(--accent-rgb), 0.15) 100%);
}

/* Fix page content padding */
body.page-template .mxd-page-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   TAG PAGE STYLES
   ============================================ */

/* Placeholder for posts without feature images */
.post-featured__thumb-placeholder,
.post-secondary__thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg,
        var(--base-tint) 0%,
        rgba(var(--accent-rgb), 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-secondary__thumb-placeholder {
    min-height: 400px;
}

/* Ensure tag page post images fill properly */
.post-featured__thumb img,
.post-secondary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tag page pagination spacing */
body.tag-template .mxd-pagination {
    margin-top: 2rem;
}

/* ============================================
   HOME PAGE HERO IMAGE
   ============================================ */

/* Rounded corners for hero image */
.hero-09-objects__image img {
    border-radius: var(--_radius-l);
    overflow: hidden;
}

/* Rounded corners for nav logo */
.mxd-logo__image {
    border-radius: var(--_radius-s);
}

/* ============================================
   POST CARDS WITHOUT FEATURE IMAGE
   ============================================ */

/* Background pattern for posts without images */
.mxd-project-item__preview.no-image,
.mxd-blog-preview__image.no-image,
.post-featured__thumb-placeholder,
.post-secondary__thumb-placeholder {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb), 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
        linear-gradient(135deg, var(--base-tint) 0%, var(--base) 100%);
    position: relative;
}

/* Add subtle grid pattern overlay */
.mxd-project-item__preview.no-image::before,
.mxd-blog-preview__image.no-image::before,
.post-featured__thumb-placeholder::before,
.post-secondary__thumb-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    border-radius: inherit;
}

/* Icon placeholder for empty cards */
.mxd-project-item__preview.no-image::after,
.mxd-blog-preview__image.no-image::after,
.post-featured__thumb-placeholder::after,
.post-secondary__thumb-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM156,88a20,20,0,1,1-20,20A20,20,0,0,1,156,88Zm60,112H40V177.65l53.66-53.66a8,8,0,0,1,11.31,0L165.66,184,192,157.66a8,8,0,0,1,11.31,0L216,170.34Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   CTA Promo Section - Background Image Full Cover
   Makes the existing background image cover the entire card
   ========================================================================== */

.mxd-promo__bg {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Mobile: Fix CTA promo image to cover entire card */
@media only screen and (max-width: 1199px) {
    .mxd-promo__inner {
        overflow: hidden;
    }

    .mxd-promo__bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ==========================================================================
   Hero 06 (Author Page) - Mobile Layout Fix
   Matches RAYO original: image as separate card on mobile
   ========================================================================== */

/* Mobile: Reorganize hero content */
@media only screen and (max-width: 1199px) {
    /* Reduce padding-top on hero wrap */
    .mxd-hero-06__wrap.loading-wrap {
        padding-top: 2.9rem !important;
    }

    /* Make content area a flex column */
    .mxd-hero-06__content {
        display: flex !important;
        flex-direction: column !important;
        position: relative;
    }

    /* Video/Image section becomes a card at the bottom */
    .mxd-hero-06__video {
        position: relative !important;
        order: 3;
        width: calc(100% - 3rem) !important;
        height: auto !important;
        min-height: 200px;
        margin: 2rem 1.5rem;
        border-radius: var(--_radius-m);
        overflow: hidden;
        aspect-ratio: 4/3;
    }

    .mxd-hero-06__video .author-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    /* Remove overlay on mobile for cleaner look */
    .mxd-hero-06__video .hero-06-video__cover {
        display: none;
    }

    /* Data section with content */
    .mxd-hero-06__data {
        position: relative !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        overflow: visible;
        padding: 2rem 1.5rem;
        z-index: 2;
    }

    /* Headline section */
    .mxd-hero-06__headline {
        order: 1;
    }

    /* Skills list section */
    .mxd-hero-06__list {
        order: 2;
        margin-top: 2rem;
    }
}

/* Desktop (1200px+): original layout */
@media only screen and (min-width: 1200px) {
    .mxd-hero-06__data {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between;
        align-items: flex-start;
    }
}