/* Universal Hero Section Styling */

.hero-section {
    background: #0f1923;
    color: white;
    padding: 1rem 0 0.5rem 0;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); /* Slight overhang below hero */
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    z-index: 1; /* Ensure it sits above content below */
}

/* Homepage: reserve space for hero image so title/image don't shift on load */
body.homepage .hero-section .hero-map-image {
    display: block !important;
    object-fit: contain;
    flex-shrink: 0;
    object-position: bottom center;
}
@media (min-width: 768px) {
    body.homepage .hero-section .hero-map-image {
        width: auto !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
        min-width: 200px !important;
    }
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Ensure container within hero section uses same max-width */
.hero-section .container {
    max-width: 1200px;
    padding: 0 1rem;
}

.hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-right {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
}

.hero-section h1 {
    font-size: 32px;
    font-weight: 700 !important; /* Ensure bold from start */
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    color: white !important; /* Ensure color from start */
    max-width: 1200px;
    text-transform: uppercase !important; /* Convert Title Case HTML to UPPERCASE for display */
    /* Prevent layout shift - ensure consistent styling from start */
    min-height: 2.5rem;
    /* Prevent font loading shift */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Force consistent rendering */
    contain: layout style;
}

.hero-subtitle {
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0 0;
    max-width: 1200px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    word-wrap: break-word;
}

.hero-author-info {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    white-space: nowrap;
    flex-wrap: nowrap;
    font-weight: 700 !important; /* All text bold - applied immediately via CSS */
    /* Prevent layout shift - ensure consistent styling from start */
    line-height: 1.4;
    min-height: 2rem;
    /* Prevent font loading shift */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Force consistent rendering - prevent layout shift */
    contain: layout style;
    will-change: auto;
}

.hero-author-info * {
    font-weight: 700 !important; /* Make all children bold - applied immediately */
}

/* Exception: UKGC popup should not inherit bold */
.hero-author-info .ukgc-popup,
.hero-author-info .ukgc-popup * {
    font-weight: normal !important;
}

.hero-author-info .ukgc-popup strong,
.hero-author-info .ukgc-popup .ukgc-popup-header {
    font-weight: 700 !important; /* Only labels/headers bold */
}

/* Exception: "See More on UKGC" link should be bold */
.hero-author-info .ukgc-popup .ukgc-link-bottom a {
    font-weight: 700 !important;
}

.hero-author-info .author-name {
    font-weight: 700 !important; /* Override any other weight */
}

.hero-author-info .author-image {
    flex-shrink: 0;
    display: none; /* Hidden by default, shown at 768px+ */
}
/* Remove author image on listed pages – show "Written by: Harry Cox" only (image stays on blog-template) */
body.jackpot-competitions-page .hero-author-info .author-image,
body.daily-free-games-page .hero-author-info .author-image,
.signup-offers-page .hero-author-info .author-image,
.no-deposit-free-spins-page .hero-author-info .author-image,
.no-wagering-free-spins-page .hero-author-info .author-image,
.betting-sites-page .hero-author-info .author-image,
.casino-bonus-page .hero-author-info .author-image,
body.individual-competition-page .hero-author-info .author-image {
    display: none !important;
}

/* Jackpot = EXACT same hero author logic as daily: desktop shows Written by | All Offers Are UKGC Compliant | Last Updated */
@media (min-width: 768px) {
    body.jackpot-competitions-page .hero-author-info .author-expertise,
    body.daily-free-games-page .hero-author-info .author-expertise {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    body.jackpot-competitions-page .hero-author-info .author-row + .author-sep,
    body.daily-free-games-page .hero-author-info .author-row + .author-sep,
    body.jackpot-competitions-page .hero-author-info .author-expertise + .author-sep,
    body.daily-free-games-page .hero-author-info .author-expertise + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
}

.hero-author-info .author-image img {
    border-radius: 50%;
    border: 2px solid #00cc5a;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.hero-author-info .author-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-author-info .author-name {
    font-weight: 700 !important; /* Match parent bold */
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.7) !important; /* Same grey as last-updated */
    /* Prevent layout shift - reserve space */
    min-width: fit-content;
    display: inline-block;
}

.hero-author-info .author-name a {
    color: #00cc5a !important; /* Keep Harry Cox link green */
    text-decoration: none;
}

.hero-author-info .author-name a:hover {
    text-decoration: underline;
}

.hero-author-info .author-expertise {
    opacity: 0.8;
    white-space: nowrap;
}

.hero-author-info .last-updated {
    font-style: italic;
    opacity: 0.7;
    white-space: nowrap;
    /* Prevent layout shift - reserve space */
    min-width: fit-content;
    display: inline-block;
}

.hero-author-info .author-sep {
    margin: 0 0.5rem;
    opacity: 0.6;
    color: #8a8a8a !important; /* Faint grey everywhere – never white */
    font-style: normal !important;
    /* Prevent layout shift - reserve space */
    width: auto;
    min-width: 1ch;
    display: inline-block;
    flex-shrink: 0;
}

/* Up to 1023px: hide | separator to the right of Last Updated (before How We Rate) – hero bar has How We Rate */
@media (max-width: 1023px) {
    .hero-author-info .last-updated + .author-sep,
    .hero-author-info .last-updated + .author-sep:has(+ .how-we-rate-link) {
        display: none !important;
    }
}

/* Below 400px: Ensure "Last" is hidden */
@media (max-width: 399px) {
    .hero-author-info .last-updated .last-text {
        display: none !important;
    }
}

/* Mobile Responsive Hero Section */
@media (max-width: 767px) {
    /* Below 768: no author image, no gap between it and Written by */
    .hero-author-info .author-image {
        display: none !important;
    }
    .hero-author-info .author-row {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .hero-section {
        padding: 1rem 0 !important;
        margin: 0;
        margin: 0 0 0.0rem 0 !important
    }
    
    .hero-content {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: left;
        padding: 0 0.1rem !important;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .hero-section .container {
        padding: 0 1rem !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    
    .hero-left {
        align-items: flex-start !important;
        width: 100%;
    }
    
    /* Blog page - center align hero-left content on mobile */
    body.blog-page:not(.blog-post-page) .hero-left {
        align-items: center !important;
    }
    
    .hero-right {
        flex: none;
        width: 100%;
    }
    
    .hero-section h1 {
        font-size: 20px !important;
        text-align: left;
        text-transform: uppercase !important;
    }
    
    /* Blog page h1 - center on mobile (higher specificity) */
    body.blog-page:not(.blog-post-page) .hero-section h1,
    body.blog-page:not(.blog-post-page) .hero-content .hero-left h1,
    body.blog-page:not(.blog-post-page) .hero-left h1 {
        text-align: center !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
        text-align: left;
        position: relative;
        line-height: 1.4;
    }
    
    /* SERVER-SIDE TRUNCATION: Mobile shows short version by default */
    .hero-subtitle .subtitle-full {
        display: none;
    }
    
    .hero-subtitle .subtitle-short {
        display: inline;
    }
    
    /* Toggle - inline after truncated text */
    .hero-subtitle .read-more-toggle {
        display: inline;
        color: #00cc5a;
        text-decoration: underline;
        cursor: pointer;
        font-weight: 600;
        white-space: nowrap;
        margin-left: 0;
    }
    
    /* Expanded state - swap versions */
    .hero-subtitle.expanded .subtitle-short {
        display: none;
    }
    
    .hero-subtitle.expanded .subtitle-full {
        display: inline;
    }
    
    .hero-subtitle.expanded .read-more-toggle {
        margin-left: 0.25rem;
    }
    
    /* Read More/Read Less toggle button (inline with text) */
    .hero-subtitle .read-more-toggle {
        color: #00cc5a;
        text-decoration: underline;
        cursor: pointer;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .hero-subtitle .read-more-toggle:hover {
        color: #00b350;
        text-decoration: underline;
    }
    
    .hero-author-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0 !important;
        margin-top: 0.5rem;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        font-size: 0.75rem !important; /* 12px on mobile */
    }
    
    .hero-author-info .author-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide author image until 700px */
    .hero-author-info .author-image {
        display: none !important;
    }
    
    .hero-author-info .author-name {
        white-space: nowrap;
    }
    
    .hero-author-info .author-expertise {
        display: none; /* Hide on mobile */
    }
    
    /* Show Last Updated on same line at earliest opportunity */
    .hero-author-info .last-updated {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-style: italic !important;
        opacity: 0.7 !important;
    }
    
    /* Hide "Last " text until 480px */
    .hero-author-info .last-updated .last-text {
        display: none !important;
    }
    
    /* Show separator between Written by and Last Updated */
    .hero-author-info .last-updated::before {
        content: "|" !important;
        margin: 0 0.5rem !important;
        display: inline-block !important;
        font-style: normal !important;
    }
    
    /* Hide all separators since we're using ::before */
    .hero-author-info .author-sep {
        display: none !important;
    }
    
    /* License/How We Rate: Force wrap and left-align below */
    .hero-author-info .ukgc-badge-wrapper,
    .hero-author-info .how-we-rate-link {
        flex-basis: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 0.25rem !important;
    }
    
    /* Individual pages: Same structure as casino signup – Written by | Last Updated on mobile; License hidden. :not() = zero impact on jackpot/daily. */
    body.individual-competition-page:not(.jackpot-competitions-page):not(.daily-free-games-page) .hero-author-info {
        justify-content: flex-start !important;
        align-items: center !important;
        /* Lock height from first paint so hero never shrinks when license hides (no CLS) */
        min-height: 1.5rem !important;
    }
    
    body.individual-competition-page .hero-author-info .author-row {
        display: inline-flex !important;
        flex-shrink: 0 !important;
    }
    
    body.individual-competition-page .hero-author-info .last-updated {
        display: inline-block !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Hide ::before separator on individual/jackpot/daily to prevent double "|" */
    body.individual-competition-page .hero-author-info .last-updated::before,
    body.jackpot-competitions-page .hero-author-info .last-updated::before,
    body.daily-free-games-page .hero-author-info .last-updated::before {
        display: none !important;
        content: "" !important;
    }
    
    /* Show separator between Written by and Last Updated on individual/jackpot/daily */
    body.individual-competition-page .hero-author-info .author-row + .author-sep,
    body.jackpot-competitions-page .hero-author-info .author-row + .author-sep,
    body.daily-free-games-page .hero-author-info .author-row + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Individual pages: Hide License on mobile (same simple layout as casino signup) */
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper,
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper + .author-sep {
        display: none !important;
    }
}

/* 400px-479px: Written by | Last Updated on same line */
@media (min-width: 400px) and (max-width: 479px) {
    .hero-author-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        margin-top: 0.5rem !important;
    }
    
    .hero-author-info .author-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide author image until 700px */
    .hero-author-info .author-image {
        display: none !important;
    }
    
    /* Show Last Updated on same line */
    .hero-author-info .last-updated {
        display: inline-block !important;
        font-style: italic !important;
        opacity: 0.7 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide "Last " text until 480px - show only "Updated:" */
    .hero-author-info .last-updated .last-text {
        display: none !important;
    }
    
    /* Show separator between Written by and Last Updated (the one before last-updated) */
    .hero-author-info .last-updated::before {
        content: "|" !important;
        margin: 0 0.5rem !important;
        display: inline-block !important;
        font-style: normal !important;
    }
    
    /* Hide all separators since we're using ::before */
    .hero-author-info .author-sep {
        display: none !important;
    }
    
    /* Jackpot/Daily: use real pipe, hide ::before to match critical and avoid double pipe – same as daily */
    body.jackpot-competitions-page .hero-author-info .last-updated::before,
    body.daily-free-games-page .hero-author-info .last-updated::before {
        display: none !important;
        content: "" !important;
    }
    body.jackpot-competitions-page .hero-author-info .author-row + .author-sep,
    body.daily-free-games-page .hero-author-info .author-row + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide mobile date */
    .hero-author-info .last-updated-date-mobile {
        display: none !important;
    }
    
    /* Hide "All Offers Are UKGC Compliant" */
    .hero-author-info .author-expertise {
        display: none !important;
    }
    
    /* License/How We Rate: Force wrap and left-align below */
    .hero-author-info .ukgc-badge-wrapper,
    .hero-author-info .how-we-rate-link {
        flex-basis: 100%;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 0.25rem !important;
    }
    
    /* Individual pages: Hide mobile date - use regular last-updated instead */
    body.individual-competition-page .hero-author-info .last-updated-date-mobile {
        display: none !important;
    }
    
}

/* 480px-767px: Image + Written by | Last Updated, How We Rate/License tries to fit on same line, centers if wraps */
@media (min-width: 480px) and (max-width: 767px) {
    /* Show "Last " text at 480px+ */
    .hero-author-info .last-updated .last-text {
        display: inline !important;
    }
    
    /* CRITICAL: Hide ::before separator at 480px+ to prevent double "|" */
    .hero-author-info .last-updated::before {
        display: none !important;
        content: "" !important;
    }
    
    .hero-author-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        white-space: nowrap;
        justify-content: flex-start;
    }
    
    /* First line: Image + Written by | Last Updated - all horizontal */
    .hero-author-info .author-row {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Hide author image until 700px */
    .hero-author-info .author-image {
        display: none !important;
    }
    
    /* Show Last Updated on same horizontal line */
    .hero-author-info .last-updated {
        display: inline-block !important;
        font-style: italic;
        opacity: 0.7;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Ensure separator before last-updated is not italic */
    .hero-author-info .last-updated + .author-sep {
        font-style: normal !important;
    }
    
    /* Show separator between Written by and Last Updated */
    .hero-author-info .author-row + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Hide separator after Last Updated until 1024px – no | before How We Rate below 1024px */
    .hero-author-info .last-updated + .author-sep {
        display: none !important;
    }
    
    /* Hide mobile date */
    .hero-author-info .last-updated-date-mobile {
        display: none !important;
    }
    
    /* Hide "All Offers Are UKGC Compliant" until 700px */
    .hero-author-info .author-expertise {
        display: none !important;
    }
    
    /* License: Try to fit on same line, if wraps, left-align it */
    .hero-author-info .ukgc-badge-wrapper {
        display: inline-flex !important;
        white-space: nowrap;
        flex-shrink: 0;
        flex-basis: auto;
        justify-content: flex-start !important;
    }
    
    /* How We Rate: Keep below until 920px */
    .hero-author-info .how-we-rate-link {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    /* Hide separator before How We Rate until 920px */
    .hero-author-info .last-updated + .author-sep:has(+ .how-we-rate-link) {
        display: none !important;
    }
    
}

/* 700px+: Full hero section visible - Image + Written by | All Offers Are UKGC Compliant | Last Updated | How We Rate/License */
@media (min-width: 700px) {
    .hero-author-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Allow wrapping so How We Rate can go below until 920px */
        align-items: center;
        gap: 0;
        white-space: nowrap;
    }
    
    .hero-author-info .author-row {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    
    /* Author image: do NOT show here – only at 768px+ (see rule below) */
    
    /* Show "All Offers Are UKGC Compliant" at 700px+ (but hide on individual pages) */
    .hero-author-info .author-expertise {
        display: inline-block !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Individual pages: Hide "All Offers Are UKGC Compliant" to give license space */
    body.individual-competition-page .hero-author-info .author-expertise {
        display: none !important;
    }
    
    /* Show separator before "All Offers Are UKGC Compliant" */
    .hero-author-info .author-row ~ .author-sep:first-of-type {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
    }
    
    /* Show separator between "All Offers Are UKGC Compliant" and "Last Updated" */
    /* This separator is between author-expertise and ukgc-badge-wrapper in HTML, but when license is below, it appears between author-expertise and last-updated */
    .hero-author-info .author-expertise + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
    }
    
    /* Hide separator after Last Updated until 920px (when How We Rate goes on same line) */
    /* Only hide the separator that comes before How We Rate - but only below 920px */
    @media (min-width: 700px) and (max-width: 919px) {
        .hero-author-info .last-updated + .author-sep:has(+ .how-we-rate-link) {
            display: none !important;
        }
    }
    
    /* Hide separator between License and Last Updated when license is on same line (we use author-expertise separator instead) */
    /* Only show this separator on individual pages where author-expertise is hidden */
    .hero-author-info .ukgc-badge-wrapper + .author-sep {
        display: none !important;
    }
    
    /* Individual pages: Show separator between License and Last Updated (since author-expertise is hidden) */
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
    }
    
    /* Individual pages: Hide separator between author-expertise and ukgc-badge-wrapper (author-expertise is hidden) */
    body.individual-competition-page .hero-author-info .author-expertise + .author-sep {
        display: none !important;
    }
    
    /* Show Last Updated */
    .hero-author-info .last-updated {
        display: inline-block !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Hide mobile date */
    .hero-author-info .last-updated-date-mobile {
        display: none !important;
    }
    
    /* License: On same line to the right, left-aligned */
    .hero-author-info .ukgc-badge-wrapper {
        display: inline-flex !important;
        white-space: nowrap;
        flex-shrink: 0;
        justify-content: flex-start !important;
    }
    
    /* How We Rate: Keep below until 920px - force to wrap */
    .hero-author-info .how-we-rate-link {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        display: flex !important;
        justify-content: flex-start !important;
        order: 999 !important; /* Force to bottom */
    }
    
    /* Hide separator before How We Rate until 920px */
    .hero-author-info .last-updated + .author-sep:has(+ .how-we-rate-link) {
        display: none !important;
    }
    
    /* Individual pages: License on same line at 768px+ (not 520px, that's handled separately) */
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper {
        flex-basis: auto !important;
        width: auto !important;
        margin-top: 0 !important;
        display: inline-flex !important;
        justify-content: flex-start !important;
    }
    
    /* Individual pages: Show separator between Written by and License */
    body.individual-competition-page .hero-author-info .author-row + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
    }
    
    /* Individual pages: Show separator between License and Updated */
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem;
        flex-shrink: 0;
    }
    
    /* Individual pages: Hide separator after Updated (no element after it) */
    body.individual-competition-page .hero-author-info .last-updated + .author-sep {
        display: none !important;
    }
}

/* Individual pages only (768px+): body scope = zero impact on jackpot/daily */
@media (min-width: 768px) {
    bodybody.individual-competition-page .hero-author-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }
    
    bodybody.individual-competition-page .hero-author-info .author-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Show author image at 768px+ for individual pages */
    bodybody.individual-competition-page .hero-author-info .author-image {
        display: block !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide "All Offers Are UKGC Compliant" on individual pages */
    bodybody.individual-competition-page .hero-author-info .author-expertise {
        display: none !important;
    }
    
    /* Show Last Updated */
    bodybody.individual-competition-page .hero-author-info .last-updated {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-style: italic !important;
        opacity: 0.7 !important;
    }
}

/* Individual pages: 520px-767px – License HIDDEN on mobile (same as casino signup); Written by | Last Updated only */
@media (min-width: 520px) and (max-width: 767px) {
    body.individual-competition-page .hero-author-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0 !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
    }
    
    body.individual-competition-page .hero-author-info .author-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide license on mobile – same simple layout as casino signup */
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper,
    body.individual-competition-page .hero-author-info .ukgc-badge-wrapper + .author-sep {
        display: none !important;
    }
    
    /* Show separator between Written by and Last Updated */
    body.individual-competition-page .hero-author-info .author-row + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    body.individual-competition-page .hero-author-info .last-updated {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    body.individual-competition-page .hero-author-info .last-updated + .author-sep {
        display: none !important;
    }
    
    body.individual-competition-page .hero-author-info .last-updated {
        font-style: italic !important;
        opacity: 0.7 !important;
    }
}

/* 920px+: Everything on same line - Image + Written by | All Offers Are UKGC Compliant | Last Updated | How We Rate/License */
@media (min-width: 920px) {
    /* Individual pages: Remove special overrides, use same logic as other pages */
    body.individual-competition-page .hero-author-info .last-updated-date-mobile {
            display: none !important;
    }
    
    body.individual-competition-page .hero-author-info .last-updated {
        display: inline-block !important;
    }
    
    /* Force no wrap at 920px+ */
    .hero-author-info {
        flex-wrap: nowrap !important;
        }
        
    /* How We Rate: Go on same line at 920px+ */
    .hero-author-info .how-we-rate-link {
        flex-basis: auto !important;
        width: auto !important;
        margin-top: 0 !important;
            display: inline-flex !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        justify-content: flex-start !important;
        order: 0 !important; /* Reset order */
    }
    
    /* Separator before How We Rate: show at 1024px+ (see block below) */
}

/* 768–1023px: FORCE hide | separator after Last Updated (override any rules that show it) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-author-info .last-updated + .author-sep,
    .hero-author-info .author-sep:has(+ .how-we-rate-link),
    .hero-author-info .author-sep:has(+ .hero-author-bar__how-we-rate) {
        display: none !important;
    }
}

/* 1024px+: Show | separator between Last Updated and How We Rate (hero bar hidden, author bar shows). Faint grey like all other separators. */
@media (min-width: 1024px) {
    .hero-author-info .last-updated + .author-sep:has(+ .how-we-rate-link),
    .hero-author-info .author-sep:has(+ .how-we-rate-link),
    .hero-author-info .author-sep-before-how-we-rate {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 0.6 !important;
        color: #8a8a8a !important;
    }
}

/* 920px+: Same as 768px+ (kept for backwards compatibility) */
@media (min-width: 920px) {
    /* Individual pages: Remove special overrides, use same logic as other pages */
    body.individual-competition-page .hero-author-info .last-updated-date-mobile {
            display: none !important;
        }
        
    body.individual-competition-page .hero-author-info .last-updated {
            display: inline-block !important;
        }
}

/* Individual pages: Hide mobile date at all breakpoints - use regular last-updated */
body.individual-competition-page .hero-author-info .last-updated-date-mobile {
    display: none !important;
}

/* Desktop: Always show FULL subtitle, hide toggle */
@media (min-width: 768px) {
    .hero-subtitle {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show full text, hide short text and toggle on desktop */
    .hero-subtitle .subtitle-short {
        display: none !important;
    }
    
    .hero-subtitle .subtitle-full {
        display: inline !important;
    }
    
    .hero-subtitle .read-more-toggle {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        padding: 1.25rem 0;
    }
    
    .hero-content {
        gap: 1.75rem;
        padding: 0 1.5rem;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-left {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }
    
    .hero-section h1 {
        font-size: 1.6rem;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        text-transform: uppercase !important;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1024px) {
    .hero-section h1,
    .hero-subtitle {
        max-width: 1200px !important;
    }
    
    .hero-section h1 {
        font-size: 32px;
        text-transform: uppercase !important;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
    }
}

/* CRITICAL: Hide | separator after Last Updated at 768-1023px – must override .hero-author-info .author-sep { display: inline-block !important } */
@media (max-width: 1023px) {
    .hero-author-info .author-sep-before-how-we-rate {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* FINAL: Jackpot + Daily = exact same hero author styling as daily (carbon copy). Last word in this file. */
@media (min-width: 768px) {
    body.jackpot-competitions-page .hero-author-info .author-expertise,
    body.daily-free-games-page .hero-author-info .author-expertise {
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    body.jackpot-competitions-page .hero-author-info .author-row + .author-sep,
    body.daily-free-games-page .hero-author-info .author-row + .author-sep,
    body.jackpot-competitions-page .hero-author-info .author-expertise + .author-sep,
    body.daily-free-games-page .hero-author-info .author-expertise + .author-sep {
        display: inline-block !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
}