/* ====================== styles.css ======================
   Generify Pulse — v1.2.0 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');

/* ── Base ── */
body { font-family: 'Inter', system-ui, sans-serif; }
.newspaper-font { font-family: 'Playfair Display', serif; }

/* ── Cards ── */
.hero-card { background-size: cover; background-position: center; }
.news-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55); }

/* ── iOS minimum tap target ── */
button, select, input { min-height: 44px; }

/* ── Weather strip — hide scrollbar ── */
#weather-strip { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#weather-strip::-webkit-scrollbar { display: none; }

/* ── Bookmark panel full-width on mobile ── */
@media (max-width: 639px) {
    #bookmarks-panel { width: 100% !important; }
}

/* ── Article preview ── */
#article-view { -webkit-overflow-scrolling: touch; }

/* ── RTL support ── */
/* RTL text support — layout stays LTR always */
.lang-rtl .newspaper-font { font-family: 'Inter', system-ui, sans-serif; }
/* Force LTR on all layout containers */
.lang-rtl #app,
.lang-rtl .stories-section,
.lang-rtl .news-card,
.lang-rtl .hero-card,
.lang-rtl #weather-strip,
.lang-rtl #trending-sidebar,
.lang-rtl #location-banner { direction: ltr !important; }
/* Only flip text in article body copy */
.lang-rtl .stories-section p { direction: rtl; text-align: right; }

/* ── Weather detail tiles ── */
.weather-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.weather-scroll::-webkit-scrollbar { display: none; }
.weather-tile { text-align: inherit; }
#weather-detail-view { -webkit-overflow-scrolling: touch; }

/* ── Non-logo fallback for stories without publisher images ── */

.story-image:not([style*="background-image"]) {
    background:
        radial-gradient(circle at 30% 25%, rgba(34,211,238,0.18), transparent 34%),
        radial-gradient(circle at 75% 20%, rgba(16,185,129,0.12), transparent 30%),
        linear-gradient(135deg, rgba(24,24,27,0.98), rgba(9,9,11,0.98));
}
.story-image:not([style*="background-image"])::after {
    content: 'Generify Pulse';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(161,161,170,0.52);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* Step 10.1 — density + PWA-friendly viewport polish */
html,
body {
    min-height: 100%;
    min-height: 100dvh;
}

body {
    overscroll-behavior-y: none;
}

#app {
    min-height: calc(100dvh - 72px);
}

@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }
}

#category-filter-bar {
    position: relative;
    z-index: 20;
}

#trending-sidebar {
    display: none !important;
}

@media (max-width: 900px) {
    #category-filter-bar {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
}


/* Step 10.2 — image clarity + hero space optimization */
.hero-card,
.story-image {
    background-repeat: no-repeat;
    filter: none !important;
    transform: translateZ(0);
}

.hero-image-card {
    height: clamp(260px, 42vh, 430px);
    background-size: cover;
}

.story-image.image-lowres {
    background-size: contain;
    background-color: #09090b;
}

.story-image.image-lowres::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    z-index: 0;
}

.story-image.image-lowres > * {
    position: relative;
    z-index: 1;
}

.news-card .story-image {
    background-position: center center;
}

@media (min-width: 1024px) {
    .stories-section + .stories-section {
        padding-top: 1.25rem;
    }
}

@media (max-width: 900px) {
    .hero-image-card {
        height: clamp(240px, 36vh, 340px);
    }
}