/* ==========================================================
   mobile.css — phone-only layout corrections
   ==========================================================

   Loaded AFTER every page's own {% block styles %} so it can correct the
   per-page rules without raising their specificity. Nothing here applies
   above 640px: that is the width at which this site's own stylesheets
   already collapse every grid to a single column, so it is the site's
   phone breakpoint. Desktop and tablet are untouched.

   Two tiers:
     <= 640px  phones (iPhone SE 375, standard 390, Pro Max 430)
     <= 380px  the narrow end, where padding has to give a little more

   See docs/DESIGN_SYSTEM.md for the tokens used throughout.
   ========================================================== */

@media (max-width: 640px) {

  /* ── GLOBAL RHYTHM ────────────────────────────────────────
     Retuning the tokens fixes spacing everywhere at once — every
     .container, every heading — instead of page by page. */
  :root {
    /* 24px gutters are generous on a 375px screen; 20px reads better
       and still keeps cards clear of the edges. */
    --container-padding: 1.25rem;
    /* Headings set for desktop look airy at phone sizes. */
    --lh-heading: 1.2;
    --lh-tight: 1.15;
    --lh-relaxed: 1.7;
  }

  /* The clinic mark is the whole brand; cap it so it can't crowd the
     toggle on a 375px screen, and pull the desktop inset back in so it
     balances the menu button on the far side. */
  .brand-logo {
    height: 54px;
    margin-inline-start: 0;
  }

  /* A seam mark eats into the section's top padding; give the heading its
     clearance back so it isn't sitting under the icon. */
  .features-section,
  .curriculum-section {
    padding-top: calc(var(--sp-16) + var(--sp-4));
  }

  /* Room for the pinned social bar so it can never sit on the footer. */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Long Arabic titles and Latin course names must not force a
     horizontal scroll on a 360px screen. */
  h1, h2, h3, h4, h5, h6, p, li, span, a {
    overflow-wrap: break-word;
  }

  /* Tighten the gap under a heading; the desktop value leaves the
     paragraph looking detached from the title it belongs to. */
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--sp-3);
  }

  /* ── SOCIAL BUTTONS ───────────────────────────────────────
     Site-wide, from base.html. On desktop these stack in the corner;
     on a phone that column lands squarely on card text, so it becomes
     one horizontal bar pinned to the bottom edge with an opaque
     surface behind it. Because body reserves the same height above,
     nothing is ever hidden underneath it. */
  .social-float {
    position: fixed;
    inset: auto 0 0 0;
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -2px 12px rgba(74, 37, 69, 0.10);
  }

  .social-btn {
    width: 36px;
    height: 36px;
  }

  .social-btn svg {
    width: 19px;
    height: 19px;
  }

  /* ── PAGE HEROES ──────────────────────────────────────────
     Every interior page repeats this hero shape under its own class
     name, so they are corrected together. */
  .page-hero,
  .faq-hero,
  .opinions-hero,
  .sessions-hero,
  .courses-hero,
  .cat-hero {
    padding: var(--sp-10) 0 var(--sp-8);
  }

  .page-hero h1,
  .faq-hero__title,
  .opinions-hero__title,
  .sessions-hero__title,
  .courses-hero__title,
  .cat-hero__title {
    line-height: 1.18;
    margin-bottom: var(--sp-3);
  }

  .page-hero p,
  .faq-hero__desc,
  .opinions-hero__desc,
  .sessions-hero__desc,
  .courses-hero__desc,
  .cat-hero__desc {
    font-size: var(--fs-base);
    line-height: 1.7;
  }

  /* Hero CTAs go full width rather than sitting as two odd half-pills. */
  .sessions-hero__actions,
  .courses-hero__actions,
  .cta-actions,
  .contact-actions {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .sessions-hero__actions > *,
  .courses-hero__actions > *,
  .cta-actions > *,
  .contact-actions > * {
    width: 100%;
    justify-content: center;
  }

  /* ── SECTION HEADERS ──────────────────────────────────────
     Shared shape across the homepage sections and the course pages. */
  .section-header,
  .cat-section-head,
  .cl-section-head,
  .stats-section .section-header {
    margin-bottom: var(--sp-8);
  }

  .section-title,
  .cat-section-head h2,
  .cl-section-head h2,
  .stats-section .section-header h2 {
    line-height: 1.2;
    margin-bottom: var(--sp-2);
  }

  .section-subtitle,
  .cat-section-head p,
  .cl-section-head p,
  .stats-section .section-header p {
    font-size: var(--fs-base);
    line-height: 1.7;
  }


  /* ══════════════════════════════════════════════════════════
     HOME
     ══════════════════════════════════════════════════════════ */

  /* Hero: copy centred under the media, tighter vertical rhythm. */
  .index-hero {
    padding: calc(var(--navbar-height) + var(--sp-6)) 0 var(--sp-10);
  }

  /* index.html declares `.hero-grid.has-video` (0,2,0) with two columns, which
     outranks the single-column `.hero-grid` (0,1,0) inside its own max-width
     query — so once a hero video is uploaded the hero never collapses and the
     title is squeezed into half the screen. Matching that specificity here
     restores the intended single column. */
  .hero-grid,
  .hero-grid.has-video {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    text-align: center;
  }

  .hero-title {
    line-height: 1.15;
    margin-bottom: var(--sp-4);
  }

  .hero-desc {
    font-size: var(--fs-base);
    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
  }

  .hero-actions > * {
    width: 100%;
  }

  /* Text + media sections stack centred, media first, equal gutters. */
  .about-grid,
  .outcomes-grid {
    gap: var(--sp-6);
    text-align: center;
  }

  .about-image,
  .outcomes-image {
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-2xl);
  }

  /* The rule under the About heading has to follow the centred text. */
  .about-content h3 {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
  }

  .about-content h3::after {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .about-signature {
    text-align: start;
    padding: var(--sp-4) var(--sp-5);
  }

  /* Lists stay left-aligned even inside a centred section — centred
     bullet text is hard to scan. */
  .outcomes-lead {
    text-align: center;
    margin-bottom: var(--sp-5);
  }

  .outcomes-list li {
    text-align: start;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  /* Section padding: --sp-24 (96px) between every band is far too much
     stacked up on a phone. */
  .about-section,
  .features-section,
  .curriculum-section,
  .vm-section,
  .outcomes-section,
  .testimonials-section,
  .stats-section,
  .cta-section,
  .index-hero + .credentials-band + * {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
  }

  .home-faq-section,
  .faq-section {
    padding: var(--sp-12) 0;
  }

  .feature-card,
  .vm-card {
    padding: var(--sp-6);
  }

  .feature-card h3,
  .vm-card h3,
  .curriculum-item h3 {
    line-height: 1.25;
    margin-bottom: var(--sp-2);
  }

  .curriculum-item {
    padding: var(--sp-5);
    gap: var(--sp-3);
  }

  /* Stat cards keep icon and number on one row but stop the number
     from crowding its label. */
  .stat-card {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .stat-number {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  .announcement-card {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .cta-title {
    line-height: 1.2;
    margin-bottom: var(--sp-3);
  }

  .cta-desc {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-6);
  }


  /* ══════════════════════════════════════════════════════════
     COURSES — categories grid, course list, category page
     ══════════════════════════════════════════════════════════ */

  .cat-section,
  .cl-section {
    padding: var(--sp-10) 0;
  }

  /* Category card: icon centred above the title, even padding all round. */
  .cat-card {
    padding: var(--sp-6) var(--sp-5);
    gap: var(--sp-3);
  }

  .cat-card__icon {
    width: 62px;
    height: 62px;
  }

  .cat-card__icon svg {
    width: 30px;
    height: 30px;
  }

  .cat-card__name {
    margin-top: var(--sp-1);
    line-height: 1.25;
  }

  /* "Browse this specialty" is revealed on hover, which a touch screen never
     fires — so on a phone it was invisible while still taking up its space.
     Show it permanently and group it with the course count above it. */
  .cat-card__arrow {
    opacity: 1;
    transform: none;
  }

  /* Filter pills wrap onto as many rows as they need and stay centred.
     They are deliberately NOT a horizontal scroll strip: with only three
     or four filters, anything pushed off-screen would simply go unfound. */
  .cl-filters,
  .testimonial-filters {
    gap: var(--sp-2);
    padding-inline: var(--container-padding);
  }

  .cl-filter,
  .filter-btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
  }

  /* Course card: equal padding on every side, and the price/CTA group
     pulled together instead of pinned to opposite edges. */
  .cl-card__body {
    padding: var(--sp-5);
  }

  .cl-card__title {
    font-size: var(--fs-base);
    line-height: 1.35;
    margin-bottom: var(--sp-2);
  }

  .cl-card__desc {
    line-height: 1.65;
  }

  .cl-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
  }

  /* Price and any struck-through original read as one line, centred
     over the button they belong to. */
  .cl-card__price,
  .cl-card__price--free {
    justify-content: center;
    text-align: center;
  }

  .cl-card__btns {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .cl-card__btns > * {
    flex: 1 1 0;
  }

  .btn-card {
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--fs-sm);
  }

  /* Badges sit over the image corners — keep them small enough that a
     "free + certificate" pair cannot meet in the middle. */
  .cl-card__badge,
  .cl-card__cert,
  .cl-card__off {
    font-size: 0.6875rem;
    padding: 2px var(--sp-2);
    max-width: 44%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Category page hero */
  .cat-hero__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
  }

  .cat-hero__meta {
    justify-content: center;
  }

  .cl-empty,
  .cat-empty,
  .empty-state,
  .empty-card {
    padding: var(--sp-10) var(--sp-5);
  }


  /* ══════════════════════════════════════════════════════════
     OPINIONS / TESTIMONIALS
     ══════════════════════════════════════════════════════════ */

  .reviews-section {
    padding: var(--sp-8) 0 var(--sp-12);
  }

  .filter-section {
    padding-top: var(--sp-6);
  }

  .hero-stats {
    gap: var(--sp-8);
    margin-top: var(--sp-6);
  }

  .hero-stat__value {
    font-size: 1.75rem;
  }

  /* One column: photo centred above the name, name above the quote.
     The desktop row leaves the name cramped beside the avatar here. */
  .testimonial-card {
    padding: var(--sp-6) var(--sp-5);
    gap: var(--sp-3);
    text-align: center;
  }

  .testimonial-author {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
  }

  .testimonial-avatar {
    width: 64px;
    height: 64px;
  }

  .testimonial-info h4 {
    margin-bottom: var(--sp-1);
  }

  .testimonial-rating {
    justify-content: center;
  }

  .testimonial-text {
    text-align: start;
    padding-top: var(--sp-1);
  }

  /* The five-star medal is absolutely placed; centring the header would
     otherwise let it land on the reviewer's name. Park it top-start and
     give the card enough head room to clear it. */
  .testimonial-card.featured-testimonial {
    padding-top: var(--sp-8);
  }

  .five-star-badge {
    top: var(--sp-3);
    inset-inline-end: var(--sp-3);
    width: 28px;
    height: 28px;
  }

  .five-star-badge svg {
    width: 15px;
    height: 15px;
  }

  .featured-badge {
    align-self: center;
  }

  .testimonial-actions {
    justify-content: center;
  }

  /* Homepage quote cards use the same class with a different structure. */
  .testimonials-grid .testimonial-card {
    text-align: start;
  }

  .testimonials-grid .testimonial-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }


  /* ══════════════════════════════════════════════════════════
     FAQ
     ══════════════════════════════════════════════════════════ */

  .faq-grid {
    gap: var(--sp-3);
  }

  /* The +/− control must never crowd the question. Fixed width, a real
     gap, and the text free to wrap into the space that is left. */
  .faq-question {
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }

  .faq-question-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .faq-icon {
    width: 28px;
    height: 28px;
    /* Optically centre the control against the first line of the question. */
    margin-top: 1px;
  }

  .faq-icon::before,
  .faq-icon::after {
    width: 12px;
  }

  .faq-answer-content {
    padding: 0 var(--sp-4) var(--sp-4);
  }

  .faq-answer-content p {
    line-height: 1.7;
  }

  /* Homepage accordion is a <details>/<summary> variant of the same thing. */
  .faq-item summary {
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .faq-item summary::after {
    width: 28px;
    height: 28px;
    margin-top: 1px;
  }

  .faq-item p {
    padding: 0 var(--sp-4) var(--sp-4);
  }

  .contact-section {
    padding-bottom: var(--sp-12);
  }

  .contact-card {
    padding: var(--sp-8) var(--sp-5);
  }

  .contact-card h3 {
    line-height: 1.2;
    margin-bottom: var(--sp-2);
  }

  .contact-card p {
    margin-bottom: var(--sp-6);
  }


  /* ══════════════════════════════════════════════════════════
     SESSIONS
     ══════════════════════════════════════════════════════════ */

  .sessions-section {
    padding: var(--sp-10) 0;
  }

  .sessions-grid {
    /* 340px minimum overflows a 360px screen once gutters are taken off. */
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .session-body {
    padding: var(--sp-5);
    gap: var(--sp-3);
  }

  /* Title above its mode badge — side by side, the badge squeezes a long
     Arabic title into a three-line column. */
  .session-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .session-title {
    font-size: var(--fs-base);
    line-height: 1.35;
  }

  .session-when {
    gap: var(--sp-2);
  }

  .session-date-badge {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.75rem;
  }

  .session-countdown {
    padding: var(--sp-3);
    gap: var(--sp-1);
  }

  .countdown-unit {
    min-width: 0;
  }

  .countdown-value {
    font-size: 1.15rem;
  }

  .session-meta-item {
    font-size: var(--fs-sm);
    gap: var(--sp-2);
  }

  .session-list li {
    padding-inline-start: var(--sp-4);
    line-height: 1.65;
  }

  .session-owner-meta {
    padding: var(--sp-3);
  }

  /* Booking actions: one full-width button per row, in reading order. */
  .session-actions {
    padding-top: var(--sp-4);
  }

  .session-actions-group {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .session-actions-group > *,
  .session-actions-group form {
    width: 100%;
  }

  .btn-session {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
  }


  /* ══════════════════════════════════════════════════════════
     FOOTER — clear of the pinned social bar
     ══════════════════════════════════════════════════════════ */

  .footer-content {
    gap: var(--sp-6);
  }

  .footer-social {
    justify-content: flex-start;
  }
}


/* ── NARROW PHONES (360px and below) ────────────────────────
   Only the gutters and the largest type need to give further. */
@media (max-width: 380px) {
  :root {
    --container-padding: 1rem;
  }

  .brand-logo {
    height: 46px;
  }

  .hero-title,
  .page-hero h1,
  .faq-hero__title,
  .opinions-hero__title,
  .sessions-hero__title,
  .courses-hero__title {
    font-size: 1.6rem;
  }

  .cl-card__body,
  .testimonial-card,
  .session-body,
  .feature-card,
  .vm-card {
    padding: var(--sp-4);
  }

  .cl-card__footer {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }

  /* Two CTAs side by side stop fitting once the gutter is this tight. */
  .cl-card__btns {
    flex-wrap: wrap;
  }

  .cl-card__btns > * {
    flex: 1 1 100%;
  }

  .countdown-value {
    font-size: 1rem;
  }

  .countdown-label {
    font-size: 0.625rem;
  }
}