/* AriseVida About — Philosophy of Care. Phone-only, additive integration.
   Load AFTER the site's main styles.css. Do not remove the original container.
   Local font names prevent changing typography elsewhere on the website. */
#philosophy > [data-avc-philosophy-mobile] { display: none !important; }

@media (max-width: 767.98px) {
  /* Typography (Sep 2026): the Methadone page's mobile system — the head uses the shared
     [data-av-mobile-section-heading] rules; the panel roles reuse Methadone's values with the site fonts. */
  #philosophy.ab-philosophy {
    --philo-paper: #fffef9;
    --philo-ink: #070f12;
    --philo-body: #375269;
    --philo-teal: #008783;
    --philo-orange: #cf7452;
    --philo-rule: #188e88;
    --philo-meta: #eff3eb;
    padding: 0;
    background: var(--philo-paper);
    color: var(--philo-ink);
    isolation: isolate;
  }
  /* Only this direct legacy child is gated. Never target every .container. */
  #philosophy > .container.ap-container { display: none !important; }
  #philosophy > .avc-philo[data-avc-philosophy-mobile] {
    display: block !important;
    width: 100%; max-width: 31rem;
    margin: 0 auto;
    padding: 2.5rem clamp(20px, 6.84vw, 32px) 1.125rem; /* px gutters: text enlargement must not eat the row */
    box-sizing: border-box;
    font-family: var(--font-sans, Inter, Arial, sans-serif);
    font-size: 1rem; font-weight: 400; line-height: 1.45;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  #philosophy .avc-philo *,
  #philosophy .avc-philo *::before,
  #philosophy .avc-philo *::after { box-sizing: border-box; }
  /* zero-specificity reset so the component's own margin rules below win */
  #philosophy .avc-philo :where(h2,h3,p,dl,dt,dd) { margin: 0; }
  #philosophy .avc-philo__header { text-align: center; }
  /* eyebrow / title / intro: type, colour and rhythm come from the shared mobile section-head system */
  #philosophy .avc-philo__chooser { margin-top: 1.5rem; }
  #philosophy .avc-philo__tabs[hidden] { display: none !important; }
  #philosophy .avc-philo__tabs {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 3.85vw, 15px); margin-inline: 4px; /* px: the row must keep fitting under text enlargement */
  }
  #philosophy .avc-philo__tabs button {
    display: grid; place-items: center;
    appearance: none; -webkit-appearance: none;
    width: 100%; min-width: 0; min-height: 44px; aspect-ratio: 1; /* 44px touch floor in CSS px; square from the column width */
    margin: 0; padding: .25rem;
    border: 1px solid #3bb8b5; border-radius: .625rem;
    background: transparent; color: #075766; box-shadow: none;
    /* numeral role (Methadone .svcb__group-number) */
    font: italic 500 clamp(21px, 5.6vw, 24px)/1 var(--font-display, Georgia, serif);
    letter-spacing: -.03em; text-align: center;
    cursor: pointer; touch-action: manipulation;
    transform: none;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  #philosophy .avc-philo__tabs button[aria-selected="true"] {
    color: #fff; background: var(--philo-teal); border-color: var(--philo-teal);
  }
  #philosophy .avc-philo__tabs button:focus-visible,
  #philosophy .avc-philo__panel:focus-visible {
    outline: 2px solid #165c68; outline-offset: 4px;
  }
  #philosophy .avc-philo__hint { display: none; }
  #philosophy .avc-philo[data-philo-enhanced="true"] .avc-philo__hint {
    display: block; margin-top: .6875rem;
    /* helper text role (Methadone FAQ answer) */
    text-align: center; color: var(--ink-600, #3a5560);
    font-size: 13.5px; line-height: 1.7; letter-spacing: 0;
  }
  #philosophy .avc-philo__panels { border-top: 1px solid var(--philo-rule); margin-top: 1rem; }
  #philosophy .avc-philo__panel { padding-top: 1.75rem; min-width: 0; }
  #philosophy .avc-philo__panel + .avc-philo__panel { margin-top: 1.5rem; border-top: 1px solid var(--philo-rule); }
  /* Every panel contributes its natural height to this shared grid cell.
     Inactive content stays invisible/inert, keeping the following section
     steady without clipping text or imposing a fixed card height. */
  #philosophy .avc-philo[data-philo-enhanced="true"] .avc-philo__panels { display: grid; }
  #philosophy .avc-philo[data-philo-enhanced="true"] .avc-philo__panel {
    grid-area: 1 / 1; align-self: start; margin: 0; border-top: 0;
  }
  #philosophy .avc-philo[data-philo-enhanced="true"] .avc-philo__panel[aria-hidden="true"] {
    visibility: hidden; pointer-events: none;
  }
  #philosophy .avc-philo__panel-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .625rem;
  }
  /* large card title role (Methadone process card title) */
  #philosophy .avc-philo__panel h3 {
    flex: 1; min-width: 0;
    font: 600 clamp(23px, 6.7vw, 29px)/1.08 var(--font-display, Georgia, serif);
    letter-spacing: -.02em; color: #102838;
    overflow-wrap: anywhere; hyphens: none; text-wrap: initial;
  }
  /* Crop only empty source-image padding, not the icon's orange strokes.
     The original PNG bytes are unchanged; every bounding box includes a
     20px safety margin. <picture> prevents desktop PNG requests. */
  #philosophy .avc-philo__icon {
    display: block; position: relative; flex: 0 0 var(--icon-width);
    width: var(--icon-width); aspect-ratio: var(--icon-ratio);
    overflow: hidden; margin-top: .125rem;
  }
  #philosophy .avc-philo__icon picture { display: block; }
  #philosophy .avc-philo__icon img {
    display: block; position: absolute;
    width: var(--image-width); height: auto; max-width: none;
    left: var(--image-left); top: var(--image-top);
    border: 0; border-radius: 0; box-shadow: none;
    mix-blend-mode: multiply;
  }
  /* card body role (Methadone process card body) */
  #philosophy .avc-philo__body {
    margin-top: 1.0625rem;
    color: #234d68;
    font: 400 clamp(12.75px, 3.55vw, 15.25px)/1.44 var(--font-sans, Inter, Arial, sans-serif);
    letter-spacing: 0; overflow-wrap: break-word;
  }
  #philosophy .avc-philo__meta {
    display: grid; gap: .5rem; margin-top: 1.0625rem;
    /* named query container for its rows (a container query styles descendants only) */
    container: avc-philo-meta / inline-size;
  }
  #philosophy .avc-philo__meta > div {
    display: grid; grid-template-columns: 5.125rem minmax(0, 1fr);
    align-items: center; padding: .75rem .9375rem;
    min-height: 3.0625rem; background: var(--philo-meta); border-radius: .25rem;
  }
  /* When the list is narrower than 14.5 of its own ems (never at normal text
     on phones; always once text is enlarged ~1.5x or more) each value drops
     under its label instead of breaking mid-word in a cramped column. */
  @container avc-philo-meta (max-width: 14.5em) {
    /* one extra class so this also outranks the narrow-phone column rule below */
    #philosophy .avc-philo .avc-philo__meta > div { grid-template-columns: minmax(0, 1fr); row-gap: .375rem; }
    #philosophy .avc-philo .avc-philo__meta dt { border-right: 0; padding-right: 0; }
    #philosophy .avc-philo .avc-philo__meta dd { padding-left: 0; }
  }
  #philosophy .avc-philo__meta dt {
    align-self: stretch; display: flex; align-items: center;
    border-right: 1px solid #9bb3a8; padding-right: .625rem;
    /* small label role (Methadone .av-svcp__media-label) */
    color: var(--teal-700, #0f766e);
    font: 700 clamp(9.5px, 2.6vw, 11px)/1.4 var(--font-sans, Inter, Arial, sans-serif);
    text-transform: uppercase; letter-spacing: .18em;
  }
  #philosophy .avc-philo__meta dd {
    /* item title role (Methadone .av-methadone-what__item-title), italic as the metadata accent */
    padding-left: 1.25rem; color: #0b2127;
    font: italic 500 clamp(18px, 4.7vw, 19.5px)/1.16 var(--font-display, Georgia, serif); letter-spacing: -.015em;
    overflow-wrap: break-word;
  }
  @media (max-width: 359.98px) {
    #philosophy .avc-philo__icon { flex-basis: calc(var(--icon-width) * .85); width: calc(var(--icon-width) * .85); }
    #philosophy .avc-philo__meta > div { grid-template-columns: 4.5rem minmax(0,1fr); padding-inline: .75rem; }
    #philosophy .avc-philo__meta dd { padding-left: .75rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    #philosophy .avc-philo__tabs button { transition: none; }
  }
  @media (forced-colors: active) {
    #philosophy .avc-philo__tabs button[aria-selected="true"] { border: 3px solid Highlight; }
    #philosophy .avc-philo__icon img { mix-blend-mode: normal; }
    #philosophy .avc-philo__meta > div { border: 1px solid CanvasText; }
  }
}