/*
Theme Name: AllPOP Minimal Blue
Theme URI: https://allpop.mp3
Author: ALLPOP.MP3
Author URI: https://allpop.mp3
Description: Minimal, professional news theme for ALLPOP.MP3 — blue/white, ultra-fast, mobile-first. No featured images in lists, long excerpts, collapsible right-aligned navbar on desktop and mobile, Instagram updates page, and clean widgets.
Version: 1.9.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allpop-minimal-blue
Tags: minimal, news, magazine, blog, accessibility-ready, responsive-layout, blue
*/
:root{
  --bg:#ffffff;
  --fg:#0b1220;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-600:#1e40af;
  --border:#e5e7eb;
  --soft:#f8fafc;
  --radius:18px;
  --maxw: 1100px;
  --sidebar: 320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  line-height:1.7; font-size:16px;
}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-600); text-decoration:underline}
img, iframe, video{max-width:100%; height:auto}
.container{max-width:var(--maxw); margin:0 auto; padding:16px}
.layout{display:grid; grid-template-columns: 1fr; gap:24px}
.content{min-width:0}
@media(min-width: 1024px){ .layout{grid-template-columns: minmax(0,1fr) var(--sidebar);} }

/* Header & Navbar */
.site-header{border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:60}
.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:40px; height:40px; display:flex; align-items:center; justify-content:center}
.logo img{width:100%; height:100%; object-fit:contain}
.branding h1{font-size:22px; margin:0; line-height:1}
.branding .tagline{margin:2px 0 0; color:var(--muted); font-size:13px}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer}
.nav-wrap{position:relative}
.nav{display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; min-width:260px; box-shadow:0 10px 30px rgba(2,6,23,.08)}
.nav.show{display:block}
.nav a{display:block; padding:10px 12px; border-radius:10px}
.nav a:hover{background:var(--primary); color:#fff; text-decoration:none}
/* Desktop behaviour: still collapsible, right-aligned */
@media(min-width:1024px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* Ticker removed to simplify */

/* Cards & lists */
.card{padding:20px; border:1px solid var(--border); border-radius:16px; background:#fff; transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:0 14px 30px rgba(2,6,23,.06); border-color:#d1d5db}
.post-title{margin:.1rem 0 0; font-size:1.6rem; line-height:1.25; overflow-wrap:anywhere}
.meta{color:var(--muted); font-size:14px; margin:6px 0 12px}
.entry{overflow-wrap:anywhere; word-break:break-word}
.posts-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:640px){ .posts-grid{grid-template-columns: 1fr 1fr} }
@media(min-width:1024px){ .posts-grid{grid-template-columns: 1fr 1fr 1fr} }

/* Sidebar widgets */
.sidebar .widget{padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--soft)}
.sidebar .widget + .widget{margin-top:16px} /* spacing between Trending and Categories */
.sidebar .widget-title{margin:0 0 10px; font-size:1.1rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:24px 0; color:var(--muted); font-size:14px}
.socials{display:flex; gap:12px; flex-wrap:wrap}
.socials a{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff}
.socials a:hover{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Mobile adjustments */
@media(max-width:640px){
  .branding h1{font-size:20px}
  .branding .tagline{font-size:12px}
  .sidebar .widget.follow, .sidebar .widget.search { display:none; } /* hide follow/search on mobile */
  /* Instagram embeds: ensure full height */
  .entry iframe[src*="instagram.com"], .entry .instagram-media{min-height:780px}
}


/* ==== v1.10 Header & Navbar tweaks ==== */
.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; padding:12px 0}
.brand .brand-text{display:flex; flex-direction:column; gap:2px}
.site-title{margin:0; line-height:1}
.site-description{margin:0; color:var(--muted); font-size:13px}
.logo{width:40px; height:40px; border-radius:8px; background:none}
.logo img{width:100%; height:100%; object-fit:contain; display:block}
.nav{display:none; flex-direction:column; gap:8px; padding:8px 16px 16px}
.nav a{padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#fff}
.nav.show{display:flex}
.nav-toggle{border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer}
@media(min-width:1024px){
  .nav{display:none; position:absolute; right:16px; top:72px; width:auto; min-width:320px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px rgba(2,6,23,.08);}
  .nav.show{display:flex}
}

/* Recommended horizontal cards */
.section-heading{font-size:1.1rem; color:#0b1220; margin:8px 0 10px}
.hlist{display:flex; flex-direction:column; gap:12px}
.hcard{display:flex; gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fff; align-items:flex-start}
.hcard .meta{margin:0 0 6px 0}
.hcard .content{min-width:0}
.hcard .title{font-size:1.05rem; margin:0 0 6px 0}
.hcard .excerpt{color:#374151; font-size:.95rem}

/* Ensure no featured images used: but support thumbnail container if present */
.hthumb{flex:0 0 96px; height:64px; border-radius:10px; background:#f1f5f9; display:none}

/* Post content long-excerpt styling */
.entry p{margin-top:0}

/* Instagram embed full height */
.entry blockquote.instagram-media,
.entry .instagram-media,
.entry iframe[src*="instagram.com"]{
  max-width:100% !important; width:100% !important; height:auto !important;
}
@media(max-width:640px){
  .entry blockquote.instagram-media,
  .entry .instagram-media,
  .entry iframe[src*="instagram.com"]{
    min-height: 125vw; /* typical portrait ratio */
  }
}

/* Sidebar spacing */
.sidebar .widget{margin-bottom:14px}
@media(max-width:640px){
  .sidebar .widget.follow, .sidebar .widget.search { display:none; }
}

/* Space between trending & categories */
.sidebar .widget + .widget{margin-top:16px}

/* Content overflow guard */
.entry{overflow-wrap:anywhere; word-break:break-word}
img, iframe, video{max-width:100%}

/* Remove skip link remnants */
.skip-link{display:none!important}


/* ===== v1.10a: navbar dropdown & share boxes (ONLY) ===== */
/* Navbar dropdown layout refinement (no other navbar changes) */
.nav-menu{position:relative}
.nav-menu .nav-list{
  list-style:none; margin:0; padding:0;
  display:none; position:absolute; right:0; top:44px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 16px 40px rgba(2,6,23,.12); min-width:260px;
}
.nav-menu.open .nav-list{ display:flex; flex-direction:column; align-items:stretch; }
.nav-list li{margin:0; padding:0}
.nav-list li a{
  display:block; padding:12px 16px; line-height:1.4;
}
.nav-list li + li a{ border-top:1px solid #eef2f7; }
.nav-list li a:hover{ background:var(--soft); text-decoration:none; }

/* Share group as distinct cards */
.share-group{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px; padding:12px;
  border:1px solid var(--border); border-radius:16px; background:#fff;
}
.share-item{
  border:1px solid var(--border); border-radius:14px; background:#fff;
  padding:8px;
}
.share-item .btn.share{
  width:100%; justify-content:center;
  border:0; border-radius:10px; padding:10px 12px;
}
.share-item .btn.share:hover{ background:var(--primary); color:#fff; }


/* ===== v1.10b: ensure desktop sees new dropdown & layering ===== */
.nav { position: relative; }
.nav-menu { position: relative; z-index: 1000; }
.nav-toggle { display: inline-flex; align-items:center; justify-content:center; }
@media(min-width:1024px){
  .nav-menu .nav-list{ top: 48px; right: 0; }
  .nav-menu.open .nav-list{ display:flex; }
}


/* ===== v1.10c: Fix navbar bullets & share boxes ===== */
/* NAVBAR: remove bullets/markers, tidy spacing, prevent overlong buttons */
.nav-menu .nav-list{ list-style:none; margin:0; padding:0; width:max-content; min-width:200px; }
.nav-menu .nav-list li{ list-style:none; margin:0; padding:0; }
.nav-menu .nav-list li::marker{ content:''; }
.nav-list li a{
  display:block; padding:10px 14px; line-height:1.4; white-space:nowrap;
  border-radius:10px;
}
.nav-list li + li a{ border-top:1px solid #eef2f7; }
.nav-list li a:hover{ background:var(--soft); text-decoration:none; }

/* SHARE: make boxes even if markup hasn't changed */
.share-group{
  display:flex; flex-wrap:wrap; gap:12px;
  border:1px solid var(--border); border-radius:16px; padding:12px; background:#fff;
}
.share-group > a, .share-group > button, .share-group .btn.share{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border:1px solid var(--border);
  border-radius:12px; background:#fff; cursor:pointer;
}
.share-group > a:hover, .share-group > button:hover, .share-group .btn.share:hover{
  background:var(--primary); color:#fff; border-color:var(--primary);
}


/* ===== v1.14: research-driven readability tweaks ===== */
/* Body text size per BBC GEL: keep 16–18px via root and spacing consistent */
:root{ --reading-width: 72ch; }

/* Single article readable width */
.single .entry{ max-width: var(--reading-width); }
.single .entry p{ line-height:1.8; margin:0 0 1rem; }

/* Listing cards: keep compact but comfortable */
.card .entry p{ line-height:1.7; }

/* Tweak grid breakpoints to mirror modern news patterns */
@media(min-width: 740px){ .posts-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width: 1024px){ .posts-grid{ grid-template-columns: 2fr 2fr 2fr; } }

/* Navbar dropdown polish */
.nav-list li a{ padding:12px 16px; }
.nav-list li a:hover{ background:#f6f8fb; }


/* ===== v1.15: holistic polish ===== */
:root{
  --hero-gap: 16px;
  --chip-bg: #eef2ff;
  --chip-txt: #1e40af;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ padding:8px 0; }
.nav{ gap:10px; }
.nav-toggle{height:40px; min-width:44px}

.hero{
  display:grid; gap:var(--hero-gap);
}
@media(min-width: 768px){
  .hero{ grid-template-columns: 2fr 1fr; }
}
.hero .hero-main, .hero .hero-side article{ border:1px solid var(--border); border-radius:18px; background:#fff; padding:16px; }
.hero .hero-main h2{ font-size:clamp(22px, 4vw, 34px); line-height:1.15; margin:0 0 8px; }
.hero .hero-main .meta{ margin-bottom:10px }
.hero .hero-side{ display:grid; gap:var(--hero-gap) }
.hero .hero-side h3{ font-size:clamp(18px, 2.6vw, 22px); margin:0 0 6px }

/* Category chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px }
.chip{ font-size:12px; padding:4px 10px; border-radius:999px; background:var(--chip-bg); color:var(--chip-txt); border:1px solid #c7d2fe }

/* Card polish */
.card{ transition:transform .08s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(2,6,23,.08); }

/* Breadcrumbs (single) */
.breadcrumbs{ font-size:13px; color:var(--muted); margin:0 0 8px }
.breadcrumbs a{ color:inherit; text-decoration:none }
.breadcrumbs a:hover{ text-decoration:underline }

/* Ensure no overflow anywhere */
.entry, .card, .content{ min-width:0 }
.entry img, .entry video{ height:auto; max-width:100% }

/* Dark mode (opt-in via prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --fg:#e5eaf3; --soft:#0f172a; --border:#1e293b;
    --chip-bg:#172554; --chip-txt:#bfdbfe;
  }
  body{ background:var(--bg); color:var(--fg) }
  .card, .hero .hero-main, .hero .hero-side article{ background:#0b1325; border-color:#1f2a3a }
  .nav-list{ background:#0b1325 }
  .nav-list li + li a{ border-color:#1e2430 }
  .search-form input[type="search"]{ background:#0b1325; color:var(--fg) }
  .share-group{ background:#0b1325 }
}


/* ==== v1.16 Pond tweaks (2025-08-13) ==== */

/* 1) Remove navbar entirely (desktop & mobile) */
.site-header .nav-toggle,
.site-header .nav,
.nav-toggle{ display:none !important; }
#site-nav{ display:none !important; }

/* 2) Mobile logo/brand padding-left so it doesn't hug the edge */
@media (max-width: 640px){
  .site-header .toprow{ padding-left:10px; }
  .site-header .brand{ padding-left:6px; }
  .site-header .logo{ margin-left:2px; }
}

/* 3) Home: make "Recommended for you" and "Top Viewed" cohesive */
.card > h2.post-title{ margin: 4px 0 10px; font-size: 1.35rem; }
.hscroll{ gap:16px; }
.hcard{
  border:1px solid var(--border);
  background:var(--soft);
  border-radius:16px;
  padding:14px;
  display:block;
  text-decoration:none;
}
.hcard .hcard-title{ display:block; font-weight:600; line-height:1.35; }
.hcard:hover{ border-color:#d1d5db; box-shadow:0 10px 24px rgba(2,6,23,.06); }
.card > .hscroll, .card > .posts-grid{ margin-top:12px; }

/* Hide any form of view counters in lists just in case */
.topview [class*="view"], .topview .views, .topview .hcard-meta,
.posts-grid [class*="view"], .posts-grid .views{ display:none !important; }

/* 4) Single post: shrink share buttons & add space from content */
.share-group{
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:8px; padding:8px;
  border-radius:12px;
  margin-bottom:14px; /* extra space before the article body */
}
.share-group > a, .share-group > button, .share-group .btn.share{
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
  line-height:1.2;
}
.share-group .btn#copyLink{ white-space:nowrap; }

/* v1.16b Pond combined card */
.card.suggest{ margin-top:26px; }
.suggest-sections{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:1024px){ .suggest-sections{ grid-template-columns: 2fr 1fr; } }
.subhead{ font-size:1.05rem; margin: 2px 0 8px; color:var(--muted); }

/* Top list with ranks */
.top-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.top-item .top-link{
  display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--soft); text-decoration:none;
}
.top-item .top-link:hover{ border-color:#d1d5db; box-shadow:0 10px 24px rgba(2,6,23,.06); }
.rank-badge{
  min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--border); font-weight:700;
}
.top-item .title{ line-height:1.3; font-weight:600; }

/* Emphasize ranks 1-3 */
.top-item:nth-child(1) .rank-badge{ border-width:2px; }
.top-item:nth-child(2) .rank-badge{ border-width:2px; }
.top-item:nth-child(3) .rank-badge{ border-width:2px; }

/* Extra breathing room from previous card above */
.card + .card.suggest{ margin-top:28px; }


/* --- Home Slider tidy --- */
.home-slider{position:relative; overflow:hidden; padding:18px}
.home-slider .slides{position:relative; min-height:150px}
.home-slider .slide{display:none; animation:fadeIn 220ms ease}
.home-slider .slide.is-active{display:block}
.home-slider .post-title{font-size:1.25rem; line-height:1.3}
.home-slider .entry{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:.95}
.home-slider .slider-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.home-slider .slider-dots{display:flex; gap:8px; align-items:center}
.home-slider .dot{width:12px; height:12px; display:inline-block; padding:0; line-height:0;
  border-radius:9999px; border:2px solid var(--fg); background:transparent; opacity:.45;
  box-sizing:border-box; aspect-ratio:1 / 1; transition:transform .15s ease, background-color .15s ease, border-color .15s ease;}
.home-slider .dot.is-active{opacity:1; background:var(--fg); transform:scale(1.05);}
.home-slider .button.view-all{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:10px; text-decoration:none}

.posts-grid .entry{display:block; opacity:.95}

/* Recommend & Top layout */
.suggest-top .suggest-wrap{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:768px){ .suggest-top .suggest-wrap{grid-template-columns: 1fr 1fr} }
.suggest-top .subhead{margin:0 0 8px; color:var(--muted); font-size:.95rem}
.suggest-top .recommend-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.suggest-top .recommend-list li{padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--soft)}
.suggest-top .top-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.suggest-top .top-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--soft)}
.suggest-top .badge{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; border:1px solid var(--border); font-weight:700; font-size:.85rem}
.suggest-top .top-1{border-color:#e1b200; background:linear-gradient(0deg, rgba(225,178,0,.07), transparent)}
.suggest-top .top-2{border-color:#a0a3ad; background:linear-gradient(0deg, rgba(160,163,173,.07), transparent)}
.suggest-top .top-3{border-color:#cd7f32; background:linear-gradient(0deg, rgba(205,127,50,.07), transparent)}

@keyframes fadeIn{from{opacity:.3; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ===== Home Slider Highlight (distinct from posts grid) ===== */
.home-slider.card{
  background: linear-gradient(180deg, rgba(37,99,235,0.06), #ffffff);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 22px;
  box-shadow: 0 16px 30px rgba(37,99,235,0.08);
  position: relative;
  overflow: hidden;
}
.home-slider.card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:6px; width:100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-600));
  opacity:0.9;
}
.home-slider .post-title{ font-size:1.4rem; line-height:1.25; }
.home-slider .dot{width:12px; height:12px; display:inline-block; padding:0; line-height:0;
  border-radius:9999px; border:2px solid var(--fg); background:transparent; opacity:.45;
  box-sizing:border-box; aspect-ratio:1 / 1; transition:transform .15s ease, background-color .15s ease, border-color .15s ease;}
.home-slider .dot.is-active{opacity:1; background:var(--fg); transform:scale(1.05);}
.home-slider .button.view-all{
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.home-slider .button.view-all:hover{
  background: var(--primary-600);
  color: #ffffff;
  border-color: var(--primary-600);
}
.home-slider{ margin-bottom: 12px; }
.home-slider .entry{ opacity: 1; }

/* === Add spacing between posts grid and Recommended & Top section === */
.suggest-top{ margin-top: 30px; }

/* ===== COMEBACK Highlight Ticker ===== */
.comeback-ticker{
  background: linear-gradient(180deg, rgba(37,99,235,.08), #ffffff);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 22px;
  padding: 12px 16px;
  margin: 18px 0 22px;
  box-shadow: 0 16px 30px rgba(37,99,235,.10);
}

.comeback-ticker .tick{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  white-space: nowrap;
  text-decoration: none;
}
.comeback-ticker .tick:hover{
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
}
.comeback-ticker .tick .tick-title{
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  color: var(--fg);
  display:inline-block;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comeback-ticker .blink-badge{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  position: relative;
  animation: cb-blink 1.2s steps(2, jump-none) infinite;
  box-shadow: 0 0 0 0 rgba(37,99,235,.6);
}
@keyframes cb-blink{ 50%{ opacity:.25; } }
.comeback-ticker + .posts-grid{ margin-top: 16px; }

@media(max-width: 640px){
  .comeback-ticker{ padding: 10px 12px; }
  .comeback-ticker .tick{ height: 34px; padding: 6px 10px; }
  .comeback-ticker .tick .tick-title{ max-width: 40ch; font-size: .95rem; }
}

/* === Scrolling effect for comeback ticker === */
.comeback-ticker .ticker-track{
  display: flex;
  gap: 20px;
  animation: ticker-scroll 25s linear infinite;
  will-change: transform;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.comeback-ticker{
  overflow: hidden;
}

/* === Spotify Embed Styling === */
.spotify-embed-wrap{
  margin: 30px 0;
  overflow: hidden;
}
.spotify-embed-wrap iframe{
  width: 100%;
  max-width: 100%;
  height: 352px;
}
@media(max-width: 640px){
  .spotify-embed-wrap iframe{
    height: 300px;
  }
}


.spotify-embed{
  margin: 22px 0 26px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
}
.spotify-embed .spotify-frame-wrap{
  width: 100%;
  /* Responsive height: keep nice aspect with cards */
  aspect-ratio: 16 / 9;
  min-height: 240px;
  max-height: 420px;
}
@media(min-width: 1024px){
  .spotify-embed .spotify-frame-wrap{ aspect-ratio: 5 / 2; min-height: 280px; }
}
/* Ensure proper spacing relative to neighboring sections */
.posts-grid + .spotify-embed{ margin-top: 24px; }
.spotify-embed + .suggest-top{ margin-top: 26px; }

/* === Spotify Embed Wrapper === */
.spotify-embed-wrapper{
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 0;
  overflow: hidden;
}
.spotify-embed-wrapper iframe{
  width: 100%;
  height: 352px;
  min-height: 300px;
  border: none;
}
@media(max-width: 768px){
  .spotify-embed-wrapper iframe{
    height: 300px;
  }
}


/* ===== Mobile-only tuning for Spotify embed spacing/height ===== */
@media (max-width: 640px){
  /* tighten the card padding so the player fits the card without big white space */
  .spotify-embed.card{ padding: 10px 12px; }

  /* shorter height for mobile so it matches surrounding grid cards */
  .spotify-embed .embed-wrap{ height: 240px; }

  /* ensure the iframe fills wrapper exactly */
  .spotify-embed .embed-wrap iframe{ display:block; width:100%; height:100%; }

  /* balanced spacing with neighbors on mobile */
  .posts-grid + .spotify-embed{ margin-top: 16px; }
  .spotify-embed + .suggest-top{ margin-top: 16px; }
}


/* === Spotify Embed: responsive centering & tighter heights === */
.posts-grid + .spotify-embed{ margin-top: 18px; }
.spotify-embed{ background:#fff; padding:12px 12px; }
.spotify-embed .embed-wrap{
  position: relative;
  width: 100%;
  max-width: 860px;   /* center to match grid rhythm on desktop */
  height: 280px;      /* desktop tighter height */
  margin: 0 auto;     /* center */
  overflow: hidden;
}
.spotify-embed .embed-wrap iframe{
  display:block;
  width:100%;
  height:100%;
}

/* Tablet */
@media (max-width: 1024px){
  .spotify-embed .embed-wrap{ max-width: 720px; height: 260px; }
}

/* Mobile */
@media (max-width: 640px){
  .spotify-embed .embed-wrap{ max-width: 100%; height: 220px; }
}

/* space before next section */
.spotify-embed + .suggest-top{ margin-top: 16px; }


/* === Footer layout: pages left, social icons right === */
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-left{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:14px;
}
.footer-left a{
  color:var(--fg);
  text-decoration:none;
}
.footer-left a:hover{
  text-decoration:underline;
}
.footer-right.socials{
  display:flex;
  gap:10px;
}
.footer-right.socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}