/* =============================================================
   Skoulikas Auto Repair — Mobile responsive layer
   Στόχος: εμφάνιση κινητού στα πρότυπα του dentglow prototype.
   Όλα τα rules είναι μέσα σε media queries -> το desktop μένει ως έχει.
   ============================================================= */

/* -------------------------------------------------------------
   1. MOBILE / TABLET MENU (dropdown) — ήταν άσπρο πάνελ με
      άσπρα γράμματα, δηλαδή πρακτικά αόρατο.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* κανένα οριζόντιο scroll — το κλειστό dropdown του menu
     προεξέχει μέχρι να το τοποθετήσει το JS του Elementor */
  html {
    overflow-x: clip;
  }

  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    max-width: 100vw !important;
    background-color: #0d0d0d !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .elementor-nav-menu--dropdown .elementor-item,
  .elementor-nav-menu--dropdown .elementor-sub-item {
    color: #fafafa !important;
    background-color: transparent !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item:focus,
  .elementor-nav-menu--dropdown .elementor-item.highlighted,
  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #ec1313 !important;
    background-color: rgba(236, 19, 19, .09) !important;
  }

  .elementor-menu-toggle {
    color: #fafafa !important;
    background-color: transparent !important;
    padding: 6px !important;
  }
}

/* -------------------------------------------------------------
   2. HEADER — έσπαγε σε 2 σειρές (λογότυπο πάνω, burger κάτω)
      και έπιανε 135px ύψος. Τώρα μία σειρά, ~60px.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  /* το header container είχε min-height: 135px */
  header.elementor-location-header > .e-con {
    min-height: 62px !important;
    height: auto !important;
  }

  header.elementor-location-header > .e-con > .e-con-inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    flex-wrap: nowrap !important;
  }

  header.elementor-location-header .e-con {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  header.elementor-location-header .e-con-inner > .e-con {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* ομάδα λογότυπου: να μπορεί να συρρικνωθεί */
  header.elementor-location-header .e-con-inner > .e-con > .e-con:first-child {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* ομάδα ενεργειών (burger / τηλέφωνο): σταθερή */
  header.elementor-location-header .e-con-inner > .e-con > .e-con:last-child {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  header.elementor-location-header .elementor-widget-image img {
    width: 38px !important;
    height: 38px !important;
  }

  header.elementor-location-header .elementor-widget-heading .elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------
   3. ΚΑΘΕΤΟΣ ΡΥΘΜΟΣ — το πρώτο section είχε 120px padding-top
      κάτω από ένα ήδη ψηλό header.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  body > div.elementor > .e-con.e-parent:first-child > .e-con-inner {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* -------------------------------------------------------------
   4. ΤΥΠΟΓΡΑΦΙΑ — κλίμακα ίδια με το prototype
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(27px, 8.6vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.5px !important;
  }

  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(23px, 7.3vw, 29px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.3px !important;
  }

  /* τα inline span μέσα σε τίτλους να ακολουθούν τον τίτλο */
  .elementor-widget-heading h1.elementor-heading-title span,
  .elementor-widget-heading h2.elementor-heading-title span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  /* σπάσιμο μεγάλων λέξεων, ποτέ οριζόντιο scroll */
  h1, h2, h3, h4, p, li,
  .elementor-widget-text-editor {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* -------------------------------------------------------------
   5. ΚΟΥΜΠΙΑ — στο prototype είναι full width, ~48px ύψος.
      Στο site είχαν τυχαία πλάτη (186 / 207 / 285 / 300px).
      Εξαιρούνται header, footer και όσα έχουν elementor-align-*.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  .elementor-widget-button:not([class*="elementor-align-"]) .elementor-button {
    width: 100% !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body > div.elementor .elementor-widget-button:not([class*="elementor-align-"]) {
    width: 100% !important;
  }

  header.elementor-location-header .elementor-widget-button,
  footer .elementor-widget-button {
    width: auto !important;
  }

  header.elementor-location-header .elementor-widget-button .elementor-button,
  footer .elementor-widget-button .elementor-button {
    width: auto !important;
    min-height: 44px !important;
  }

  footer .elementor-widget-button.elementor-align-left .elementor-button {
    padding-right: 8px !important;
  }
}

/* -------------------------------------------------------------
   6. FOOTER — οι επικεφαλίδες στηλών ήταν 28px (όσο ένα H2)
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  footer .elementor-widget-heading h4.elementor-heading-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    opacity: .92;
  }
}

/* -------------------------------------------------------------
   7. ΣΕΙΡΑ ΣΤΑΤΙΣΤΙΚΩΝ (500+ / 8+ / 100%) — έσπαγε 2+1
      επειδή 3x106 + 2x14 = 346 > 343 διαθέσιμα.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  .elementor-element-53ab305 {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .elementor-element-53ab305 > .e-con {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* -------------------------------------------------------------
   8. SLIDER ΠΡΙΝ/ΜΕΤΑ — η πάνω εικόνα έπαιρνε σταθερό πλάτος
      σε px από JS και ξέφευγε από το κάδρο σε resize/rotate.
      Καθαρά CSS λύση: πλάτος = ύψος x 4/3 = πλάτος κάδρου.
   ------------------------------------------------------------- */
.pdr-ba .pdr-ba-top img {
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
  .pdr-ba { border-radius: 14px; }
  .pdr-ba-tag { font-size: 11px !important; padding: 4px 10px !important; }
  .pdr-ba-knob { width: 44px !important; height: 44px !important; }
}

/* -------------------------------------------------------------
   9. ΚΑΡΤΕΣ ΥΠΗΡΕΣΙΩΝ / ΠΛΕΟΝΕΚΤΗΜΑΤΩΝ — κείμενο 16px ήταν
      πολύ μεγάλο μέσα σε κάρτα (prototype: 14px)
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  .elementor-element-282fbb4, .elementor-element-cf2c6fc, .elementor-element-ddd3c8e,
  .elementor-element-6a0c056, .elementor-element-4f76735, .elementor-element-b807c0c,
  .elementor-element-ef21942, .elementor-element-c86cf6a, .elementor-element-f7f34aa {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
}

/* -------------------------------------------------------------
   10. ΑΞΙΟΛΟΓΗΣΕΙΣ — μία κριτική έπιανε 900px ύψος σε κινητό.
       Κόβεται στις 7 σειρές με κουμπί «Περισσότερα» (το JS
       προσθέτει την κλάση .pdr-clamped).
   ------------------------------------------------------------- */
@media (max-width: 767px) {

  .pdr-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pdr-more {
    display: inline-block;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 0;
    color: #ec1313;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .2px;
    cursor: pointer;
  }
}

/* -------------------------------------------------------------
   11. ΜΙΚΡΕΣ ΟΘΟΝΕΣ (<=360px)
   ------------------------------------------------------------- */
@media (max-width: 360px) {

  header.elementor-location-header .elementor-widget-heading .elementor-heading-title {
    font-size: 15px !important;
  }

  header.elementor-location-header .elementor-widget-image img {
    width: 34px !important;
    height: 34px !important;
  }

  .elementor-element-53ab305 > .e-con .elementor-heading-title {
    font-size: 13px !important;
  }
}