/* ================================================================
   RPC — ABOUT PAGE ONLY (kids theme redesign)
   ================================================================ */

.about-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: flex-start;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

/* LEFT: colourful sticky panel — crimson gradient instead of dark corporate panel */
.about-split-panel {
  position: sticky;
  top: 110px;
  align-self: flex-start;
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-asym);
  padding: 44px 36px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 4px solid var(--gold);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.4deg);
  position: relative;
}
.about-split-panel::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(234,179,8,0.35) 0%, rgba(234,179,8,0) 70%);
  pointer-events: none;
}
/* Star sticker popping off the panel corner */
.about-split-panel::after {
  content: '★';
  position: absolute;
  top: -18px;
  left: -16px;
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transform: rotate(-16deg);
  z-index: 2;
}

.about-split-panel-img {
  position: relative;
  z-index: 1;
  border-radius: 30px 30px 30px 8px;
  overflow: hidden;
  height: auto;
  margin-bottom: 44px;
  border: 4px solid #fff;
  transform: rotate(1.3deg);
  box-shadow: var(--shadow-md);
  background: var(--bg-light);
}
.about-split-panel-img img { width: 100%; height: auto; object-fit: contain; display: block; }

.about-split-panel-head { position: relative; z-index: 1; margin-bottom: 32px; }
.about-split-panel-head .section-label.light { margin-bottom: 12px; }
.about-split-panel-head h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: #fff; line-height: 1.3; }
.about-split-panel-head h2 span { color: var(--gold); font-style: normal; }

.about-split-panel-foot { position: relative; z-index: 1; margin-top: auto; }

.about-split-doctor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-xl);
}
.about-split-doctor img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); flex-shrink: 0; }
.about-split-doctor .doc-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 800; color: #fff; }
.about-split-doctor .doc-deg { font-size: 11px; color: rgba(255,255,255,0.75); }

/* Experience badge — now overlaps the bottom-right corner of the panel image */
.about-split-exp {
  position: absolute;
  bottom: -24px;
  right: -14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: var(--gold);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(8deg);
}
.about-split-exp .num { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--primary-dark); line-height: 1; }
.about-split-exp .label { font-family: var(--font-ui); font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--primary-dark); text-align: center; line-height: 1.2; }

/* RIGHT: content side */
.about-split-content { padding: 16px 8px; }

/* Quote — dashed speech-bubble style instead of a plain left-border blockquote */
.about-split-quote {
  position: relative;
  background: var(--bg-section);
  border: 3px dashed var(--accent-light);
  border-radius: var(--radius-md);
  padding: 26px 28px 22px;
  margin-bottom: 32px;
}
.about-split-quote::before {
  content: '\201C';
  position: absolute;
  top: -26px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--gold);
  line-height: 1;
}
.about-split-quote p { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text-dark); line-height: 1.6; }

.about-split-content .lead-text { font-size: 16px; color: var(--text-body); line-height: 1.9; margin-bottom: 28px; }

.about-split-bottom-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.about-split-secondary-img {
  border-radius: 24px 24px 8px 24px;
  overflow: hidden;
  width: 130px;
  height: auto;
  flex-shrink: 0;
  border: 4px solid var(--accent-light);
  transform: rotate(-3deg);
  box-shadow: var(--shadow-md);
  background: var(--bg-light);
}
.about-split-secondary-img img { width: 100%; height: auto; object-fit: contain; display: block; }

/* ================================================================
   RESPONSIVE — about split panel (was missing breakpoints entirely)
   ================================================================ */
@media (max-width: 1024px) {
  .about-split-panel { transform: none; }
}

@media (max-width: 768px) {
  .about-split-panel::after { width: 34px; height: 34px; font-size: 15px; top: -12px; left: -10px; }
  .about-split-exp { width: 76px; height: 76px; bottom: -18px; right: -8px; }
  .about-split-exp .num { font-size: 1.3rem; }
  .about-split-panel-img { transform: none; margin-bottom: 34px; }
  .about-split-secondary-img { transform: none; width: 110px; }
  .about-split-quote::before { font-size: 46px; top: -18px; }
}

@media (max-width: 480px) {
  .about-split-panel::after { display: none; }
  .about-split-exp { width: 66px; height: 66px; bottom: -14px; right: -6px; }
  .about-split-exp .num { font-size: 1.1rem; }
  .about-split-exp .label { font-size: 7px; }
  .about-split-doctor { flex-wrap: wrap; }
  .about-split-bottom-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .about-split-secondary-img { width: 100%; height: 220px; border-radius: 26px 26px 8px 26px; }
  .about-split-secondary-img img { object-fit: cover; }
}

/* ================================================================
   ABSOLUTE FINAL FIX — .about-split MUST stack on mobile.
   about.css redefines this unconditionally at the top of the file
   (no media query), which was overriding common.css's collapse rule
   since about.css loads after common.css. Must stay LAST in file.
   ================================================================ */
@media (max-width: 1024px) {
  .about-split { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ================================================================
   PADDING/SPACING REDESIGN FOR PHONE — about.css's own base padding
   (44px 36px panel, 16px 8px content) is unconditional and was
   overriding common.css's mobile padding fixes. Fixed properly here.
   ================================================================ */
@media (max-width: 1024px) {
  .about-split-panel { padding: 32px 26px !important; min-height: auto !important; }
  .about-split-content { padding: 28px 6px !important; }
}

@media (max-width: 768px) {
  .about-split-panel { padding: 28px 22px !important; }
  .about-split-content { padding: 24px 4px !important; }
  .about-split-panel-head h2 { font-size: 1.4rem !important; }
  .about-split-quote { padding: 20px 20px 16px !important; margin-bottom: 24px !important; }
}

@media (max-width: 480px) {
  .about-split-panel { padding: 22px 18px !important; border-radius: 30px 30px 30px 8px !important; }
  .about-split-content { padding: 18px 2px !important; }
  .about-split-panel-head h2 { font-size: 1.2rem !important; }
  .about-split-panel-head { margin-bottom: 20px !important; }
  .about-split-quote { padding: 18px 16px 14px !important; margin-bottom: 20px !important; }
  .about-split-quote p { font-size: 0.95rem !important; }
  .about-split-content .lead-text { font-size: 14px !important; margin-bottom: 18px !important; }
  .about-split-panel-img { margin-bottom: 26px !important; }
  .about-split-doctor { padding: 10px 12px !important; gap: 10px !important; }
  .about-split-doctor img { width: 40px !important; height: 40px !important; }
  .about-split-doctor .doc-name { font-size: 12px !important; }
  .about-split-doctor .doc-deg { font-size: 10px !important; }
}