/* =====================================================
   TALLYPRIMEGURU — Homepage Styles
   Fixed: Full width, No extra margin/padding
   Colors: #1e73be | #DF8B1B
   ===================================================== */

/* ── ROOT VARIABLES ─────────────────────────────── */
#tpg-homepage {
    --blue:      #1e73be;
    --blue-dk:   #155a96;
    --blue-lt:   #e8f1fa;
    --orange:    #DF8B1B;
    --orange-lt: #fef6e7;
    --text:      #1a1a1a;
    --bg:        #f0f2f5;
    --card-bg:   #ffffff;
    --border:    #dde3ea;
    --radius:    4px;
    --shadow:    0 1px 3px rgba(0,0,0,0.08);
    font-family: 'Noto Sans','Segoe UI',Arial,sans-serif;
    font-size:   14px;
    color:       var(--text);
    background:  var(--bg);
    line-height: 1.5;
    width:       100%;
    display:     block;
}

/* ── ASTRA OVERRIDE — FORCE FULL WIDTH ──────────── */
.home .ast-article-single,
.home .entry-content,
.home .site-content,
.home .ast-container,
.home #content,
.home .ast-primary-content-area {
    max-width:   100% !important;
    width:       100% !important;
    padding:     0    !important;
    margin:      0    !important;
}

/* ── BREAKING NEWS TICKER ───────────────────────── */
.tpg-ticker {
    display:       flex;
    align-items:   center;
    width:         100%;
    background:    #fff;
    border-top:    1px solid var(--border);
    border-bottom: 2px solid var(--blue);
    overflow:      hidden;
    height:        36px;
    box-sizing:    border-box;
}
.tpg-ticker-label {
    flex-shrink:    0;
    display:        flex;
    align-items:    center;
    gap:            6px;
    background:     var(--blue);
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding:        0 14px;
    height:         100%;
    white-space:    nowrap;
    border-right:   3px solid var(--orange);
}
.tpg-ticker-track {
    flex:        1;
    overflow:    hidden;
    height:      100%;
    display:     flex;
    align-items: center;
}
.tpg-ticker-inner {
    display:     flex;
    align-items: center;
    white-space: nowrap;
    animation:   tpg-scroll 55s linear infinite;
    will-change: transform;
}
.tpg-ticker-inner:hover { animation-play-state: paused; }
.tpg-ticker-item {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    padding:     0 10px;
    font-size:   13px;
}
.tpg-ticker-item a { color: var(--text); text-decoration: none; }
.tpg-ticker-item a:hover { color: var(--blue); }
.tpg-ticker-sep { color: #ccc; margin-left: 6px; }
@keyframes tpg-scroll {
    0%   { transform: translateX(60vw);  }
    100% { transform: translateX(-100%); }
}

/* ── MAIN WRAPPER — FULL WIDTH WITH INNER MAX ───── */
.tpg-wrap {
    width:      100%;
    max-width:  1240px;
    margin:     0 auto;
    padding:    10px 10px 24px;
    box-sizing: border-box;
}

/* ── MAIN GRID ───────────────────────────────────── */
.tpg-main-grid {
    display:               grid;
    grid-template-columns: 1fr 290px;
    gap:                   12px;
    align-items:           start;
    width:                 100%;
}

/* ── SECTION BOX ─────────────────────────────────── */
.tpg-box {
    background:    var(--card-bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow:      hidden;
    box-shadow:    var(--shadow);
    width:         100%;
    box-sizing:    border-box;
}
.tpg-box-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         7px 12px;
    border-bottom:   1px solid var(--border);
}
.tpg-head-blue   { background: var(--blue);   border-left: 5px solid var(--orange); }
.tpg-head-orange { background: var(--orange); border-left: 5px solid var(--blue);   }
.tpg-box-title {
    color:          #fff;
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.tpg-view-all {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    color:           rgba(255,255,255,0.9);
    font-size:       11px;
    font-weight:     600;
    text-decoration: none;
    background:      rgba(0,0,0,0.15);
    padding:         2px 8px;
    border-radius:   3px;
    transition:      background 0.15s;
}
.tpg-view-all:hover { background: rgba(0,0,0,0.28); color: #fff; text-decoration: none; }

/* ── COLUMN GRIDS ────────────────────────────────── */
.tpg-3col-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    width:                 100%;
}
.tpg-2col-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    width:                 100%;
}
.tpg-col {
    padding:      10px 12px;
    border-right: 1px solid var(--border);
    box-sizing:   border-box;
    min-width:    0;
}
.tpg-col:last-child { border-right: none; }
.tpg-col-title {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 6px;
    margin-bottom:  8px;
}
.tpg-col-blue   { color: var(--blue);   border-bottom: 2px solid var(--blue);   }
.tpg-col-orange { color: var(--orange); border-bottom: 2px solid var(--orange); }

/* ── POST LIST ───────────────────────────────────── */
.tpg-plist { list-style: none; margin: 0; padding: 0; }
.tpg-plist li {
    display:       flex;
    align-items:   flex-start;
    gap:           5px;
    padding:       4px 0;
    border-bottom: 1px dotted #e5e9f0;
    line-height:   1.4;
    font-size:     13px;
    min-width:     0;
}
.tpg-plist li:last-child { border-bottom: none; }
.tpg-plist a {
    color:           var(--text);
    text-decoration: none;
    flex:            1;
    min-width:       0;
    word-break:      break-word;
}
.tpg-plist a:hover { color: var(--blue); text-decoration: underline; }
.tpg-plist-sm li { font-size: 12.5px; padding: 3px 0; }
.tpg-plist-sm    { padding: 8px 10px; }

/* ── ICONS ───────────────────────────────────────── */
.tpg-chevron {
    flex-shrink: 0;
    margin-top:  3px;
    color:       var(--orange);
    width:       7px;
    height:      10px;
}

/* ── NEW BADGE ───────────────────────────────────── */
.tpg-new {
    display:        inline-block;
    background:     #d32f2f;
    color:          #fff;
    font-size:      9px;
    font-weight:    700;
    padding:        1px 5px;
    border-radius:  2px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left:    4px;
    flex-shrink:    0;
    animation:      tpg-blink 1.4s ease-in-out infinite;
}
@keyframes tpg-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── VIEW ALL BUTTON ─────────────────────────────── */
.tpg-view-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    margin:          8px 0 2px;
    font-size:       11.5px;
    font-weight:     600;
    color:           var(--blue);
    text-decoration: none;
    padding:         4px 10px;
    border:          1px solid var(--blue);
    border-radius:   3px;
    transition:      all 0.15s;
}
.tpg-view-btn:hover { background: var(--blue); color: #fff; text-decoration: none; }

/* ── HIGHLIGHTED PILLS ───────────────────────────── */
.tpg-highlights {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
    margin-bottom:         12px;
    width:                 100%;
    box-sizing:            border-box;
}
.tpg-hl-pill {
    display:         block;
    padding:         10px 12px;
    border-radius:   var(--radius);
    color:           #fff;
    font-size:       13px;
    font-weight:     600;
    line-height:     1.4;
    text-decoration: none;
    transition:      opacity 0.15s, transform 0.15s;
    box-shadow:      var(--shadow);
    word-break:      break-word;
}
.tpg-hl-pill:hover { opacity: 0.87; transform: translateY(-1px); color: #fff; text-decoration: none; }
.tpg-hl-blue   { background: var(--blue); }
.tpg-hl-orange { background: var(--orange); }
.tpg-hl-green  { background: #2e7d32; }
.tpg-hl-purple { background: #6a1b9a; }
.tpg-hl-red    { background: #c62828; }
.tpg-hl-teal   { background: #00695c; }

/* ── SIDEBAR ─────────────────────────────────────── */
.tpg-sidebar { position: sticky; top: 10px; min-width: 0; }
.tpg-sb-box  { margin-bottom: 12px; }

/* ── CATEGORIES LIST ─────────────────────────────── */
.tpg-cat-list { list-style: none; margin: 0; padding: 8px 10px; }
.tpg-cat-list li {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 0;
    border-bottom: 1px dotted #e5e9f0;
    font-size:     12.5px;
    min-width:     0;
}
.tpg-cat-list li:last-child { border-bottom: none; }
.tpg-cat-list a { flex: 1; color: var(--text); text-decoration: none; min-width: 0; }
.tpg-cat-list a:hover { color: var(--blue); }
.tpg-cat-count {
    background:    var(--blue-lt);
    color:         var(--blue);
    font-size:     10px;
    font-weight:   700;
    padding:       1px 6px;
    border-radius: 10px;
    min-width:     22px;
    text-align:    center;
    flex-shrink:   0;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════ */

/* Tablet — 1024px */
@media (max-width: 1024px) {
    .tpg-main-grid { grid-template-columns: 1fr 240px; }
    .tpg-wrap      { padding: 8px 8px 20px; }
}

/* Small tablet / Large mobile — 768px */
@media (max-width: 768px) {
    .tpg-main-grid  { grid-template-columns: 1fr; gap: 0; }
    .tpg-sidebar    { position: static; margin-top: 0; }
    .tpg-3col-grid  { grid-template-columns: 1fr; }
    .tpg-2col-grid  { grid-template-columns: 1fr; }
    .tpg-col        { border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px; }
    .tpg-col:last-child { border-bottom: none; }
    .tpg-highlights { grid-template-columns: 1fr 1fr; }
    .tpg-wrap       { padding: 6px 6px 16px; }
    .tpg-box        { margin-bottom: 8px; }
    .tpg-ticker     { height: 34px; }
}

/* Mobile — 480px */
@media (max-width: 480px) {
    .tpg-highlights   { grid-template-columns: 1fr; }
    .tpg-wrap         { padding: 5px 5px 12px; }
    .tpg-plist li     { font-size: 12.5px; }
    .tpg-plist-sm li  { font-size: 12px; }
    .tpg-box-title    { font-size: 12px; }
    .tpg-ticker-label { padding: 0 10px; font-size: 10px; }
    .tpg-ticker-item  { font-size: 12px; }
}

/* Focus accessibility */
#tpg-homepage a:focus-visible {
    outline:        2px solid var(--blue);
    outline-offset: 2px;
    border-radius:  2px;
}