/* The Synap: Best phones (the hub at /best-phones/ and every ranked list). Loaded only on those pages.
   A light reading surface in the homepage's language: paper cards with a thin bezel, photo boxes, glass pills,
   display type at weight 500. Sizes are in em from the same base as the homepage deck, so pills, radii and
   spacing match it at every screen width; text uses the type tokens from style.css. */

.bp {
  --bp-card: #ffffff;
  --bp-ph: #f0f0f0;
  --bp-line: rgba(0,0,0,.08);
  --t-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
  font-size: clamp(14px, calc(.5vw + 6.4px), 24px);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp { --bp-card: #0e0e0e; --bp-ph: #1a1a1a; --bp-line: rgba(255,255,255,.1); }
  :root:not([data-theme="light"]) .bp-paper { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
}
.bp a { color: inherit; text-decoration: none; }
.bp .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared pieces ---------- */
.bp-paper { border-radius: 1.75em; background: var(--bp-card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.06); }
.bp-label { display: block; margin: 0 0 .8em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bp-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
.bp .hp-ph { background: var(--bp-ph); }
.bp .hp-ph.is-product { background: #ffffff; }
.bp .hp-pill { color: var(--ink); }
.bp .sy-go { background: var(--ink); color: var(--bg); }
.bp a:hover .sy-go svg, .bp a:focus-visible .sy-go svg { transform: rotate(45deg); }
.bp a:hover .hp-ph img, .bp a:focus-visible .hp-ph img { transform: scale(1.04); }
.bp :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ---------- the title block (template-parts/page-head.php): byline link in the meta line, Quick picks on the right ---------- */
.bp-by__link { display: inline-flex; padding: .1em .6em; border-radius: 999px; color: var(--ink-2); box-shadow: inset 0 0 0 1px currentColor; transition: color .25s ease; }
.bp-by__link:hover, .bp-by__link:focus-visible { color: var(--acc-text); }

.bp-quick { padding: 1.3em 1.6em .5em; line-height: 1.45; }
.bp-quick__h { margin: 0 0 .4em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bp-quick__list { margin: 0; padding: 0; list-style: none; }
.bp-quick__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1em; align-items: baseline; padding: .95em 0 1em; border-top: 1px solid var(--bp-line); }
.bp-quick__list li:first-child a { border-top: 0; }
.bp-quick__label { grid-column: 1 / -1; margin-bottom: .3em; font-size: var(--t-meta); color: var(--ink-3); }
.bp-quick__name { min-width: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; transition: color .25s ease; }
.bp-quick__price { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-quick__list a:hover .bp-quick__name, .bp-quick__list a:focus-visible .bp-quick__name { color: var(--acc-text); }
.bp-quick__list a:focus-visible { outline-offset: -2px; border-radius: .6em; }

/* ---------- the ranked picks ---------- */
.bp-picks { display: grid; gap: 1.25em; margin: 0; padding: 0; list-style: none; }
.bp-pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: .375em; scroll-margin-top: 1.5em; }
.bp-pick__media { position: relative; display: block; min-height: 24em; }
.bp-pick__media .hp-ph { position: absolute; inset: 0; border-radius: calc(1.75em - .375em); }
.bp-pick__body { display: flex; flex-direction: column; min-width: 0; padding: 1.9em 2.2em 1.9em 2.4em; }
.bp-pick__top { display: flex; align-items: center; flex-wrap: wrap; gap: .5em 1em; }
.bp-rank { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * .7); line-height: 1; letter-spacing: -0.04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bp-tag { display: inline-flex; align-items: center; gap: .4em; padding: .35em .85em; border-radius: 999px; font-size: var(--t-meta); font-weight: 600; line-height: 1.3; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.bp-tag.is-top { background: var(--ink); color: var(--bg); box-shadow: none; }
.bp-tag svg { width: 1em; height: 1em; flex: none; color: #E85002; }
.bp-pick__name { margin: .6em 0 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-h2) * 1.15); line-height: 1.05; letter-spacing: -0.03em; }
.bp-pick__name a { transition: color .25s ease; }
.bp-pick__name a:hover, .bp-pick__name a:focus-visible, .bp-pick:has(.bp-pick__media:hover) .bp-pick__name a { color: var(--acc-text); }
.bp-pick:has(.bp-pick__name a:hover) .hp-ph img, .bp-pick:has(.bp-pick__name a:focus-visible) .hp-ph img { transform: scale(1.04); }
.bp-price { margin: .55em 0 0; font-size: var(--t-meta); color: var(--ink-3); }
.bp-price b { margin-right: .35em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-why { margin: 1em 0 0; max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.bp-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.2em; margin: 1.5em 0 0; }
.bp-specs > div { min-width: 0; padding: .85em 0; border-top: 1px solid var(--bp-line); }
.bp-specs dt { margin-bottom: .35em; font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bp-specs dd { margin: 0; font-size: var(--t-ui); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bp-buyif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.2em; margin: .6em 0 0; padding-top: 1.1em; border-top: 1px solid var(--bp-line); font-size: var(--t-ui); line-height: 1.45; }
.bp-buyif p { margin: 0; color: var(--ink-2); }
.bp-buyif b { display: block; margin-bottom: .3em; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.bp-specs + .bp-buyif { margin-top: 0; }
.bp-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.6em; margin-top: auto; padding-top: 1.7em; }
.bp-vs { font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); transition: color .25s ease; }
.bp-vs:hover, .bp-vs:focus-visible { color: var(--acc-text); }

/* ---------- the picks, side by side ---------- */
.bp-sec { margin-top: 4.5em; }
.bp-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6em 2em; margin-bottom: 1.5em; }
.bp-sec__hint { margin: 0; font-size: var(--t-meta); color: var(--ink-3); }
.bp-table { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bp-table:focus-visible { outline-offset: 3px; }
.bp-table table { width: 100%; min-width: 52em; border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); line-height: 1.4; font-variant-numeric: tabular-nums; }
.bp-table th, .bp-table td { padding: 1.05em 1.1em; text-align: left; vertical-align: top; border-top: 1px solid var(--bp-line); }
.bp-table thead th { padding-top: 1.35em; padding-bottom: .95em; border-top: 0; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-3); }
.bp-table tbody th { font-weight: 600; }
.bp-table tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 11.5em; padding-left: 1.5em; background: var(--bp-card); box-shadow: inset -1px 0 0 var(--bp-line); }
.bp-table tr > :last-child { padding-right: 1.5em; }
.bp-table .is-num { white-space: nowrap; }
.bp-table tbody th a { display: inline-flex; gap: .2em; transition: color .25s ease; }
.bp-table tbody th a:hover, .bp-table tbody th a:focus-visible { color: var(--acc-text); }
.bp-table__n { min-width: 1.5em; font-family: var(--display); font-weight: 500; color: var(--ink-3); }
.bp-note { margin: 1.4em 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3); }
.bp-note a { font-weight: 600; color: var(--ink-2); transition: color .25s ease; }
.bp-note a:hover, .bp-note a:focus-visible { color: var(--acc-text); }

/* ---------- empty state (no picks yet) ---------- */
.bp-empty { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2em 3em; padding: 2.4em 2.6em; }
.bp-empty__text { flex: 1 1 24em; min-width: 0; }
.bp-empty__h { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
.bp-empty__text p { margin: .8em 0 0; max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

/* ---------- more lists ---------- */
.bp-more { margin-top: 4.5em; }
.bp-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1.1em; }
.bp-more__head .bp-label { margin: 0; }
.bp-more__all { font-size: var(--t-ui); font-weight: 600; color: var(--ink-2); transition: color .25s ease; }
.bp-more__all:hover, .bp-more__all:focus-visible { color: var(--acc-text); }
.bp-chips { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.bp .hp-brand { color: var(--ink); }
.bp .hp-brand:hover, .bp .hp-brand:focus-visible { color: var(--acc-text); }

/* ---------- the hub ---------- */
.bp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.bp-cards > li { display: flex; min-width: 0; }
.bp-card { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: .375em; color: var(--ink); }
.bp-card:focus-visible { border-radius: 1.75em; }
.bp-card__ph { position: relative; aspect-ratio: 4 / 3; }
.bp-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 1.1em 1.05em .9em; }
.bp-card__tag { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bp-card__title { margin: .45em 0 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.3); line-height: 1.08; letter-spacing: -0.03em; transition: color .25s ease; }
.bp-card__pick { display: block; margin-top: .45em; font-size: var(--t-ui); line-height: 1.4; color: var(--ink-2); }
.bp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; padding-top: 1.3em; }
.bp-card__meta { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bp-card:hover .bp-card__title, .bp-card:focus-visible .bp-card__title { color: var(--acc-text); }
.bp-ph-empty { display: grid; place-items: center; }
.bp-ph-empty__fig { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * 1.45); line-height: 1; letter-spacing: -0.05em; color: var(--ink-3); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.bp-ph-empty__icon { display: grid; color: var(--ink-3); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.bp-ph-empty__icon svg { width: 3.4em; height: 3.4em; }
.bp-card:hover .bp-ph-empty > span, .bp-card:focus-visible .bp-ph-empty > span { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  html:has(.bp) { scroll-behavior: auto; }
  .bp .hp-ph img, .bp-ph-empty > span { transition: none; }
  .bp a:hover .hp-ph img, .bp a:focus-visible .hp-ph img, .bp-pick:has(.bp-pick__name a:hover) .hp-ph img, .bp-card:hover .bp-ph-empty > span { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .bp-pick { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
}
@media (max-width: 980px) {
  .bp { font-size: 15px; }
  .bp-pick { grid-template-columns: minmax(0, 1fr); }
  .bp-pick__media { min-height: 0; aspect-ratio: 16 / 10; }
  .bp-pick__body { padding: 1.4em 1.3em 1.3em; }
  .bp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-sec, .bp-more { margin-top: 3.5em; }
  .bp-empty { padding: 1.8em 1.6em; }
  .bp-card__upd { display: none; }
}
/* iPad and other tablets (portrait): photo beside the text, three cards a row, not the phone layout stretched */
@media (min-width: 640px) and (max-width: 980px) {
  .bp-pick { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .bp-pick__media { aspect-ratio: auto; min-height: 20em; }
  .bp-pick__body { padding: 1.5em 1.5em 1.4em 1.7em; }
}
/* phones: the hub cards become rows (photo left), buy if / skip if stack */
@media (max-width: 639px) {
  .bp-cards { grid-template-columns: minmax(0, 1fr); gap: .75em; }
  .bp-card { flex-direction: row; align-items: stretch; }
  .bp-card__ph { flex: none; width: 7.4em; aspect-ratio: auto; min-height: 7.4em; border-radius: 1.2em; }
  .bp-card .hp-badge { display: none; }
  .bp-card__body { padding: .85em .9em .8em 1.1em; }
  .bp-card__title { margin-top: .3em; }
  .bp-card__foot { padding-top: .8em; }
  .bp-card .sy-go { width: 2.4em; height: 2.4em; }
  .bp-table tr > :first-child { min-width: 8.6em; padding-left: 1.1em; }
  .bp-ph-empty__fig { font-size: 1.55em; }
  .bp-ph-empty__icon svg { width: 2.2em; height: 2.2em; }
  .bp-buyif { grid-template-columns: minmax(0, 1fr); }
  .bp-quick { padding: 1.1em 1.3em .4em; }
}
@media (max-width: 400px) {
  .bp-pick__body { padding: 1.2em 1.05em 1.1em; }
  .bp-specs { column-gap: .9em; }
  .bp-empty { padding: 1.5em 1.2em; }
  .bp-card__ph { width: 6.4em; }
}
/* touch screens: every link and control is at least 44px to hit */
@media (pointer: coarse) {
  .bp-more__all, .bp-note a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .bp-vs { display: inline-flex; align-items: center; min-height: 44px; }
  .bp-table tbody th a { padding: 12px 0; margin: -12px 0; }
  .bp .hp-pill { height: max(3.125em, 44px); }
}