/* TarinShow plugin-owned homepage — 1.2.1 */

/*
 * The homepage is intentionally independent from the theme's content
 * container. The content width is centered by the plugin itself.
 * This avoids alignment drift caused by theme/header containers.
 */
.ts-homepage {
    --ts-home-content-width: min(760px, 52vw);
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

.ts-home-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 28px;
    padding: 58px 20px 52px;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.20), transparent 32%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.14), transparent 34%), linear-gradient(135deg, #171717 0%, #302020 48%, #171717 100%);
    color: #fff;
    box-sizing: border-box;
}

.ts-home-align-frame {
    width: var(--ts-home-content-width);
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.ts-home-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.ts-home-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -90px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255, 87, 87, .16);
}

.ts-home-kicker { display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; padding:6px 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08); font-size:13px; font-weight:700; }
.ts-home-hero h1 { margin:0; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.35; font-weight:800; letter-spacing:-1px; }
.ts-home-intro { max-width:700px; margin:18px auto 0; color:rgba(255,255,255,.86); font-size:16px; line-height:2; }
.ts-home-highlights { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:24px; }
.ts-home-highlights span { display:inline-flex; align-items:center; min-height:36px; padding:7px 13px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.09); color:#fff; font-size:13px; font-weight:600; }

.ts-home-topics-section { width:100%; margin:0; padding:0 0 45px; box-sizing:border-box; }
.ts-home-section-head { display:flex; align-items:end; justify-content:space-between; gap:15px; padding:0; }
.ts-home-section-head h2 { margin:0; font-size:25px; line-height:1.5; font-weight:800; }
.ts-home-section-head p { margin:4px 0 0; color:#777; font-size:14px; }
.ts-home-topics-section .ts-topics-grid { width:100%; max-width:100%; padding-top:18px; box-sizing:border-box; }

@media (max-width: 900px) {
    .ts-homepage { --ts-home-content-width:min(760px, calc(100vw - 32px)); }
    .ts-home-align-frame { max-width:100%; width:100%; }
}

@media (max-width: 600px) {
    .ts-homepage { --ts-home-content-width:calc(100vw - 24px); }
    .ts-home-align-frame { width:100%; max-width:100%; }
    .ts-home-hero { margin-bottom:18px; padding:42px 16px 38px; }
    .ts-home-hero h1 { font-size:30px; letter-spacing:-.5px; }
    .ts-home-intro { font-size:14px; line-height:1.9; }
    .ts-home-highlights span { font-size:12px; padding:6px 10px; }
    .ts-home-section-head { padding:0 10px; }
    .ts-home-section-head h2 { font-size:21px; }
    .ts-home-topics-section > .ts-home-align-frame { width:100%; }
}

/* 1.3.0 — compact general ranking hero */
.ts-home-hero {
    min-height: 230px;
    padding: 34px 20px 30px;
    background-color: #0b1426;
    background-image: linear-gradient(90deg, rgba(8,19,38,.97) 0%, rgba(8,19,38,.80) 52%, rgba(8,19,38,.60) 100%), url('../img/tarinshow-ranking-art.svg');
    background-size: cover;
    background-position: center;
}

.ts-home-hero::after { display:none; }
.ts-home-kicker {
    margin-bottom: 9px;
    padding: 4px 11px;
    border-color: rgba(227,160,71,.38);
    background: rgba(227,160,71,.08);
    color: #e3a047;
    font-size: 11px;
}
.ts-home-hero h1 {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.4;
    letter-spacing: -.5px;
}
.ts-home-intro {
    max-width: 650px;
    margin-top: 11px;
    font-size: 14px;
    line-height: 1.85;
}
.ts-home-highlights { gap: 7px; margin-top: 16px; }
.ts-home-highlights span {
    min-height: 31px;
    padding: 5px 10px;
    border-color: rgba(227,160,71,.20);
    background: rgba(255,255,255,.055);
    font-size: 11px;
}
.ts-home-section-head h2 { font-size: 22px; }

@media (max-width:600px) {
    .ts-home-hero { min-height: 190px; padding: 26px 14px 24px; background-position: 62% center; }
    .ts-home-hero h1 { font-size: 24px; }
    .ts-home-intro { font-size: 13px; }
    .ts-home-highlights span { font-size: 10px; }
}


/* =========================================================
   1.3.1 — Unified TarinShow navy/copper visual system
   General ranking identity: food, restaurants, tourism, health, etc.
========================================================= */
:root {
    --ts-navy: #142746;
    --ts-navy-2: #1c3558;
    --ts-copper: #c77a2b;
    --ts-gold: #e0a04a;
    --ts-page-bg: #f3f6fa;
}

.ts-homepage {
    background: var(--ts-page-bg);
    color: #1b2a40;
}

.ts-home-hero {
    min-height: 220px;
    padding: 28px 20px 24px;
    background-color: var(--ts-navy);
    background-image:
        linear-gradient(90deg, rgba(20,39,70,.97) 0%, rgba(20,39,70,.88) 50%, rgba(28,53,88,.80) 100%),
        url('../img/tarinshow-ranking-art.svg');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(224,160,74,.28);
}

.ts-home-kicker {
    margin-bottom: 7px;
    padding: 3px 10px;
    border-color: rgba(224,160,74,.42);
    background: rgba(224,160,74,.10);
    color: #e0a04a;
    font-size: 10px;
}

.ts-home-hero h1 {
    font-size: clamp(23px, 2.7vw, 34px);
    line-height: 1.4;
    letter-spacing: -.3px;
}

.ts-home-intro {
    max-width: 650px;
    margin-top: 9px;
    color: rgba(255,255,255,.84);
    font-size: 13px;
    line-height: 1.8;
}

.ts-home-highlights {
    gap: 6px;
    margin-top: 13px;
}

.ts-home-highlights span {
    min-height: 29px;
    padding: 4px 9px;
    border-color: rgba(224,160,74,.20);
    background: rgba(20,39,70,.42);
    font-size: 10px;
}

.ts-home-topics-section {
    background: var(--ts-page-bg);
    padding: 26px 0 45px;
}

.ts-home-section-head {
    padding: 0 4px;
}

.ts-home-section-head h2 {
    color: #142746;
    font-size: 21px;
    font-weight: 800;
}

.ts-home-section-head p {
    color: #69778b;
}

.ts-home-topics-section .ts-topics-grid {
    background: transparent !important;
}

@media (max-width:600px) {
    .ts-home-hero {
        min-height: 175px;
        padding: 23px 14px 20px;
    }
    .ts-home-hero h1 { font-size: 22px; }
    .ts-home-intro { font-size: 12px; }
    .ts-home-topics-section { padding-top: 21px; }
}


/* =========================================================
   1.3.2 — lighter homepage, compact hero, wide topic area
========================================================= */
.ts-homepage {
    --ts-home-content-width: min(1180px, 90vw);
    background: #f3f6fa !important;
}

.ts-home-hero {
    min-height: 190px;
    padding: 22px 20px 20px;
    background-color: #315071;
    background-image:
        linear-gradient(90deg, rgba(49,80,113,.90) 0%, rgba(57,88,120,.84) 52%, rgba(66,96,127,.76) 100%),
        url('../img/tarinshow-ranking-art.svg');
    background-size: cover;
    background-position: center;
}

.ts-home-hero-inner {
    text-align: center;
}

.ts-home-kicker {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.92);
    font-size: 12px;
    font-weight: 800;
}

.ts-home-hero h1 {
    margin-top: 18px;
    font-size: clamp(22px, 2.5vw, 31px);
    line-height: 1.45;
}

.ts-home-intro {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.8;
}

/* The three feature pills are intentionally removed from the hero. */
.ts-home-highlights {
    display: none !important;
}

.ts-home-topics-section {
    background: #f3f6fa !important;
}

.ts-home-topics-section > .ts-home-align-frame {
    width: var(--ts-home-content-width);
    max-width: var(--ts-home-content-width);
}

.ts-home-topics-section .ts-topics-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

@media (max-width: 900px) {
    .ts-homepage { --ts-home-content-width: 90vw; }
    .ts-home-align-frame,
    .ts-home-topics-section > .ts-home-align-frame {
        width: 90vw;
        max-width: 90vw;
    }
}

@media (max-width: 600px) {
    .ts-home-hero {
        min-height: 155px;
        padding: 20px 14px 18px;
    }
    .ts-home-kicker { top: 10px; right: 12px; font-size: 11px; }
    .ts-home-hero h1 { margin-top: 18px; font-size: 21px; }
    .ts-home-intro { font-size: 11px; }
    .ts-home-topics-section > .ts-home-align-frame { width: 90vw; max-width: 90vw; }
}


/* =========================================================
   1.3.3 — restore homepage desktop alignment
   GeneratePress .one-container adds 40px padding to .site-content.
   Remove that padding only on the TarinShow homepage so the custom
   homepage frame can control the width consistently.
========================================================= */
body.home.one-container .site-content,
body.front-page.one-container .site-content {
    padding: 0 !important;
}

@media (min-width: 901px) {
    .ts-homepage {
        --ts-home-content-width: min(760px, 52vw);
    }

    .ts-home-align-frame,
    .ts-home-topics-section > .ts-home-align-frame {
        width: var(--ts-home-content-width);
        max-width: var(--ts-home-content-width);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .ts-homepage {
        --ts-home-content-width: 90vw;
    }

    .ts-home-align-frame,
    .ts-home-topics-section > .ts-home-align-frame {
        width: 90vw;
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1.3.5 — lighter, narrower homepage hero */
.ts-homepage .ts-home-hero {
    width: min(700px, 92vw);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    min-height: 145px;
    padding: 15px 16px 14px;
    border-radius: 10px;
    background-color: #476887;
    background-image:
        linear-gradient(90deg, rgba(49,80,113,.66) 0%, rgba(57,88,120,.54) 52%, rgba(66,96,127,.42) 100%),
        url('../img/tarinshow-ranking-art.svg');
    background-size: cover;
    background-position: center;
}
.ts-homepage .ts-home-hero h1 {
    margin-top: 15px;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: 0;
}
.ts-homepage .ts-home-intro {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.7;
}
.ts-homepage .ts-home-kicker { font-size: 10px; }

@media (max-width: 600px) {
    .ts-homepage .ts-home-hero {
        width: 92vw;
        min-height: 125px;
        padding: 13px 12px 12px;
    }
    .ts-homepage .ts-home-hero h1 {
        margin-top: 14px;
        font-size: 17px;
    }
    .ts-homepage .ts-home-intro { font-size: 9px; }
    .ts-homepage .ts-home-kicker { font-size: 9px; }
}