/* BiPlus ALS inner-page components (page hero, team, FAQ, newsletter). Tokens only. */

.bp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-services--tint, .bp-collections--tint { background: var(--subtle); }

/* ---------- Page hero ---------- */
.entry-content > .bp-pagehead { padding: var(--sp-9) 0 var(--sp-8); }
.bp-pagehead__cols { align-items: center !important; gap: var(--sp-8) !important; }
.bp-section .bp-pagehead__title { font-size: 48px; line-height: 1.1; letter-spacing: -1px; margin-bottom: var(--sp-5) !important; max-width: 880px; }
.bp-pagehead .bp-lead { margin-bottom: var(--sp-6); }
.bp-pagehead .bp-lead:last-child { margin-bottom: 0; }
.bp-pagehead .wp-block-buttons { gap: var(--sp-3); }
.bp-pagehead__img { margin: 0; }
.bp-pagehead__img img { width: 100%; height: auto; border-radius: var(--r-hero); }

/* ---------- Ebooks, topics ---------- */
.bp-ebook__cover { margin: 0 0 var(--sp-3) !important; }
.bp-ebook__cover img { width: 100%; height: 200px; object-fit: contain; background: var(--y-pale); border-radius: var(--r-card); padding: var(--sp-4); }
ul.bp-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
ul.bp-cats li {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5); font-size: 14px; color: var(--gray); font-weight: 700;
}
ul.bp-cats li a { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 15px; margin-right: var(--sp-1); }
ul.bp-cats li:hover { border-color: var(--ink); }
ul.bp-cats .cat-item-1 { display: none; } /* Uncategorized */
ul.bp-cats--inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }
ul.bp-cats--inline li { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); }
ul.bp-cats--inline li a { font-size: 14px; margin: 0; }
.bp-pager { margin-top: var(--sp-8) !important; gap: var(--sp-2); font-weight: 800; }
.bp-pager a, .bp-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 var(--sp-3); border-radius: var(--r-card); border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
.bp-pager .page-numbers.current { background: var(--dark); border-color: var(--dark); color: var(--text-light); }
.bp-pager a:hover { border-color: var(--ink); }

/* ---------- Newsletter band ---------- */
.bp-newsletter { background: var(--y-pale); }
.entry-content > .bp-newsletter { padding: var(--sp-8) 0; }
.bp-newsletter__cols { align-items: center !important; gap: var(--sp-7) !important; }
.bp-newsletter h2.wp-block-heading { font-size: 32px; margin-bottom: var(--sp-3); }
.bp-newsletter .bp-form-card { padding: var(--sp-5); box-shadow: var(--shadow-body); }

/* ---------- Liên hệ ---------- */
.bp-contact-page__cols { gap: var(--sp-7) !important; }
.bp-contact-page h2.wp-block-heading { font-size: 32px; margin-bottom: var(--sp-5); }
.bp-contact-page .bp-form-card { border: 1px solid var(--line-soft); }
.bp-info-cards { display: grid; gap: var(--sp-4); }
.bp-info-cards > * { margin: 0 !important; }
.bp-info-card { padding: var(--sp-5); gap: var(--sp-2); }
.bp-info-card p { color: var(--ink); font-size: 16px; }
.bp-section .bp-info-card__label { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--gray-mid); }

/* ---------- Phần mềm: Data Center end-of-life band ---------- */
.bp-eol { background: var(--y-pale-tint); border-block: 1px solid var(--line-soft); }
.bp-eol__cols { align-items: center !important; gap: var(--sp-7) !important; }
.bp-eol h2.wp-block-heading { margin-bottom: var(--sp-4); }
.bp-section .bp-eol__more { margin-top: var(--sp-4); font-weight: 800; }
.bp-eol__more a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bp-eol .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .bp-eol .wp-block-buttons { justify-content: flex-start; } }

/* ---------- Về chúng tôi ---------- */
.bp-proof { background: var(--subtle); }
.entry-content > .bp-proof { padding: var(--sp-7) 0; }
.bp-proof__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.bp-section p.bp-proof__text { font-size: 18px; font-weight: 600; color: var(--ink); max-width: 640px; }
.bp-proof__badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bp-proof__badges > * { margin: 0 !important; }
.bp-proof__badges .wp-block-image { margin: 0; }
.bp-proof__badges img { height: 48px; width: auto; background: var(--surface); border-radius: var(--r-chip); padding: var(--sp-1) var(--sp-2); }
.bp-story__cols { gap: var(--sp-8) !important; }
.bp-story .bp-lead { margin-bottom: var(--sp-4); color: var(--ink); }
.bp-story p:not(.bp-lead) { color: var(--gray-mid); margin-bottom: var(--sp-4); max-width: 720px; }
.bp-person { display: flex; flex-direction: column; gap: var(--sp-2); }
.bp-person > * { margin: 0 !important; }
.bp-person__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-outer); }
.bp-person__initials {
  aspect-ratio: 1; border-radius: var(--r-outer); background: var(--y-pale); color: var(--ink);
  display: flex !important; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 48px; letter-spacing: -1px;
}
.bp-person h3.wp-block-heading { margin-top: var(--sp-2) !important; }
.bp-person__role { color: var(--ink); font-size: 15px; font-weight: 700; }
.bp-section .bp-person__intro { color: var(--gray-mid); font-size: 15px; line-height: 1.55; }
.bp-person__link a { font-size: 14px; font-weight: 700; color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.bp-person__link a:hover { text-decoration-color: var(--ink); }
.bp-people__grid { row-gap: var(--sp-8) !important; }

/* ---------- Trial page ---------- */
.bp-faq-list { display: grid; gap: var(--sp-3); max-width: 880px; }
.bp-faq-list > * { margin: 0 !important; }
details.bp-faq { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); }
details.bp-faq summary { font-weight: 800; color: var(--ink); cursor: pointer; }
details.bp-faq[open] { border-color: var(--ink); }
details.bp-faq p { margin-top: var(--sp-3) !important; color: var(--gray-mid); }
.bp-terms .bp-card p + p { margin-top: var(--sp-2); }
.bp-why-cloud, .bp-compare { background: var(--subtle); }
.bp-report__cols { align-items: center !important; gap: var(--sp-8) !important; }
.bp-report h2.wp-block-heading { margin-bottom: var(--sp-4); }
.bp-report .bp-lead { margin-bottom: var(--sp-5); }
.bp-report .bp-form-card { padding: var(--sp-5); box-shadow: var(--shadow-body); border: 1px solid var(--line-soft); }
.bp-report__img img { width: 100%; height: auto; }
.bp-shots { display: grid; gap: var(--sp-4); }
.bp-shots .wp-block-image { margin: 0; }
.bp-shots img { width: 100%; height: auto; border-radius: var(--r-card); box-shadow: var(--shadow-body); background: var(--surface); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  ul.bp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .bp-section .bp-pagehead__title { font-size: 34px; }
  .entry-content > .bp-pagehead { padding: var(--sp-8) 0 var(--sp-7); }
  .bp-grid--2 { grid-template-columns: 1fr; }
  ul.bp-cats { grid-template-columns: 1fr 1fr; }
  .bp-people__grid { grid-template-columns: 1fr 1fr !important; }
}
/* Phones: one person per row, photo beside the text, so the intro reads at a normal measure */
@media (max-width: 560px) {
  .bp-people__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--sp-6) !important; }
  .bp-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); align-content: start; }
  .bp-person > :is(.bp-person__photo, .bp-person__initials) { grid-row: span 4; align-self: start; }
  .bp-person__initials { font-size: 32px; }
  .bp-person h3.wp-block-heading { margin-top: 0 !important; }
}