/* ==========================================================================
   Dr Samir Ghoraba - mobile refinements
   Client revision list, September 2026. Points 2-5 only.

   In scope : celebrities section, contact form typography, location cards,
              Before & After gallery.
   NOT here : header, hero/video, the GET IN TOUCH bar, the floating contact
              bar. Those are a separate task and are deliberately untouched.

   Everything is class/ID based and the element IDs are shared by all five
   WPML translations, so this applies to en / ar / fr / es / zh-hans alike.
   ========================================================================== */

@media (max-width: 767px) {

  :root {
    --dsg-ink:   #FFFFFF;
    --dsg-teal:  #144C48;   /* site accent - celebrity rings, see-more border */
    --dsg-hair:  rgba(255,255,255,.125);
  }

  /* ======================================================================
     2 - CELEBRITIES: shorter section, smaller icons
     ====================================================================== */
  .clients-tabs .tabs-header {
    gap: 8px !important;
    row-gap: 8px !important;
    padding: 0 15px !important;
  }
  .clients-tabs .client-tab {
    padding: 4px !important;
    gap: 9px !important;
    border-radius: 999px !important;
  }
  .clients-tabs .client-tab.active { padding: 4px 14px 4px 4px !important; }
  .clients-tabs .client-image { width: 48px !important; height: 48px !important; }
  .clients-tabs .client-info h4,
  .clients-tabs .client-info .client-name { font-size: 15px !important; line-height: 1.2 !important; }
  .clients-tabs .client-info p,
  .clients-tabs .client-info .client-role { font-size: 11px !important; line-height: 1.3 !important; }

  /* SEE MORE: same 60px circle as the avatar tabs, text centred on two lines.
     The narrow padding box is what forces the wrap, so it works in every
     language rather than relying on a hard-coded line break. */
  .clients-tabs .see-more {
    width: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
    white-space: pre-line !important;
    overflow-wrap: break-word;
  }

  .clients-tabs .tabs-content { padding-top: 4px !important; }
  .clients-tabs .tab-content { padding: 0 !important; }
  .clients-tabs .content-grid { padding: 14px 0 !important; gap: 10px !important; }
  .clients-tabs .brief,
  .clients-tabs .content-image-wrapper,
  .clients-tabs .content-image {
    height: 355px !important;
    min-height: 355px !important;
    max-height: 355px !important;
  }
  .clients-tabs .brief { padding: 14px !important; }
  .clients-tabs .brief-content { overflow-y: auto; }
  .clients-tabs .brief h4 { margin: 14px 0 8px !important; }
  .clients-tabs .services-buttons { margin-top: 10px !important; }
  .clients-tabs h3 { font-size: 16px !important; }
  .clients-tabs h4 { font-size: 14px !important; }

  /* ======================================================================
     HERO VIDEO HEIGHT (client point 5)
     Elementor sets --min-height:800px on this section. That is a fixed pixel
     value, so on any phone shorter than 800px the headline is pushed below
     the fold - on a 658px viewport it started at y=621, behind the sticky
     GET IN TOUCH bar. Switching to a viewport unit keeps the video dominant
     but always leaves the headline and intro visible on first paint.

     Elementor's selector is .elementor-<postid> .elementor-element
     .elementor-element-7ff923e (three classes). The post id differs per
     language, so we out-specify it with html + three classes instead.
     ====================================================================== */
  html .elementor-element.elementor-element-7ff923e.e-con {
    --min-height: 84vh !important;
  }

  /* ======================================================================
     3 - CONTACT FORM: typography aligned with the rest of the site
     (section lives in the footer template, so it is site-wide)
     ====================================================================== */
  .elementor-element-ce88c52 h2,
  .elementor-element-ce88c52 h2.elementor-heading-title {
    font-size: 22px !important;
    font-weight: 100 !important;
    letter-spacing: .04em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }
  /* small eyebrow above the heading */
  .elementor-element-ce88c52 .elementor-element-f4cb675 .elementor-heading-title {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .20em !important;
    text-transform: uppercase !important;
    opacity: .55;
  }
  /* intro paragraph only - scoped to its own widget so it does not reach the
     paragraphs inside the location cards further down the same section */
  .elementor-element-ce88c52 .elementor-element-5a0d2c7,
  .elementor-element-ce88c52 .elementor-element-5a0d2c7 p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .elementor-element-ce88c52 .elementor-field-group > label,
  .elementor-element-ce88c52 .elementor-field-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
    opacity: .72;
  }
  /* Elementor emits .elementor-<postid> .elementor-element.elementor-element-ce88c52
     .elementor-field-textual { font-size:13px !important } for this form, which is
     four classes. The post id differs per language, so instead of matching it we
     out-specify it: html + four classes. Same trick for the submit button. */
  html .elementor-element.elementor-element-ce88c52 .elementor-field-group .elementor-field-textual,
  html .elementor-element.elementor-element-ce88c52 .elementor-field-group input.elementor-field,
  html .elementor-element.elementor-element-ce88c52 .elementor-field-group textarea.elementor-field,
  html .elementor-element.elementor-element-ce88c52 .elementor-field-group select.elementor-field {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  .elementor-element-ce88c52 .elementor-form-fields-wrapper { row-gap: 4px !important; }
  .elementor-element-ce88c52 .elementor-field-group { margin-bottom: 14px !important; }
  .elementor-element-ce88c52 .elementor-field-option label { font-size: 13px !important; }
  html .elementor-element.elementor-element-ce88c52 .elementor-form .elementor-button,
  html .elementor-element.elementor-element-ce88c52 .elementor-form button[type="submit"] {
    font-size: 12px !important;
    letter-spacing: .18em !important;
    padding: 15px 20px !important;
  }
  .elementor-element-ce88c52 .elementor-tab-title,
  .elementor-element-ce88c52 [class*="tab-title"] {
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }

  /* ======================================================================
     4 - LOCATION CARDS: compact, and the number reads as an action
     ====================================================================== */
  .location-card {
    padding: 22px 20px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }
  .location-card .elementor-heading-title { line-height: 1.15 !important; }
  .location-card > .elementor-element:nth-child(1) .elementor-heading-title {
    font-size: 10px !important;
    letter-spacing: .16em !important;
    opacity: .6;
  }
  .location-card > .elementor-element:nth-child(2) .elementor-heading-title {
    font-size: 21px !important;
  }
  .location-card .elementor-divider { padding: 10px 0 !important; }
  .location-card p { font-size: 12.5px !important; line-height: 1.45 !important; margin: 0 !important; }

  .location-card a[href^="tel:"] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 16px 9px 13px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(20,76,72,.42);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--dsg-ink) !important;
    font-family: "Sofia Sans Condensed", "Sofia Sans", sans-serif;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease;
  }
  .location-card a[href^="tel:"]::before {
    content: "";
    width: 13px; height: 13px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--dsg-phone-mask) center/contain no-repeat;
            mask: var(--dsg-phone-mask) center/contain no-repeat;
  }
  .location-card a[href^="tel:"]::after {
    content: "";
    width: 5px; height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px;
    opacity: .7;
  }
  .location-card a[href^="tel:"]:hover,
  .location-card a[href^="tel:"]:active {
    background: rgba(20,76,72,.62);
    border-color: rgba(255,255,255,.7);
  }

  /* ======================================================================
     5 - BEFORE & AFTER: bigger images, smaller labels
     Default is one column; the 1 / 2 / 3 switcher stays available.
     ====================================================================== */
  .fg-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .fg-grid.fg-cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 11px !important; }
  .fg-grid.fg-cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .fg-grid.fg-cols-2 .fg-ba-btn { padding: 3px 9px !important; font-size: 8px !important; }
  .fg-grid.fg-cols-3 .fg-ba-btn { padding: 3px 7px !important; font-size: 7px !important; letter-spacing: .06em !important; }

  .fg-item {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .fg-ba-wrap {
    position: relative;
    width: 100% !important;
    aspect-ratio: 4 / 5;
    height: auto !important;
    border-radius: 10px;
    overflow: hidden;
  }
  .fg-ba-img { width: 100% !important; height: 100% !important; object-fit: cover; }
  .fg-ba-btns {
    position: absolute !important;
    width: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: 10px !important;
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 999px;
    background: rgba(12,12,12,.62);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
  }
  .fg-ba-btn {
    padding: 4px 13px !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255,255,255,.65) !important;
  }
  .fg-ba-btn.active {
    background: var(--dsg-ink) !important;
    color: #121212 !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   5 - BEFORE & AFTER on desktop: taller cards, the same compact labels
   ========================================================================== */
@media (min-width: 768px) {
  .fg-item {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .fg-ba-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    height: auto !important;
    border-radius: 10px;
    overflow: hidden;
  }
  .fg-ba-img { width: 100% !important; height: 100% !important; object-fit: cover; }
  .fg-ba-btns {
    position: absolute !important;
    width: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: 12px !important;
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 999px;
    background: rgba(12,12,12,.62);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
  }
  .fg-ba-btn {
    padding: 5px 15px !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255,255,255,.65) !important;
  }
  .fg-ba-btn.active { background: #FFFFFF !important; color: #121212 !important; font-weight: 700 !important; }
}