/* 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: clamp(620px, 52vw, 760px);
    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%; }
}