/* Home sections. Section colors come from tokens (--sec) so dark mode can adapt them. */

.pep-section { padding-top: 38px; }
.pep-section.has-bg { background: var(--sec-bg); padding-bottom: 30px; margin-top: 38px; }
.section--hero { padding-top: 40px; }
.section--blog { --sec: var(--accent); --sec-ink: var(--on-accent); --close: 3px solid var(--sec); }
.section--jobs { --sec: var(--green); --sec-ink: var(--on-green); --close: 3px solid var(--sec); }
.section--economy { --sec: var(--blue); --mark: var(--blue); --close: 3px solid var(--sec); }
.section--sports { --sec: var(--green-text); }
.section--culture { --sec: var(--cyan); }
.section--flavors { --sec: var(--magenta); }
.section--magazines { --sec: var(--accent); }
.section--news, .section--recnplay, .section--columns, .section--play, .section--radio, .section--podcasts { --sec: var(--accent-text); }
.sec-close { margin-top: 38px; border-top: var(--close, 1px solid var(--border)); }

/* Section heads */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sec-head__title { font-size: 31px; font-weight: 600; line-height: 1.1; letter-spacing: -.005em; }
.sec-head__title--small { font-size: 24px; }
.sec-head__logo { max-height: 74px; width: auto; max-width: 320px; }
.sec-head__more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--sec, var(--accent-text)); white-space: nowrap; padding-right: 20px; }
.sec-head__more:hover { text-decoration: underline; }
.sec-head--bar { background: var(--sec, var(--accent)); color: var(--sec-ink, var(--on-accent)); padding: 0 24px; min-height: 54px; margin-bottom: 26px; }
.sec-head--bar .sec-head__title { font-weight: 700; }
.sec-head--bar .sec-head__more { color: var(--sec-ink, var(--on-accent)); font-weight: 700; font-size: 14px; padding-right: 0; }
.sec-head--underline { border-bottom: 4px solid var(--sec, var(--accent)); padding-bottom: 12px; margin-bottom: 26px; }
.sec-head--underline .sec-head__more { color: var(--accent-text); }
.section--economy .sec-head__title, .section--sports .sec-head__title, .section--culture .sec-head__title, .section--flavors .sec-head__title { color: var(--sec); }
.section--economy .sec-head__title, .section--culture .sec-head__title, .section--flavors .sec-head__title, .section--sports .sec-head__title { font-weight: 700; }
.section--economy .sec-head { justify-content: flex-start; gap: 36px; }
.section--economy .sec-head__more { color: var(--sec); font-weight: 700; font-size: 14px; padding: 0; margin-left: auto; }
.section--culture .sec-head__more, .section--sports .sec-head__more, .section--flavors .sec-head__more { color: var(--sec); }

/* Hero */
.hero-headline { text-align: center; margin: 0 auto 36px; max-width: 1040px; padding-top: 10px; }
.hero-headline .kicker { font-size: 17px; margin-bottom: 8px; }
.hero-headline__title { font-size: var(--fs-h1); line-height: 1.14; font-weight: 700; letter-spacing: var(--title-ls); }
.hero-headline__title a:hover { text-decoration: none; color: var(--accent-text); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: 36px var(--gap); align-items: start; }
.hero-main { min-width: 0; display: grid; gap: 32px; }
.hero-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.hero-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.card--big .card__title { font-size: 22px; line-height: 1.2; }
.card--big .card__body { padding-top: 12px; }
.card--big .subs { margin-top: 14px; }
.card--small .card__title { font-size: 18px; }
.card--small .media { aspect-ratio: 16 / 10; }
.hero-side { min-width: 0; }
.latest__title { font-size: 24px; font-weight: 600; margin: 6px 0 16px; }
.latest__list { display: grid; gap: 18px; }
.latest__item { display: flex; flex-direction: column; gap: 3px; }
.latest__link { font-size: 17.5px; font-weight: 700; line-height: 1.25; }
.latest__link:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* News / blog / jobs */
.news-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap) 40px; align-items: start; }
.news-grid.has-side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) var(--sidebar-width); }
.news-grid__list { gap: 22px; padding-top: 4px; }
.news-grid__side { min-width: 0; }
.card--feature .card__title { font-size: 19px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.blog-grid.has-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-grid .textlist, .jobs-grid .textlist { padding-top: 2px; }
.blog-grid .textlist__item, .jobs-grid .textlist__item { font-size: 17px; }
.jobs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.jobs-grid__list { grid-column: span 2; }
.jobs-grid.has-side .jobs-grid__list { grid-column: span 1; }
.jobs-grid__side { min-width: 0; }
.section--jobs .kicker { color: var(--green-text); }
.section--blog .kicker { color: var(--accent-text); }

/* Economy + quotes */
.econ-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px var(--gap); align-items: start; }
.econ-grid.has-quotes { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); }
.econ-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.section--economy .kicker { color: var(--sec); }
.quotes__title { font-size: 31px; font-weight: 700; line-height: 1.1; margin-bottom: 22px; }
.quotes__box { border: 1px solid var(--border); border-radius: 8px; padding: 14px 26px 18px; }
.quotes__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 17px; }
.quotes__list li:last-child { border-bottom: 0; }
.quotes__list strong { font-size: 14px; white-space: nowrap; }
.quotes__note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Sports */
.clubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; margin-bottom: 32px; }
.clubs.has-side { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr); }
.club__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-bottom: 0; border-radius: 6px 6px 0 0; }
.club__crest { width: 30px; height: 30px; flex: none; }
.club__crest img { width: 100%; height: 100%; object-fit: contain; }
.club__name { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.club__more { margin-left: auto; font-size: 15px; color: var(--club, var(--sec)); display: inline-flex; align-items: center; gap: 4px; }
.card--club .media { border-radius: 0 0 var(--card-radius) var(--card-radius); }
.section--sports .kicker { color: var(--sec); }
.clubs__side { min-width: 0; }
.sports-list.has-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr); gap: var(--gap); }
.sports-list__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); grid-column: span 3; }
.sports-list:not(.has-side) .sports-list__grid { grid-column: auto; }

/* Columns */
.cols-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 44px; }
.col-card { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.col-card__name { font-size: 22px; font-weight: 700; line-height: 1.15; margin-bottom: 12px; }
.col-card__name a:hover { text-decoration: none; color: var(--accent-text); }
.col-card__headline { display: block; font-size: 19px; font-weight: 700; line-height: 1.22; }
.col-card__headline:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.col-card__person { font-size: 13px; color: var(--muted); margin: -6px 0 8px; }
.cols-strip { margin-top: 36px; }
.cols-strip__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.cols-strip__track::-webkit-scrollbar { display: none; }
.cols-strip__track > * { scroll-snap-align: start; }
.carousel-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.carousel-ctl--auto { display: none; }
[data-carousel].has-overflow .carousel-ctl--auto { display: flex; }

/* Magazines */
.mags__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }

/* Culture */
.culture-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--gap); align-items: start; }
.culture-grid.has-side { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); }
.culture-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); margin-top: 30px; }
.section--culture .kicker { color: var(--sec); }
.culture-side { display: grid; gap: 22px; align-content: start; }
.pill-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent-hover); border-radius: 999px; padding: 10px 24px; font-size: 24px; font-weight: 800; font-family: 'Oswald', var(--font-title); text-decoration: none !important; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06); }
.pill-btn:hover { background: var(--accent-hover); }

/* Flavors / play / radio / podcasts */
.section--flavors .kicker { color: var(--sec); }
.play-row__track { }
.radio-bar { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 32px; }
.radio-bar__box { display: flex; align-items: center; gap: 22px; border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; flex-wrap: wrap; }
.radio-bar__prog { color: var(--accent-text); font-weight: 700; }
.radio-bar__platforms { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.radio-bar__podlogo { max-height: 84px; width: auto; }
.radio-bar__platforms .platform { font-size: 24px; }
.section--mostread .sec-head { margin-bottom: 12px; }
.section--mostread { padding-bottom: 0; }

/* Related to cards inside sections */
.section--list .grid, .section--list .blog-grid, .section--list .jobs-grid { grid-template-columns: minmax(0, 1fr); }
.section--list .card--v { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.section--list .card--v .card__body { padding-top: 0; }