/* ──────────────────────────────────────────────────────────────────────────
 * TMOHentai — adaptive design overlay
 * Loaded LAST after tmohentai.css + tmohentai-polish.css so it wins the
 * cascade. Fixes layout bugs (duplicate .tmo-card aspect 3/4) and rewrites
 * the responsive system mobile-first with fluid typography + better touch
 * targets.
 * ────────────────────────────────────────────────────────────────────────── */

/* ====================================================================
   0. FLUID TYPOGRAPHY TOKENS
   ==================================================================== */
:root {
    --tmoh-fs-2xs: clamp(10px, 0.4vw + 9px, 12px);
    --tmoh-fs-xs:  clamp(11px, 0.5vw + 10px, 13px);
    --tmoh-fs-sm:  clamp(12px, 0.6vw + 11px, 14px);
    --tmoh-fs-md:  clamp(14px, 0.7vw + 12px, 16px);
    --tmoh-fs-lg:  clamp(16px, 1vw   + 13px, 19px);
    --tmoh-fs-xl:  clamp(19px, 1.4vw + 14px, 24px);
    --tmoh-fs-2xl: clamp(22px, 2.2vw + 16px, 32px);

    --tmoh-sp-xs:  clamp(4px,  0.4vw + 3px, 6px);
    --tmoh-sp-sm:  clamp(6px,  0.6vw + 4px, 10px);
    --tmoh-sp-md:  clamp(10px, 1vw   + 6px, 16px);
    --tmoh-sp-lg:  clamp(14px, 1.6vw + 9px, 24px);

    --tmoh-touch:  44px;  /* Apple HIG / Material min touch target */
}

/* ====================================================================
   1. CARD — fix duplicate aspect-ratio bug + clean overlay
   The legacy duplicate at line ~1796 of tmohentai.css forces
   aspect-ratio: 3/4 on .tmo-card AND remaps .tmo-card-cover to
   width/height:100% (img-style). Reset both to the correct model.
   ==================================================================== */
.tmo-card.tmo-fade,
.tmo-card {
    aspect-ratio: auto !important;   /* let the cover dictate height */
    background: var(--tmo-bg-2);
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tmo-ink) !important;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.32);
}
.tmo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* Cover takes a fixed 2:3 portrait. Image fills via object-fit. */
.tmo-card-cover,
.tmo-card > .tmo-card-cover {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    background: var(--tmo-bg-3);
    overflow: hidden;
    display: block;
}
.tmo-card-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.tmo-card:hover .tmo-card-cover img { transform: scale(1.05); }

/* Bottom-fade behind title */
.tmo-card-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ====================================================================
   2. CARD TITLE — bottom overlay, line-clamp 2, fluid font
   The legacy duplicate puts the title TOP-left with linear-gradient;
   we move it to the BOTTOM for a cleaner movie-poster look that scales.
   ==================================================================== */
.tmo-card-title {
    position: absolute !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: var(--tmoh-fs-sm) !important;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 2;
}

/* Type pill — top-left, smaller on mobile */
.tmo-card-type {
    font-size: var(--tmoh-fs-2xs) !important;
    padding: 3px 8px !important;
    min-height: 22px;
    z-index: 2;
}

/* Rating chip — top-right */
.tmo-card-rating {
    font-size: var(--tmoh-fs-2xs) !important;
    padding: 3px 7px !important;
    z-index: 2;
}

/* ====================================================================
   3. GRID — mobile-first columns + fluid gaps
   ==================================================================== */
.tmo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--tmoh-sp-sm) !important;
    padding: var(--tmoh-sp-sm) !important;
}
@media (min-width: 480px)  { .tmo-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 720px)  { .tmo-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1024px) { .tmo-grid { grid-template-columns: repeat(5, 1fr) !important; } }
@media (min-width: 1440px) { .tmo-grid { grid-template-columns: repeat(6, 1fr) !important; } }
@media (min-width: 1800px) { .tmo-grid { grid-template-columns: repeat(7, 1fr) !important; } }

/* ====================================================================
   4. PAGE CONTAINERS — fluid horizontal padding
   ==================================================================== */
.tmo-container,
.tmo-row,
.tmo-sm-page,
.tmoh-genres {
    padding-left: var(--tmoh-sp-md);
    padding-right: var(--tmoh-sp-md);
}
@media (min-width: 1024px) {
    .tmo-container, .tmo-row { max-width: 1280px; margin: 0 auto; }
}
@media (min-width: 1600px) {
    .tmo-container, .tmo-row { max-width: 1480px; }
}

/* ====================================================================
   5. NAVBAR — logo size + nav collapse
   ==================================================================== */
.tmo-navbar {
    height: clamp(50px, 5vw + 36px, 64px) !important;
}
.tmo-brand { font-size: var(--tmoh-fs-lg); }
.tmo-nav a, .tmo-nav-right a { font-size: var(--tmoh-fs-sm); }

@media (max-width: 820px) {
    .tmo-nav a {
        padding: 14px 18px !important;
        min-height: var(--tmoh-touch);
        display: flex; align-items: center;
    }
}

/* Mobile search width — let it shrink */
@media (max-width: 1100px) { .tmo-nav-search { min-width: 140px; max-width: 200px; } }
@media (max-width: 900px)  { .tmo-nav-search { max-width: 130px; } }

/* ====================================================================
   6. ARCHIVE TOOLBAR — horizontal scroll on narrow
   ==================================================================== */
.tmo-archive-toolbar {
    flex-wrap: wrap;
    padding: var(--tmoh-sp-sm) var(--tmoh-sp-md);
    gap: var(--tmoh-sp-sm);
}
.tmo-archive-toolbar .left,
.tmo-archive-toolbar .right {
    gap: var(--tmoh-sp-xs);
}
@media (max-width: 600px) {
    .tmo-archive-toolbar { flex-wrap: nowrap; overflow-x: auto; }
    .tmo-archive-toolbar::-webkit-scrollbar { display: none; }
    .tmo-archive-toolbar .left,
    .tmo-archive-toolbar .right { flex-wrap: nowrap; flex-shrink: 0; }
}

/* Sort/filter pills — touch target compliance + fluid font */
.tmo-genre-pill {
    font-size: var(--tmoh-fs-xs) !important;
    padding: 8px 12px !important;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .tmo-genre-pill { min-height: 38px; padding: 8px 14px !important; }
    .tmo-genre-pill .hide-on-mobile { display: none; }
}

/* ====================================================================
   7. PANEL HEADER — fluid title
   ==================================================================== */
.tmo-panel-head {
    font-size: var(--tmoh-fs-md);
    padding: var(--tmoh-sp-sm) var(--tmoh-sp-md) !important;
    min-height: 44px;
    display: flex; align-items: center; gap: 8px;
}
.tmo-panel-head.accent { font-weight: 700; }
.tmo-panel-head i { font-size: 1em; }

/* ====================================================================
   8. SINGLE-MANGA — fluid cover, sticky bottom-bar on mobile
   ==================================================================== */
.tmo-sm-page { padding-top: var(--tmoh-sp-md); padding-bottom: 80px; }
.tmo-sm-grid {
    grid-template-columns: minmax(220px, 280px) 1fr !important;
    gap: var(--tmoh-sp-lg) !important;
}
@media (max-width: 820px) {
    .tmo-sm-grid { grid-template-columns: 1fr !important; }
    .tmo-sm-cover-wrap {
        max-width: clamp(180px, 50vw, 260px);
        margin: 0 auto;
    }
}
.tmo-sm-title { font-size: var(--tmoh-fs-xl); line-height: 1.2; }
.tmo-sm-meta  { font-size: var(--tmoh-fs-sm); }

/* ====================================================================
   9. PAGINATION — bigger taps on mobile
   ==================================================================== */
.tmo-pagination {
    gap: 4px;
    padding: var(--tmoh-sp-md) 0;
    flex-wrap: wrap;
    justify-content: center;
}
.tmo-pagination a,
.tmo-pagination span {
    min-width: var(--tmoh-touch);
    height: var(--tmoh-touch);
    padding: 0 14px;
    font-size: var(--tmoh-fs-sm);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 480px) {
    .tmo-pagination a,
    .tmo-pagination span {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
    }
    /* hide deep page links — keep prev/current/next */
    .tmo-pagination .page-numbers:not(.prev):not(.next):not(.current):not(.dots) { display: none; }
    .tmo-pagination .page-numbers.current { display: inline-flex; }
}

/* ====================================================================
   10. COMMENTS — touch targets + fluid spacing
   ==================================================================== */
.tmo-cmts-form textarea { font-size: var(--tmoh-fs-sm); min-height: 88px; }
.tmo-cmts-btn,
.tmo-cmts-btn-primary,
.tmo-cmts-btn-cancel {
    min-height: var(--tmoh-touch);
    font-size: var(--tmoh-fs-sm);
    padding: 0 16px;
}

/* ====================================================================
   11. GENRE INDEX PAGE — already responsive, just sync tokens
   ==================================================================== */
.tmoh-genres-head h1 { font-size: var(--tmoh-fs-xl); }
.tmoh-genres-head p  { font-size: var(--tmoh-fs-sm); }
.tmoh-genres-search input { height: var(--tmoh-touch); font-size: var(--tmoh-fs-sm); }
.tmoh-genres-az a {
    min-width: var(--tmoh-touch);
    height: var(--tmoh-touch);
    font-size: var(--tmoh-fs-sm);
}
.tmoh-genres-list a {
    min-height: 34px;
    padding: 6px 11px !important;
    font-size: var(--tmoh-fs-xs);
}
@media (max-width: 480px) {
    .tmoh-genres-az a { min-width: 36px; height: 36px; }
    .tmoh-genres-list a { min-height: 36px; }
}

/* ====================================================================
   12. PREVENT HORIZONTAL OVERFLOW EVERYWHERE
   ==================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* Allow modal/dialog content to escape */
.tmo-sm-cover, .tmo-card-cover, .preview-thumb { max-width: none; }

/* ====================================================================
   13. ACCESSIBILITY — focus rings, reduced motion
   ==================================================================== */
.tmo-card:focus-visible,
.tmo-genre-pill:focus-visible,
.tmo-cmts-btn:focus-visible {
    outline: 2px solid var(--tmo-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .tmo-card, .tmo-card-cover img, .tmo-fade,
    .tmo-sm-section, .tmo-home-panel {
        transition: none !important;
        animation: none !important;
    }
}

/* ====================================================================
   14. SCROLLBAR — thinner on mobile to save space
   ==================================================================== */
@media (max-width: 768px) {
    body.tmo-theme ::-webkit-scrollbar { width: 6px; height: 6px; }
}