/* Blackmon Tutoring — site-wide polish, loaded after responsive.css on every page.
   Icons use one brand blue at every size; everything else applies to phones only:
   centred layout, visible hero photos, two-up chips and stats, consistent spacing. */

/* ================================================================
   Icons: brand blue everywhere (no navy / black icon variants)
   ================================================================ */
[class*="-icon--navy"],
.activity-icon.is-navy { background: linear-gradient(160deg, #5EA6E0 0%, #4C93CE 100%) !important; }
.glance-icon, .camp-feature-icon, .addon-icon, .info-icon, .fact-icon, .feature-icon, .gains-arrow { color: #3e8dc4; }
.camp-page .glance-icon { background: #3e8dc4; color: #fff; }
main .check, .diagnostic-check, .quiz-check, .success-check { background: #3e8dc4 !important; color: #fff !important; border-radius: 50%; }
/* Home: "how it works" step circles alternated navy and blue */
[class*="rounded-full"][class*="#0F1E3C_0%"] { background: linear-gradient(160deg, #5EA6E0 0%, #4C93CE 100%) !important; }

/* Section label pills: the dot sits on the text's centre line, at every size */
.eyebrow .dot, .bmp-eyebrow .dot, span.inline-flex.rounded-full > span[aria-hidden="true"]:first-child:empty {
  align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle;
}

/* Home "Subjects our tutors teach": every tile in the same navy, turning blue on hover */
.subject-card { background-color: #0b1f3f !important; color: #fff !important; box-shadow: none !important; }
.subject-card:hover { background-color: #5babe0 !important; }
.subject-card > span.relative.flex { box-shadow: inset 0 0 0 1px #fff !important; color: #fff !important; }
.subject-card img { filter: brightness(0) invert(1) !important; }

/* Location and college chips are links now */
a.city-card, a.location-chip, a.school-chip { color: inherit; text-decoration: none; cursor: pointer; }
a.city-card { display: block; }
a.location-chip:hover, a.school-chip:hover { border-color: #3e8dc4; color: #3e8dc4; }
a.school-chip.is-active:hover { color: #fff; }

@media (max-width: 767px) {

  /* ================================================================
     1. Centred layout
     ================================================================ */
  main, main *, footer, footer * { text-align: center !important; }
  /* Long-form reading, forms, tables and accordions stay left-aligned */
  main :is(form, input, select, textarea, table, .faq-list, .faq-item, .faq-pages, details,
           .article-body, .article-content, .pp-body, .tc-body, .quiz-fields),
  main :is(form, table, .faq-list, .faq-item, .faq-pages, details, .article-body, .article-content,
           .pp-body, .tc-body, .quiz-fields) * { text-align: left !important; }

  main :is(h1, h2, h3, h4, h5, p, blockquote, [class*="lede"], [class*="-copy"]):not(form *) {
    margin-left: auto; margin-right: auto;
  }
  main :is([class*="actions"], [class*="ctas"], [class*="cta-row"], .hero-cta, [class*="-buttons"],
           [class*="-links"], .footnote) { justify-content: center !important; }
  footer :is(ul, div) { justify-content: center !important; }
  footer img { margin-left: auto; margin-right: auto; }
  main :is(.article-meta, .article-byline, .post-meta) { justify-content: center !important; }

  /* ================================================================
     2. Section labels (pill above each heading)
     ================================================================ */
  main :is(.eyebrow, .bmp-eyebrow, .team-eyebrow, .addon-eyebrow) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    padding: 6px 14px;
    font-size: 11.5px !important;
    letter-spacing: 0.8px !important;
    line-height: 1.35;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  main :is(.eyebrow, .bmp-eyebrow, .team-eyebrow, .addon-eyebrow) .dot {
    flex-shrink: 0; align-self: center; margin: 0 !important; position: static !important; transform: none !important;
  }

  /* ================================================================
     3. Hero photos visible on phones
     ================================================================ */
  main [class*="-hero"]:not(.article-hero):not(.blog-hero):not(.pp-hero):not(.tc-hero)::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }
  main [class*="-hero"]:not(.article-hero):not(.blog-hero):not(.pp-hero):not(.tc-hero)::after {
    background: linear-gradient(180deg, rgba(7,18,41,0.80) 0%, rgba(11,31,63,0.72) 40%, rgba(11,31,63,0.84) 75%, rgba(11,31,63,0.94) 100%) !important;
    opacity: 1 !important;
  }
  .ab-hero::before, .bi-hero::before { background-image: url('/images/hero-mobile/classroom.jpg') !important; }
  .bc-hero::before, .bb-hero::before, .es-hero::before { background-image: url('/images/hero-mobile/level-early.jpg') !important; }
  .ms-hero::before { background-image: url('/images/hero-mobile/level-middle.jpg') !important; }
  .ca-hero::before, .col-hero::before, .hs-hero::before { background-image: url('/images/hero-mobile/level-high.jpg') !important; }
  .cc-hero::before { background-image: url('/images/hero-mobile/child-care.jpg') !important; }
  .ccb-hero::before { background-image: url('/images/hero-mobile/bundles.jpg') !important; }
  .contact-hero::before, .results-hero::before, .testprep-hero::before, .ts-hero::before { background-image: url('/images/hero-mobile/score-report.jpg') !important; }
  .fq-hero::before, .wb-hero::before, .pr-hero::before, .ic-hero::before { background-image: url('/images/hero-mobile/shrug.jpg') !important; }
  .loc-hero::before { background-image: url('/images/hero-mobile/dallas.jpg') !important; }
  .subject-hero::before { background-image: url('/images/hero-mobile/students.jpg') !important; }
  .camp-hero:not(.is-winter)::before { background-image: url('/images/hero-mobile/zoo.jpg') !important; }

  /* ================================================================
     4. Chips / tags: two per row, equal width
     ================================================================ */
  main :is(.pill-tags, .hero-pills, .level-tags, .team-tags, .school-chips, .camp-stat-pills, .case-tags, .tag-list) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    justify-items: stretch;
    width: 100%;
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-wrap: initial;
  }
  main :is(.pill-tags, .hero-pills, .level-tags, .team-tags, .school-chips, .camp-stat-pills, .case-tags, .tag-list) > * {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 38px;
    margin: 0 !important;
    white-space: normal !important;
    line-height: 1.3;
    box-sizing: border-box;
  }
  /* An odd last chip sits centred at the same width */
  main :is(.pill-tags, .hero-pills, .level-tags, .team-tags, .school-chips, .camp-stat-pills, .case-tags, .tag-list) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px) !important;
  }

  /* ================================================================
     5. Hero numbers (2,400+, +185 pts, 4.9/5 …): two per row
     ================================================================ */
  main :is(.hero-stats, .go-next-stats, .st-stats-row, .tx-stats-row, .stats-row) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px !important;
    justify-items: center;
    align-items: start;
    width: 100%;
  }
  main :is(.hero-stats, .go-next-stats, .st-stats-row, .tx-stats-row, .stats-row) > * {
    width: 100%; min-width: 0; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    display: flex; flex-direction: column; align-items: center;
  }
  main :is(.hero-stats, .go-next-stats, .st-stats-row, .tx-stats-row, .stats-row) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* ================================================================
     6. Icon + text rows become centred stacks (set by mobile-polish.js)
     ================================================================ */
  .mp-stack { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; grid-template-columns: none !important; }
  .mp-stack > * { margin-left: auto !important; margin-right: auto !important; }
  .mp-stack > :first-child { grid-row: auto !important; margin-bottom: 0 !important; }
  /* Connector arrows between side-by-side steps would run through the stacked text */
  .mp-stack > :first-child > svg[class*="absolute"], .mp-stack > :first-child > [class*="connector"] { display: none !important; }
  .camp-hero .hero-v3-meta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .mp-inline { display: block !important; }
  .mp-inline > :first-child { display: inline-flex !important; vertical-align: -0.2em; margin: 0 8px 0 0 !important; }
  .mp-inline > :not(:first-child) { display: inline !important; }
  .mp-col-center { align-items: center !important; }
  .mp-auto { margin-left: auto !important; margin-right: auto !important; }

  /* ================================================================
     7. Spacing: no oversized gaps between sections
     ================================================================ */
  main > section:not([class*="-hero"]), main > div > section:not([class*="-hero"]) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  main [class*="section-head"] { margin-bottom: 28px !important; }
  main :is(h2) { margin-bottom: 12px; }
  main p + p { margin-top: 12px; }
  .mp-split + .mp-split { margin-top: 12px !important; }
}

/* Winter Camp swipe rows bleed exactly to the screen edge (page side padding is 20px, 16px on small phones) */
@media (max-width: 700px) {
  .camp-page .theme-grid.is-swipe, .camp-page .faq-tabs { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 380px) {
  .camp-page .theme-grid.is-swipe, .camp-page .faq-tabs { margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px; padding-right: 16px; }
}

/* Home page on phones */
@media (max-width: 767px) {
  /* "92% of students": numbers two per row */
  main dl[class*="minmax(240px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 16px !important; max-width: none !important; }
  /* Comparison cards and blog cards: one whole card per screen, swipe for the next */
  main div.snap-x.md\:hidden { scroll-padding-left: 24px; }
  main div.snap-x.md\:hidden > div { width: calc(100vw - 48px) !important; min-width: calc(100vw - 48px) !important; }
  #compare-title::after { content: "Swipe to compare →"; display: block; margin-top: 10px; font-family: var(--font-inter), Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: #3e8dc4; }
  .blog-track { padding: 2px 0; }
  .blog-slide { flex-basis: 100% !important; }
  .blog-nav { display: none !important; }
}