/*
Theme Name: Bollywood Paparazzi
Theme URI: https://bollywoodpaparazzi.com
Author: Bollywood Paparazzi
Description: The bollywoodpaparazzi.com news theme, built from the client's design handoff on the Modernist system: flat, Archivo, red on light, square corners, two-pixel rules, grayscale photography. Homepage, article, archive, video and about/contact templates. The design system itself is assets/css/modernist.css, shipped verbatim; this file only lays the pages out with its tokens.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bollywood-paparazzi
Tags: news, blog, two-columns, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* ---- base: links take the text colour and turn red on hover (the design's page-level rule) ---- */
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }
body { background: var(--color-bg); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--color-accent); color: var(--color-bg); }
ul.plain, .plain ul { list-style: none; margin: 0; padding: 0; }

/* ---- the frame: 1280px, centred, ruled at both sides ---- */
.frame { max-width: 1280px; margin: 0 auto; background: var(--color-bg); border-inline: 2px solid var(--color-divider); min-height: 100vh; }

/* ---- header ---- */
.site-header { padding: var(--space-4) var(--space-4) 0; }
.topstrip { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; flex-wrap: wrap; }
.masthead__logo { display: block; }
.masthead__logo img { height: 72px; width: auto; display: block; }
.masthead__actions { display: flex; gap: var(--space-2); }
.site-search { display: none; gap: var(--space-2); padding: 0 0 var(--space-4); }
.site-search:target, .site-search.is-open { display: flex; }
.site-search .input { max-width: 420px; }
.search-form { display: flex; gap: var(--space-2); width: 100%; max-width: 480px; }
.search-form .input { flex: 1 1 auto; min-width: 0; }   /* wide enough for its whole placeholder */
.primary-nav { border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.primary-nav ul { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.primary-nav .current-menu-item > a, .primary-nav .current-cat > a, .primary-nav .current-menu-parent > a, .primary-nav .current-post-ancestor > a, .primary-nav a[aria-current="page"] { color: var(--color-accent); }

/* ---- shared micro-styles ---- */
.kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.kicker--sm { font-size: 10px; }
.kicker a { color: inherit; }
.sec-h { margin: 0; padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-divider); }
.meta { font-size: 11px; color: var(--color-neutral-600); }
.dek { margin: 0; color: var(--color-neutral-700); max-width: 60ch; }
.t15, .t17, .t-row { font-family: var(--font-heading); font-weight: 800; line-height: 1.2; text-wrap: pretty; }
.t15 { font-size: 15px; }
.t17 { font-size: 17px; }
.t-row { font-size: clamp(16px, 2vw, 22px); }
.t14 { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.3; text-wrap: pretty; }
.sponsored { display: inline-block; margin-right: 6px; padding: 1px 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-neutral-900); color: var(--color-bg); }

/* ---- photographs: grayscale on the figure, never baked in; a still too small for its frame is
        letterboxed on the grey, never blown up ---- */
.media { position: relative; overflow: hidden; background: var(--color-neutral-300); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.is-small img { object-fit: scale-down; }
.media.is-tall img { object-position: 50% 22%; }   /* a portrait in a wide frame keeps its head */
/* autopub's 1200x630 cards: in a frame of their own shape (crops nothing), or whole on a quiet ground */
.r-card { aspect-ratio: 1200 / 630; }
.media.is-whole { background: var(--color-surface); }
.media.is-whole img { object-fit: contain; }
/* no picture at all: the masthead mark, small and quiet, on the surface */
.media--none { display: grid; place-items: center; background: var(--color-surface); }
.media--none img { width: min(38%, 120px); height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.35; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-1 { aspect-ratio: 1; }
.r-3x4 { aspect-ratio: 3 / 4; }
.media--dark { background: var(--color-neutral-900); }

/* ---- page grids: three columns at desktop, collapsing on their own ---- */
/* at most three columns: auto-fit alone would make four out of the 1280px frame */
.layout, .top { --cols: repeat(auto-fit, minmax(max(280px, calc((100% - 2 * var(--space-6)) / 3)), 1fr)); }
.layout { padding: var(--space-6) var(--space-4) var(--space-8); display: grid; grid-template-columns: var(--cols); gap: var(--space-6); }
.layout--single { grid-template-columns: minmax(0, 1fr); }
.layout > *, .top > * { min-width: 0; }
.full { grid-column: 1 / -1; }
.span-2 { grid-column: 1 / -1; }
@media (min-width: 620px) { .span-2 { grid-column: span 2; } }
.stack { display: grid; gap: var(--space-4); align-content: start; }
.stack-3 { display: grid; gap: var(--space-3); align-content: start; }
.stack-2 { display: grid; gap: var(--space-2); align-content: start; }

/* ---- homepage ---- */
.top { grid-column: 1 / -1; display: grid; grid-template-columns: var(--cols); gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 2px solid var(--color-divider); }
.lead { display: grid; gap: var(--space-3); align-content: start; }
.lead h1, .lead h2 { font-size: clamp(28px, 4vw, 42px); margin: 0; text-wrap: pretty; }
.lead .dek { max-width: 60ch; }
.li-thumb { display: grid; grid-template-columns: 112px 1fr; align-items: start; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.li-thumb__text { display: grid; gap: 4px; align-content: start; }
/* every card in a row has the same card-shaped frame; one card lies on its side, two share the width */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6) var(--space-4); }
.cards--n2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--n1 { grid-template-columns: minmax(0, 1fr); }
.card-a { display: grid; gap: var(--space-2); align-content: start; }
.card-a__text { display: grid; gap: var(--space-2); align-content: start; }
.cards--n1 .card-a { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: center; }
.cards--n1 .t17 { font-size: 22px; }
.spot-h { margin-top: var(--space-4); }
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); background: var(--color-surface); padding: var(--space-4); align-items: center; }
@media (min-width: 620px) {
  .spotlight--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); }
  .spotlight--tall { grid-template-columns: minmax(180px, 270px) minmax(0, 1fr); gap: var(--space-6); }
}
.spotlight--tall > a { max-width: 270px; }
.spotlight--text { padding: var(--space-6); }
.spotlight__text { display: grid; gap: var(--space-3); align-content: center; justify-items: start; }
.spotlight__text h2 { margin: 0; text-wrap: pretty; }
.sidebar { display: grid; gap: var(--space-6); align-content: start; }
.trend { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.trend__n { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-accent); line-height: 1; }
.table .film { font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }

/* ---- article ---- */
.article { display: grid; gap: var(--space-4); align-content: start; }
.article h1 { font-size: clamp(28px, 4vw, 42px); margin: 0; max-width: 24ch; text-wrap: pretty; }
.standfirst { margin: 0; font-size: 18px; color: var(--color-neutral-700); max-width: 60ch; }
.metabar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 12px; color: var(--color-neutral-600); padding: var(--space-3) 0; border-top: 2px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.metabar a, .metabar button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.metabar a:hover, .metabar button:hover { color: var(--color-accent); }
.hero { display: grid; gap: 4px; }
.entry { max-width: 66ch; font-size: 17px; line-height: 1.6; display: grid; gap: var(--space-4); }
.entry > * { margin: 0; }
.entry a { color: var(--color-accent-700); text-decoration: underline; }
.entry a:hover { color: var(--color-accent); }
.entry h2 { font-size: 25px; margin-top: var(--space-2); }
.entry h3 { font-size: 20px; margin-top: var(--space-2); }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li + li { margin-top: 4px; }
.entry img { height: auto; }
.entry figure { display: grid; gap: 4px; max-width: 100%; }
.entry blockquote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--color-accent); font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.25; }
.entry blockquote p { margin: 0; }
.entry blockquote cite { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-weight: 400; font-size: 13px; font-style: normal; color: var(--color-neutral-600); }
.entry iframe, .entry video { width: 100%; max-width: 100%; border: 0; }
.entry iframe[src*="youtube"], .entry iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.entry .wp-block-embed__wrapper { position: relative; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry td, .entry th { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); text-align: left; }
.entry .alignleft { float: left; margin: 0 var(--space-4) var(--space-2) 0; }
.entry .alignright { float: right; margin: 0 0 var(--space-2) var(--space-4); }
.tagrow { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-4); border-top: 2px solid var(--color-divider); }
a.tag-outline:hover { background: var(--color-accent); color: var(--color-bg); }
.related { display: grid; gap: 4px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.page-links { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }

/* ---- archive ---- */
.archive-head { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-divider); }
.archive-head h1 { margin: 0; text-wrap: pretty; }
.rows { display: grid; gap: var(--space-4); }
.row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.row__text { display: grid; gap: var(--space-2); align-content: start; }
.row__ex { font-size: 13px; color: var(--color-neutral-700); }
.layout--list .archive-head { padding-bottom: var(--space-4); }
.listing { display: grid; gap: var(--space-6); align-content: start; }
.feature { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.feature h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0; text-wrap: pretty; }
.feature h2 a { color: inherit; }
.more { padding-top: var(--space-2); }
.pager { display: flex; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.pager .page-numbers { padding: 6px 12px; border: 1px solid var(--color-divider); }
.pager .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pager .page-numbers.dots { border-color: transparent; padding-inline: 4px; }
.empty { display: grid; gap: var(--space-3); justify-items: start; }

/* ---- video ---- */
.player { position: relative; aspect-ratio: 16 / 9; background: var(--color-neutral-900); display: grid; place-items: center; overflow: hidden; }
.player iframe, .player video, .player img, .player > a { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.player .wp-video { width: 100% !important; height: 100%; }
.player--card { aspect-ratio: 1200 / 630; }
.play { width: 64px; height: 64px; background: var(--color-accent); display: grid; place-items: center; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; }
.vlead { display: grid; gap: var(--space-3); align-content: start; }
.vlead h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); text-wrap: pretty; }
.vlead .meta { font-size: 12px; }
.upnext { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.vcard { display: grid; gap: var(--space-2); align-content: start; }

/* ---- about / contact ---- */
.about { padding: var(--space-6) var(--space-4) var(--space-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); }
.about > * { min-width: 0; }
.about h1 { margin: 0; text-wrap: pretty; }
.about-copy { display: grid; gap: var(--space-4); max-width: 60ch; }
.about-copy > * { margin: 0; color: var(--color-neutral-700); }
.about-copy > p:first-child { font-size: 17px; line-height: 1.6; color: var(--color-text); }
.about-copy a { color: var(--color-accent-700); text-decoration: underline; }
.contact { display: grid; gap: var(--space-3); align-content: start; background: var(--color-surface); padding: var(--space-4); }
.contact h3 { margin: 0; }
.contact .btn { justify-self: start; }
.notice { margin: 0; font-size: 13px; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-accent); background: var(--color-bg); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prose { max-width: 66ch; }

/* ---- ad slots (AdSense or a sponsor's unit, placed as widgets) ---- */
.ad-slot { display: grid; gap: 4px; justify-items: center; }
.ad-slot__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); }

/* ---- footer ---- */
.site-footer { border-top: 2px solid var(--color-divider); padding: var(--space-6) var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); }
.fcol { display: grid; gap: var(--space-1); font-size: 13px; align-content: start; }
.fcol h6 { margin: 0 0 var(--space-1); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.fbrand { display: grid; gap: var(--space-2); align-content: start; }
.fbrand img { height: 48px; width: auto; display: block; }
.fbrand span { font-size: 12px; color: var(--color-neutral-700); }
.newsletter { display: grid; gap: var(--space-2); align-content: start; }
.newsletter h6 { margin: 0; }
.newsletter form { display: grid; gap: var(--space-2); }
.newsletter .btn { justify-self: start; }

/* ---- comments (not designed: the article's rules, the same micro-styles) ---- */
.comments { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--color-divider); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.comment-list .children { list-style: none; padding-left: var(--space-4); }
.comment-body { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.comment-meta { font-size: 11px; color: var(--color-neutral-600); }
.comment-form { display: grid; gap: var(--space-3); }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; }
.comment-form .submit { font-family: var(--font-heading); font-weight: 800; font-size: 14px; background: var(--color-accent); color: var(--color-bg); border: 0; padding: var(--space-2) 14px; cursor: pointer; }

@media (max-width: 480px) {
  .masthead__logo img { height: 56px; }
  .row { grid-template-columns: 112px 1fr; gap: var(--space-3); }
}