/* ============================================================
   Tirana Associate Attorney — responsive layer
   Loaded last (taa-responsive), so these rules win over the
   component sheets. Keeps every page usable down to 320px.
   ============================================================ */

/* ---------- Global safety: nothing may force sideways scroll ---------- */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.taa-section, .taa-hero, .taa-footer, .taa-page-hero, .taa-cta { overflow-x: clip; }
.taa-watermark, .taa-hero__watermark, .taa-footer__watermark { max-width: 100%; }
img, video, iframe, embed { max-width: 100%; }
p, li, a, h1, h2, h3, h4, td, th { overflow-wrap: break-word; }

/* ---------- Tablet / small laptop (<= 1020px) ---------- */
@media (max-width: 1020px) {
  .taa-nav__desktop { display: none; }
  .taa-nav__cta { display: none !important; }
  .taa-nav__toggle { display: grid; }
}

/* ---------- Tablet (<= 959px) ---------- */
@media (max-width: 959px) {
  :root {
    --container: min(1360px, calc(100% - 2rem));
    --header-height: 64px;
    --space-7: 2.25rem;
    --space-8: 3rem;
    --space-9: 4rem;
  }
  .taa-section { padding: var(--space-7) 0; }
  .taa-split__media { min-height: 260px; }
  .taa-split__content { padding: var(--space-6) clamp(1.25rem, 4vw, 2.5rem); }
  .taa-outcomes__head, .taa-practice__head, .taa-quotes__head,
  .taa-team-home__head { gap: 1.25rem; }
  .taa-outcomes__note { text-align: left; }
  .taa-team-stage__visual, .taa-team-stage__slide img,
  .taa-team-stage__placeholder { min-height: 380px; }
  .taa-footer__grid { gap: 2rem; }
}

/* ---------- Large phone (<= 768px) ---------- */
@media (max-width: 768px) {
  /* 16px form controls stop iOS Safari auto-zoom on focus */
  .taa-form__field input, .taa-form__field textarea, .taa-form__field select,
  .taa-newsletter input[type="email"], input, textarea, select { font-size: 16px; }

  .taa-about__top { margin-bottom: 2rem; }
  .taa-about__lead { font-size: clamp(1.45rem, 6vw, 1.9rem); max-width: 100%; }
  .taa-about__grid .taa-about__img:last-child { margin-top: 0; }
  .taa-about__text { padding: .5rem 0; }

  /* Flex children must be allowed to shrink below their content size,
     otherwise nowrap tab bars / notes push the row wider than the screen */
  .taa-outcomes__head > *, .taa-practice__head > *, .taa-quotes__head > *,
  .taa-team-home__head > *, .taa-insights__head > * { min-width: 0; max-width: 100%; }
  .taa-outcomes__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; scrollbar-width: none; }
  .taa-outcomes__tabs::-webkit-scrollbar { display: none; }
  .taa-outcomes__tabs button { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }

  .taa-practice__card { flex-basis: min(82vw, 320px); }
  .taa-practice__controls { gap: 1rem; }

  .taa-quotes__media { min-height: 260px; }
  .taa-quotes__body { padding: 1.5rem 1.25rem; }
  .taa-quotes__quote { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }

  .taa-consult__grid { gap: 2rem; }
  .taa-blog-featured { gap: 1.25rem; margin-bottom: 2rem; padding-bottom: 2rem; }
  .taa-blog-featured__media, .taa-blog-featured__media img { min-height: 210px; }
  .taa-blog-card__meta { flex-wrap: wrap; gap: .25rem .75rem; }

  .taa-page-hero { padding: 2.25rem 0 1.75rem; }
  .taa-page-content { padding: 2rem 0 3.5rem; }
  .taa-cta { padding: 3rem 0; }
  .taa-team-page__intro { margin-bottom: var(--space-7); }
  .taa-map { min-height: 280px; }
  .taa-map-wrap { margin-top: 2rem; }

  .taa-team-drawer { place-items: end center; }
  .taa-team-drawer__panel { padding: 2rem 1.25rem 1.5rem; max-height: 88vh; width: 100%; }

  .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content pre { overflow-x: auto; }
  .entry-content img, .entry-content iframe, .entry-content video { height: auto; }
}

/* ---------- Phone (<= 640px) ---------- */
@media (max-width: 640px) {
  :root {
    --container: calc(100% - 2rem);
    --fs-hero: clamp(2.15rem, 10.5vw, 2.8rem);
    --fs-h1: clamp(1.85rem, 8.5vw, 2.4rem);
    --fs-h2: clamp(1.6rem, 7.5vw, 2.1rem);
    --fs-h3: 1.12rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.75rem;
  }

  h1, h2, h3 { letter-spacing: -.01em; }
  .taa-eyebrow { letter-spacing: .14em; }
  .taa-btn { max-width: 100%; text-align: center; }
  .taa-watermark { font-size: clamp(4rem, 22vw, 6rem); }

  /* Header / mobile menu */
  .taa-nav__panel .taa-nav__link { font-size: clamp(1.55rem, 7vw, 2rem); }
  .taa-nav__panel .taa-btn { width: min(100%, 320px); }
  .taa-nav__panel .taa-nav__list { gap: 1rem; }

  /* Stats */
  .taa-stats { padding: 1.75rem 0; }
  .taa-stats__grid { gap: 0; }
  .taa-stats__item { padding: .8rem; border-left: 0; border-top: 1px solid var(--border-color); }
  .taa-stats__item:first-child { padding-left: .8rem; }
  .taa-stats__value { font-size: clamp(1.8rem, 9vw, 2.4rem); }

  /* Outcomes table -> stacked cards */
  .taa-outcomes__row { grid-template-columns: 1fr; gap: .4rem; padding: 1.1rem 0; }
  .taa-outcomes__row--head { display: none; }
  .taa-outcomes__result { font-size: 1.5rem; }

  /* Team */
  .taa-team-stage { gap: 1.5rem; }
  .taa-team-stage__visual, .taa-team-stage__slide img,
  .taa-team-stage__placeholder { min-height: 300px; }
  .taa-team-stage__placeholder { font-size: 3.5rem; }
  .taa-team-stage__thumb { grid-template-columns: 30px 1fr; gap: .35rem .75rem; padding: .85rem 0; min-height: 48px; }
  .taa-team-stage__thumb-role { grid-column: 2; }
  .taa-team-stage__thumb-name { font-size: 1.05rem; }

  /* Quotes */
  .taa-quotes__controls { flex-wrap: wrap; gap: 1rem; }
  .taa-quotes__media { min-height: 220px; }

  /* Consult / forms */
  .taa-consult__steps li { grid-template-columns: 1fr; gap: .35rem; }
  .taa-consult__card { padding: 1.5rem 1.1rem; }
  .taa-consult__submit { flex-direction: column; align-items: stretch; }
  .taa-consult__submit p { max-width: 100%; }
  .taa-consult__urgency label span { min-height: 40px; }
  .taa-form__row--2 { grid-template-columns: 1fr !important; }
  .taa-form { gap: 1rem; }

  /* Practice cards */
  .taa-practice__card-body h3 { font-size: 1.2rem; }

  /* Contact */
  .taa-contact-strip__inner { flex-direction: column; align-items: flex-start; gap: .6rem; overflow-wrap: anywhere; }
  .taa-contact-page__value, .taa-footer__email { overflow-wrap: anywhere; }

  /* Footer */
  .taa-footer { padding: 0 .5rem .5rem; }
  .taa-footer__panel { padding: 2rem 1.1rem 0; }
  .taa-footer__phone { font-size: clamp(1.55rem, 8.5vw, 2rem); overflow-wrap: anywhere; }
  .taa-footer__bottom { flex-direction: column; gap: .6rem; }
  .taa-footer__legal-row { margin-top: 2rem; }
  .taa-footer__watermark { font-size: clamp(2.4rem, 12vw, 4rem); }

  /* Blog / insights */
  .taa-insights__head .taa-btn { width: 100%; }
  .taa-blog-grid { grid-template-columns: 1fr; }
  .taa-single__hero img { max-height: 300px; }

  /* Page / CTA / 404 */
  .taa-cta .taa-btn { width: min(100%, 320px); }
  .taa-404 { padding: 3rem 0; }

  /* Floating WhatsApp */
  .taa-whatsapp { right: .9rem; bottom: .9rem; width: 48px; height: 48px; }

  /* Preloader label fits small screens */
  .taa-preloader__label { letter-spacing: .18em; padding: 0 1rem; }
  .taa-preloader__scales { width: 56px; height: 56px; }
}

/* ---------- Small phone (<= 480px) ---------- */
@media (max-width: 480px) {
  .taa-hero__people p { font-size: .8rem; }
  .taa-stats__grid { grid-template-columns: 1fr 1fr; }
  .taa-section { padding: var(--space-7) 0; }
  .taa-practice__dots button { width: 22px; }
  .taa-practice__dots button.is-active { width: 28px; }
  .taa-solutions-block { padding: 1.75rem 0; }
  .taa-outcomes__item { padding: 1.1rem; }
  .taa-card-soft { min-height: 0; padding: 1.3rem 1rem; }
  .taa-team-card { padding: 1rem; }
  .taa-footer .taa-newsletter, .taa-newsletter { max-width: 100%; }
}

/* ---------- Very small phone (<= 380px) ---------- */
@media (max-width: 380px) {
  :root { --container: calc(100% - 1.5rem); }
  .taa-stats__grid { grid-template-columns: 1fr; }
  .taa-stats__item { border-top: 1px solid var(--border-color); }
  .taa-quotes__arrows button, .taa-practice__arrows button { width: 36px; height: 36px; }
  .taa-hero__avatar { width: 38px; height: 38px; }
}