/*
 * =============================================
 * TRIBUNE MOBILE CSS - FIGMA EXACT
 * For mobile viewport (375px base, responsive)
 * =============================================
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
    --color-primary: #092040;
    --color-accent: #F50002;
    --color-bg-light: #F6F7FE;
    --color-text-dark: #051327;
    --color-text-light: #7F8B9C;
    --color-border: #6289B5;
    --color-footer-border: #7F8B9C;
    --color-link-blue: #036BDD;
    --color-more-blue: #003F84;
    --mobile-side-padding: 24px;
}

/* =============================================
   BASE RESET FOR MOBILE
   ============================================= */
.mobile-body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

.mobile-page {
    padding: 0 var(--mobile-side-padding);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Hide page shell margin on mobile */
.mobile-body .page-shell {
    margin: 0;
    padding: 0;
}

/* =============================================
   MOBILE HEADER - 72px height, dark blue
   Logo right-aligned with equal margins
   ============================================= */
.mobile-body .site-header {
    height: 72px;
    padding: 0 var(--mobile-side-padding);
    background: var(--color-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
}

.mobile-body .main-header-wrapper {
    padding-top: 72px;
}

/* Left group: Menu + Search buttons */
.mobile-body .header-left-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* Right: Logo */
.mobile-body .header-logo-right {
    display: flex;
    align-items: center;
}

.mobile-body .brand-logo-mobile {
    height: 40px;
    width: auto;
}

/* Hide desktop subscribe button on mobile */
.mobile-body .header-cta {
    display: none !important;
}

/* =============================================
   SEARCH HEADER MODE
   ============================================= */
/* Hidden state for normal header */
.mobile-body .site-header.hidden {
    display: none !important;
}

/* Search header - hidden by default */
.mobile-body .site-header-search {
    display: none;
    height: 72px;
    padding: 16px 24px;
    background: var(--color-primary);
    box-shadow: 0px 4px 4px rgba(0, 63, 132, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* Active state shows search header */
.mobile-body .site-header-search.active {
    display: flex;
}

/* Close button in search header */
.mobile-body .close-search-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Search form in header */
.mobile-body .header-search-form {
    flex: 1;
    display: flex;
}

.mobile-body .header-search-input-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 6px;
    width: 100%;
    max-width: 290px;
    height: 40px;
    background: #FBFBFB;
    border-radius: 100px;
    box-sizing: border-box;
}

.mobile-body .header-search-input-wrap svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-body .header-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    height: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-primary);
}

.mobile-body .header-search-input::placeholder {
    color: var(--color-primary);
    opacity: 0.6;
}

/* =============================================
   SIDE MENU - Compact overlay
   ============================================= */
.side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: none;
}

.side-menu-overlay.active {
    display: block;
}

.side-menu {
    position: absolute;
    top: 72px;
    left: 0;
    width: 234px;
    height: auto;
    min-height: 417px;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    padding: 30px 0 21px 24px;
    box-sizing: border-box;
}

/* Active indicator bar on right edge */
.side-menu-indicator {
    position: absolute;
    width: 5px;
    height: 34px;
    right: 0;
    top: 30px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px 0 0 2px;
}

/* Navigation links container */
.side-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 210px;
}

/* Individual menu links */
.side-menu-link {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
}

.side-menu-link:hover {
    opacity: 0.8;
}

/* Separator lines */
.side-menu-separator {
    width: 210px;
    height: 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.6);
}

/* Subscribe button at bottom */
.side-menu-subscribe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 42px;
    gap: 10px;
    width: 158px;
    height: 45px;
    background: var(--color-accent);
    border-radius: 100px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: auto;
    margin-left: calc((234px - 24px - 158px) / 2);
    box-sizing: border-box;
}

/* =============================================
   MOBILE TRENDING BAR - Flexible, responsive
   ============================================= */
.mobile-body .trending-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--mobile-side-padding);
    height: 54px;
    width: 100%;
    background: var(--color-bg-light);
    box-shadow: 0px 4px 4px rgba(0, 63, 132, 0.04);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar */
.mobile-body .trending-bar::-webkit-scrollbar {
    display: none;
}
.mobile-body .trending-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile-body .trending-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Trending Label - Red, 14px, weight 800 */
.mobile-body .trending-label {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Trending Pills - 26px height, 12px font, flexible gaps */
.mobile-body .trending-pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-body .trending-pills a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 0.5px solid rgba(64, 122, 174, 0.28);
    border-radius: 22px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    color: var(--color-text-dark);
    text-decoration: none;
    white-space: nowrap;
}

/* =============================================
   MOBILE FOOTER - FIGMA EXACT (full width)
   ============================================= */
.mobile-footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ------------------------------------------
   SECTION 1: Logo (24px from top, 32px to divider)
   ------------------------------------------ */
.mobile-footer .footer-logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0 32px;
    width: 100%;
}

.mobile-footer .footer-logo {
    width: 277px;
    height: auto;
    max-width: 80%;
}

/* ------------------------------------------
   HORIZONTAL DIVIDERS (0.5px #7F8B9C)
   ------------------------------------------ */
.mobile-footer .footer-divider {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-footer-border);
}

/* ------------------------------------------
   SECTION 2: Navigation (32px padding each side)
   ------------------------------------------ */
.mobile-footer .footer-nav-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
    width: 100%;
}

.mobile-footer .footer-nav-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.mobile-footer .footer-nav-row a {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
}

/* ------------------------------------------
   SECTION 3: Newsletter
   ------------------------------------------ */
.mobile-footer .footer-newsletter-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 33px var(--mobile-side-padding) 0;
    gap: 13px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-footer .footer-newsletter-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 100%;
    color: #FFFFFF;
    margin: 0;
}

.mobile-footer .footer-newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 327px;
    height: 55px;
    padding: 6px 6px 6px 24px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.21);
    border: 1px solid rgba(217, 217, 217, 0.56);
    backdrop-filter: blur(2px);
    border-radius: 100px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.mobile-footer .footer-newsletter-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
}

.mobile-footer .footer-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.mobile-footer .footer-newsletter-form button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 6px;
    gap: 4px;
    min-width: 100px;
    max-width: 108px;
    height: 42px;
    background: var(--color-primary);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-footer .footer-newsletter-form button {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
}

.mobile-footer .footer-newsletter-form button svg {
    width: 22px;
    height: 22px;
    stroke: #FFFFFF;
    transform: rotate(-45deg);
}

/* ------------------------------------------
   SOCIAL + PRIVACY ROW
   ------------------------------------------ */
.mobile-footer .footer-social-legal-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 70px var(--mobile-side-padding) 0;
    box-sizing: border-box;
}

.mobile-footer .footer-social {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
}

.mobile-footer .footer-social a {
    display: block;
    width: 24px;
    height: 24px;
}

.mobile-footer .footer-social svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
}

.mobile-footer .footer-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mobile-footer .footer-legal a {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
}

.mobile-footer .footer-legal-sep {
    color: #FFFFFF;
    margin: 0 8px;
}

/* ------------------------------------------
   COPYRIGHT
   ------------------------------------------ */
.mobile-footer .footer-copyright-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 70px var(--mobile-side-padding) 40px;
    box-sizing: border-box;
}

.mobile-footer .footer-copyright {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.mobile-footer .footer-copyright-icon {
    width: 14px;
    height: 14px;
    stroke: #FFFFFF;
}

.mobile-footer .footer-copyright-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* =============================================
   MOBILE HERO ARTICLE - 16:9 aspect ratio
   ============================================= */
.mobile-hero {
    padding: 24px 0;
}

.mobile-hero-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0 0 16px 0;
}

.mobile-hero-title a {
    color: inherit;
    text-decoration: none;
}

.mobile-hero-image-link {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.mobile-hero-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

.mobile-hero-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
}

.mobile-hero-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.mobile-hero-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--color-text-light);
}

.mobile-hero-time svg {
    stroke: var(--color-text-light);
}

.mobile-hero-category {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.mobile-hero-byline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}

.mobile-hero-author {
    font-weight: 600;
    color: #1A6FC9;
}

.mobile-hero-sep {
    color: var(--color-text-light);
}

.mobile-hero-date {
    color: var(--color-accent);
}

/* =============================================
   2x2 TEXT-ONLY ARTICLE GRID (Figma Exact)
   Using Flexbox like Figma
   Container: 326px width (375px - 24px*2 padding)
   Each card: 155px width
   Gap: 8px between cards (via divider)
   Card height: 236px
   ============================================= */
.mobile-text-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 100%;
}

/* Each row: 2 cards + 1 divider */
.mobile-text-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 8px;
    width: 100%;
    height: 236px;
}

/* Individual card */
.mobile-text-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: 236px;
}

/* Vertical divider between cards */
.mobile-text-divider-vertical {
    width: 0;
    align-self: stretch;
    border-left: 0.5px solid var(--color-border);
    flex-shrink: 0;
}

/* Horizontal divider between rows */
.mobile-text-divider-horizontal {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* Card content section (title + summary) */
.mobile-text-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 100%;
    min-height: 164px;
}

/* Title: 80px height, 18px/110%/800 */
.mobile-text-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 80px;
    max-height: 80px;
    overflow: hidden;
}

.mobile-text-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Summary: 68px height, 14px/120%/500 */
.mobile-text-card-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 68px;
    max-height: 68px;
    overflow: hidden;
}

/* Meta section: 62px height */
.mobile-text-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    width: 100%;
    height: 62px;
}

/* Meta top row: time + tag on same line, 16px height */
.mobile-text-card-meta-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 100%;
    height: 16px;
}

/* Time with icon: 10px/120%/500 */
.mobile-text-card-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-text-dark);
    height: 16px;
}

.mobile-text-card-time svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Tag: 10px/14px/700 blue */
.mobile-text-card-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-link-blue);
    text-decoration: none;
    height: 14px;
}

/* Author section: 36px height */
.mobile-text-card-author {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 4px;
    width: 100%;
    height: 36px;
}

.mobile-text-card-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-text-card-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* =============================================
   MORE SECTION (Figma Exact)
   Full width, outside page container
   Blue line spans full page
   70px gap to content
   2x2 grid: title (60px) + author (36px) = 106px per card
   ============================================= */
.mobile-more-section {
    width: 100%;
    padding: 0;
    margin-top: 40px;
}

/* Header with full-width line */
.mobile-more-header {
    position: relative;
    width: 100%;
    height: 86px;
}

/* Blue line - full width */
.mobile-more-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 31px;
    height: 0;
    border-top: 1px solid var(--color-more-blue);
}

/* More icon positioned over the line */
.mobile-more-icon {
    position: absolute;
    left: 23px;
    top: 0;
    width: 110px;
    height: 86px;
    z-index: 1;
}

/* Grid container with 70px margin from line */
.mobile-more-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
}

/* Each row: 2 cards + divider */
.mobile-more-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 16px;
    width: 100%;
    height: 106px;
}

/* Individual card: 147px width, 106px height */
.mobile-more-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: 106px;
}

/* Vertical divider */
.mobile-more-divider-vertical {
    width: 0;
    align-self: stretch;
    border-left: 0.5px solid var(--color-border);
    flex-shrink: 0;
}

/* Horizontal divider */
.mobile-more-divider-horizontal {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* Title: 60px height, 20px/100%/800 */
.mobile-more-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 60px;
    max-height: 60px;
    overflow: hidden;
}

.mobile-more-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Author section: 36px height */
.mobile-more-card-author {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 4px;
    width: 100%;
    height: 36px;
}

.mobile-more-card-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-more-card-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* Footer line - full width */
.mobile-more-footer-line {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--color-more-blue);
    margin-top: 24px;
}

/* =============================================
   FRAME 31: Additional Content Section
   70px gap from More footer line
   ============================================= */
.mobile-frame31 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 32px;
    width: 100%;
    margin-top: 70px;
}

/* ------------------------------------------
   Section 1: 3 Text-Only Articles (stacked)
   Each: Title + Author-Date on same line
   89px height per item
   ------------------------------------------ */
.mobile-f31-text-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 24px;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-f31-text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-height: 89px;
}

.mobile-f31-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

/* Title: 20px/120%/800, 48px height */
.mobile-f31-text-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 48px;
}

.mobile-f31-text-title a {
    color: inherit;
    text-decoration: none;
}

/* Author row: Name - Date on same line */
.mobile-f31-text-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 25px;
}

.mobile-f31-text-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-f31-text-author .author-sep {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-accent);
}

.mobile-f31-text-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-f31-text-divider {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* ------------------------------------------
   Section 2: Image-Left Article Card
   Image: 139px x 188px
   ------------------------------------------ */
.mobile-f31-image-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 24px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-f31-image-left {
    width: 139px;
    height: 188px;
    flex-shrink: 0;
    overflow: hidden;
}

.mobile-f31-image-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-f31-image-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    height: 188px;
}

/* Title: 26px/100%/800 */
.mobile-f31-image-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    min-height: 104px;
}

.mobile-f31-image-title a {
    color: inherit;
    text-decoration: none;
}

.mobile-f31-image-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.mobile-f31-image-meta-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    height: 16px;
}

.mobile-f31-image-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-text-dark);
}

.mobile-f31-image-meta-top .meta-time svg {
    width: 12px;
    height: 12px;
}

.mobile-f31-image-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-link-blue);
    text-decoration: none;
}

.mobile-f31-image-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 36px;
}

.mobile-f31-image-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-f31-image-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* ------------------------------------------
   Section 3: 2x1 Row with Bar on Top
   Each card: 153.5px width, 123px height
   ------------------------------------------ */
.mobile-f31-bar-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 24px;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-f31-bar-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    flex: 1;
    min-height: 123px;
}

.mobile-f31-bar-top {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

.mobile-f31-bar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Title: 18px/100%/800, 72px height */
.mobile-f31-bar-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    min-height: 72px;
    max-height: 72px;
    overflow: hidden;
}

.mobile-f31-bar-title a {
    color: inherit;
    text-decoration: none;
}

.mobile-f31-bar-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 32px;
}

.mobile-f31-bar-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
    color: var(--color-accent);
}

.mobile-f31-bar-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 11px;
    line-height: 15px;
    color: var(--color-accent);
}

/* ------------------------------------------
   Section 4: Large Text Article
   Full width, 32px title, summary visible
   ------------------------------------------ */
.mobile-f31-large-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-f31-large-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Title: 32px/120%/800 */
.mobile-f31-large-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    min-height: 76px;
}

.mobile-f31-large-title a {
    color: inherit;
    text-decoration: none;
}

/* Summary: 15px/120%/500 */
.mobile-f31-large-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    color: var(--color-text-dark);
    margin: 0;
    min-height: 36px;
}

.mobile-f31-large-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: 44px;
}

.mobile-f31-large-meta-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    height: 19px;
}

.mobile-f31-large-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: var(--color-text-dark);
}

.mobile-f31-large-meta-top .meta-time svg {
    width: 16px;
    height: 16px;
}

.mobile-f31-large-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-link-blue);
    text-decoration: none;
}

.mobile-f31-large-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 25px;
}

.mobile-f31-large-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-accent);
}

.mobile-f31-large-author .author-sep {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-accent);
}

.mobile-f31-large-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-accent);
}

/* ------------------------------------------
   Section 5: Full-Width Image Card
   327px x 288px image
   ------------------------------------------ */
.mobile-f31-fullimage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-f31-fullimage-link {
    display: block;
    width: 100%;
}

.mobile-f31-fullimage-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* =============================================
   CATEGORY SECTION (Politics, US, etc.)
   60px gap from previous, 24px side padding
   ============================================= */
.mobile-category-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

/* ------------------------------------------
   Section Header: Title + Line + See All
   Line goes UNDER See All button
   ------------------------------------------ */
.mobile-category-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 42px;
    position: relative;
}

.mobile-category-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.07em;
    color: var(--color-text-dark);
    margin: 0;
    position: relative;
    z-index: 2;
}

.mobile-category-header-right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex: 1;
    margin-left: 8px;
    position: relative;
}

.mobile-category-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 0;
    border-top: 3px solid var(--color-primary);
    z-index: 1;
}

.mobile-category-see-all {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    text-decoration: none;
    position: absolute;
    right: 0;
    bottom: 10px;
    z-index: 2;
    background: transparent;
    padding-left: 8px;
}

.mobile-category-see-all span {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.mobile-category-see-all-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
}

.mobile-category-see-all-btn svg {
    width: 15px;
    height: 15px;
}

/* ------------------------------------------
   Category Grid: 2 rows, 2 cards per row
   ------------------------------------------ */
.mobile-category-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.mobile-category-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

/* Vertical divider */
.mobile-category-divider-vertical {
    width: 0;
    align-self: stretch;
    border-left: 0.5px solid var(--color-border);
    flex-shrink: 0;
}

/* ------------------------------------------
   Category Card (base styles)
   147px width, flex-grow to fill
   ------------------------------------------ */
.mobile-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Image Card: has image + title above image */
.mobile-category-card-image {
    min-height: 335px;
}

/* Text Card: title + summary + meta */
.mobile-category-card-text {
    min-height: 253px;
}

/* Card Title: 18px/110%/800, 80px height */
.mobile-category-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 80px;
    max-height: 80px;
    overflow: hidden;
}

.mobile-category-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Image wrapper: 147px x 173px (3:4 close) */
.mobile-category-card-image-wrap {
    width: 100%;
    height: 173px;
    overflow: hidden;
}

.mobile-category-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Content (text cards): title + summary */
.mobile-category-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Card Summary: 14px/120%/500, 85px height */
.mobile-category-card-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 85px;
    max-height: 85px;
    overflow: hidden;
}

/* Card Meta: 62px height */
.mobile-category-card-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 62px;
}

/* Meta top: time + tag, 16px height */
.mobile-category-card-meta-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 16px;
}

.mobile-category-card-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-text-dark);
}

.mobile-category-card-meta-top .meta-time svg {
    width: 16px;
    height: 16px;
}

.mobile-category-card-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-link-blue);
    text-decoration: none;
}

/* Author section: 36px height */
.mobile-category-card-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 36px;
}

.mobile-category-card-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-category-card-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* =============================================
   AD BANNER
   30px gap from US section, full page width
   ============================================= */
.mobile-ad-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    padding: 0;
}

.mobile-ad-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background: #E5E5E5;
    border: 1px dashed #999999;
}

.mobile-ad-placeholder span {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #666666;
    text-transform: uppercase;
}

/* =============================================
   WORLD SECTION
   30px gap from ad, 4 rows 1 article per row
   ============================================= */
.mobile-world-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
}

.mobile-world-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Card: 114px height */
.mobile-world-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-height: 114px;
}

/* Title: 20px/120%/800, 48px height */
.mobile-world-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 48px;
}

.mobile-world-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Meta section: 50px height */
.mobile-world-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 50px;
}

/* Meta top: time + tag, 19px height */
.mobile-world-card-meta-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    height: 19px;
}

.mobile-world-card-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-text-dark);
}

.mobile-world-card-meta-top .meta-time svg {
    width: 16px;
    height: 16px;
}

.mobile-world-card-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-link-blue);
    text-decoration: none;
}

/* Author row: Name - Date (same line) */
.mobile-world-card-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 25px;
}

.mobile-world-card-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-world-card-author .author-sep {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-accent);
}

.mobile-world-card-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* Divider between articles */
.mobile-world-divider {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* =============================================
   BUSINESS SECTION
   60px gap from World, 2 rows 2 articles per row
   ============================================= */
.mobile-business-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

.mobile-business-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.mobile-business-top-divider {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

.mobile-business-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.mobile-business-row-divider {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* Card: 174px height, 151px width */
.mobile-business-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-height: 174px;
}

/* Title: 20px/120%/800, 96px height */
.mobile-business-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    width: 100%;
    min-height: 96px;
    max-height: 96px;
    overflow: hidden;
}

.mobile-business-card-title a {
    color: inherit;
    text-decoration: none;
}

/* Meta section: 62px height */
.mobile-business-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    height: 62px;
}

/* Meta top: time + tag, 16px height */
.mobile-business-card-meta-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 16px;
}

.mobile-business-card-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-text-dark);
}

.mobile-business-card-meta-top .meta-time svg {
    width: 16px;
    height: 16px;
}

.mobile-business-card-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-link-blue);
    text-decoration: none;
}

/* Author: stacked (Name on line 1, Date on line 2) */
.mobile-business-card-author {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    height: 36px;
}

.mobile-business-card-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-business-card-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* =============================================
   OPINION SECTION
   60px gap from Business, reuses business grid styles
   ============================================= */
.mobile-opinion-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
}

/* Ad Banner 2: 30px gap from Opinion */
.mobile-ad-banner-2 {
    margin-top: 30px;
}

/* =============================================
   SPORTS SECTION
   30px gap from ad banner
   ============================================= */
.mobile-sports-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
}

.mobile-sports-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

/* ------------------------------------------
   Featured Card: Title + Summary + Meta + 1:1 Image
   ------------------------------------------ */
.mobile-sports-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.mobile-sports-featured-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Title: 32px/120%/800 */
.mobile-sports-featured-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
}

.mobile-sports-featured-title a {
    color: inherit;
    text-decoration: none;
}

/* Summary: 15px/120%/500 */
.mobile-sports-featured-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    color: var(--color-text-dark);
    margin: 0;
}

/* Meta section */
.mobile-sports-featured-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.mobile-sports-featured-meta-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    height: 19px;
}

.mobile-sports-featured-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-text-dark);
}

.mobile-sports-featured-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-link-blue);
    text-decoration: none;
}

/* Author row: Name - Date */
.mobile-sports-featured-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 25px;
}

.mobile-sports-featured-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-accent);
}

.mobile-sports-featured-author .author-sep {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-accent);
}

.mobile-sports-featured-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-accent);
}

/* Featured Image: 1:1 aspect ratio */
.mobile-sports-featured-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.mobile-sports-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------
   Text Row: Two text-only cards with top bar
   ------------------------------------------ */
.mobile-sports-text-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.mobile-sports-text-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-height: 114px;
}

.mobile-sports-text-bar {
    width: 100%;
    height: 0;
    border-top: 0.5px solid var(--color-border);
}

/* Title: 18px/100%/800 */
.mobile-sports-text-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
    min-height: 72px;
}

.mobile-sports-text-title a {
    color: inherit;
    text-decoration: none;
}

/* Author: stacked */
.mobile-sports-text-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 32px;
}

.mobile-sports-text-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
    color: var(--color-accent);
}

.mobile-sports-text-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 11px;
    line-height: 15px;
    color: var(--color-accent);
}

/* ------------------------------------------
   Image-Left Card: 3:4 image + content on right
   ------------------------------------------ */
.mobile-sports-image-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 188px;
}

.mobile-sports-image-left-img {
    width: 139px;
    height: 188px;
    flex-shrink: 0;
    overflow: hidden;
}

.mobile-sports-image-left-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-sports-image-left-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height: 188px;
}

/* Title: 26px/100%/800 */
.mobile-sports-image-left-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-dark);
    margin: 0;
}

.mobile-sports-image-left-title a {
    color: inherit;
    text-decoration: none;
}

/* Meta section */
.mobile-sports-image-left-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-sports-image-left-meta-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 16px;
}

.mobile-sports-image-left-meta-top .meta-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-text-dark);
}

.mobile-sports-image-left-meta-top .meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-link-blue);
    text-decoration: none;
}

/* Author: stacked */
.mobile-sports-image-left-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 36px;
}

.mobile-sports-image-left-author .author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

.mobile-sports-image-left-author .author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-accent);
}

/* Footer spacer */
.mobile-footer-spacer {
    height: 30px;
    width: 100%;
}

/* =============================================
   MOBILE HOVER/TOUCH STATES
   Disable tap highlight & add red title on hover
   ============================================= */

/* Disable blue/gray tap highlight on all interactive elements */
a, button, .mobile-hero, .mobile-text-card, .mobile-more-card,
.mobile-f31-text-item, .mobile-f31-image-card, .mobile-f31-image-left, .mobile-f31-bar-card,
.mobile-f31-large-article, .mobile-f31-fullimage,
.mobile-category-card, .mobile-world-card, .mobile-business-card,
.mobile-sports-featured, .mobile-sports-text-card, .mobile-sports-image-left {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Prevent text selection on titles (to avoid selection appearance) */
.mobile-hero-title,
.mobile-text-card-title,
.mobile-more-card-title,
.mobile-f31-text-title,
.mobile-f31-image-title,
.mobile-f31-bar-title,
.mobile-f31-large-title,
.mobile-f31-fullimage-title,
.mobile-category-card-title,
.mobile-world-card-title,
.mobile-business-card-title,
.mobile-sports-featured-title,
.mobile-sports-text-title,
.mobile-sports-image-left-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ------------------------------------------
   HERO SECTION HOVER
   ------------------------------------------ */
.mobile-hero:hover .mobile-hero-title a,
.mobile-hero-title a:hover,
.mobile-hero-image-link:hover ~ .mobile-hero-title a {
    color: var(--color-accent) !important;
}

.mobile-hero .mobile-hero-author:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   TEXT GRID HOVER
   ------------------------------------------ */
.mobile-text-card:hover .mobile-text-card-title a,
.mobile-text-card-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-text-card .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   MORE SECTION HOVER
   ------------------------------------------ */
.mobile-more-card:hover .mobile-more-card-title a,
.mobile-more-card-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-more-card .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   FRAME 31 SECTIONS HOVER
   ------------------------------------------ */
/* Text Items (3 stacked articles) */
.mobile-f31-text-item:hover .mobile-f31-text-title a,
.mobile-f31-text-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-f31-text-item .author-name:hover {
    text-decoration: underline;
}

/* Image-Left Card (hover on parent card wrapper) */
.mobile-f31-image-card:hover .mobile-f31-image-title a,
.mobile-f31-image-left:hover ~ .mobile-f31-image-content .mobile-f31-image-title a,
.mobile-f31-image-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-f31-image-card .author-name:hover {
    text-decoration: underline;
}

/* Bar Cards (2-column row with top bar) */
.mobile-f31-bar-card:hover .mobile-f31-bar-title a,
.mobile-f31-bar-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-f31-bar-card .author-name:hover {
    text-decoration: underline;
}

/* Large Article (with title + summary) */
.mobile-f31-large-article:hover .mobile-f31-large-title a,
.mobile-f31-large-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-f31-large-article .author-name:hover {
    text-decoration: underline;
}

/* Full Image */
.mobile-f31-fullimage:hover .mobile-f31-fullimage-title a,
.mobile-f31-fullimage-title a:hover {
    color: var(--color-accent) !important;
}

/* ------------------------------------------
   CATEGORY SECTIONS (Politics, US) HOVER
   ------------------------------------------ */
.mobile-category-card:hover .mobile-category-card-title a,
.mobile-category-card-title a:hover,
.mobile-category-card-image-wrap:hover ~ .mobile-category-card-title a,
.mobile-category-card-image-wrap a:hover ~ .mobile-category-card-title a {
    color: var(--color-accent) !important;
}

.mobile-category-card .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   WORLD SECTION HOVER
   ------------------------------------------ */
.mobile-world-card:hover .mobile-world-card-title a,
.mobile-world-card-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-world-card .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   BUSINESS/OPINION SECTION HOVER
   ------------------------------------------ */
.mobile-business-card:hover .mobile-business-card-title a,
.mobile-business-card-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-business-card .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   SPORTS SECTION HOVER
   ------------------------------------------ */
/* Featured */
.mobile-sports-featured:hover .mobile-sports-featured-title a,
.mobile-sports-featured-title a:hover,
.mobile-sports-featured-image:hover ~ .mobile-sports-featured-content .mobile-sports-featured-title a {
    color: var(--color-accent) !important;
}

.mobile-sports-featured .author-name:hover {
    text-decoration: underline;
}

/* Text Cards */
.mobile-sports-text-card:hover .mobile-sports-text-title a,
.mobile-sports-text-title a:hover {
    color: var(--color-accent) !important;
}

.mobile-sports-text-card .author-name:hover {
    text-decoration: underline;
}

/* Image Left */
.mobile-sports-image-left:hover .mobile-sports-image-left-title a,
.mobile-sports-image-left-title a:hover,
.mobile-sports-image-left-img:hover ~ .mobile-sports-image-left-content .mobile-sports-image-left-title a {
    color: var(--color-accent) !important;
}

.mobile-sports-image-left .author-name:hover {
    text-decoration: underline;
}

/* ------------------------------------------
   ACTIVE STATE (for immediate touch feedback)
   ------------------------------------------ */
.mobile-hero:active .mobile-hero-title a,
.mobile-text-card:active .mobile-text-card-title a,
.mobile-more-card:active .mobile-more-card-title a,
.mobile-f31-text-item:active .mobile-f31-text-title a,
.mobile-f31-image-card:active .mobile-f31-image-title a,
.mobile-f31-bar-card:active .mobile-f31-bar-title a,
.mobile-f31-large-article:active .mobile-f31-large-title a,
.mobile-f31-fullimage:active .mobile-f31-fullimage-title a,
.mobile-category-card:active .mobile-category-card-title a,
.mobile-world-card:active .mobile-world-card-title a,
.mobile-business-card:active .mobile-business-card-title a,
.mobile-sports-featured:active .mobile-sports-featured-title a,
.mobile-sports-text-card:active .mobile-sports-text-title a,
.mobile-sports-image-left:active .mobile-sports-image-left-title a {
    color: var(--color-accent) !important;
}
