/* ============================================================================
   Mon Cheri — phone layer (≤ 860px), shared by the public site and the admin.

   The prototypes are desktop-first. Both wrap their content in a container with
   `overflow-x: hidden`, so nothing scrolls sideways — it just gets cut off, and
   the damage is invisible to a naive overflow check. Two things cause it:

   1. Grid children default to `min-width: auto`, so a 74px headline refuses to
      shrink below its longest word and blows its column past the viewport.
   2. The type scale and 28–40px gutters never change size.

   So: unlock the grid children, bring the scale down, drop the gutters, and
   re-cut the layouts that only read at desk width. Nothing here changes copy,
   colour, or behaviour — only how much room each thing takes.
   ========================================================================= */

@media (max-width: 860px) {

  /* ---- the blowout fix, first ------------------------------------------- */
  [style*="display: grid"] > * { min-width: 0; }

  /* ---- page gutters ------------------------------------------------------ */
  [style*="max-width: 1180px"],
  [style*="max-width: 1400px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* the long editorial sections breathe less on a phone */
  [style*="padding: 96px 40px 110px"] { padding: 48px 20px 56px !important; }
  [style*="padding: 104px 40px"],
  [style*="padding: 100px 40px"],
  [style*="padding: 96px 40px"]  { padding: 56px 20px !important; }

  /* ---- type scale -------------------------------------------------------- */
  [style*="font-size: 74px"] { font-size: clamp(32px, 9.8vw, 44px) !important; }
  [style*="font-size: 58px"] { font-size: clamp(30px, 9vw, 40px) !important; }
  [style*="font-size: 46px"] { font-size: clamp(25px, 7.2vw, 32px) !important; }
  [style*="font-size: 44px"] { font-size: clamp(25px, 7vw, 31px) !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }

  /* ---- two-up layouts stack ---------------------------------------------- */
  [style*="1.05fr 0.95fr"],
  [style*="0.85fr 1.15fr"],
  [style*="0.72fr 1.28fr"],
  [style*="1.1fr 0.9fr"],
  [style*="1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* three and two up become one; four becomes two; five becomes three.
     repeat(7, 1fr) is a week — it stays seven, always. */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
  [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"],
  [style*="columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* ---- public site ------------------------------------------------------- */

  /* the header keeps the mark, the language pair and the one button that
     matters; on a 390px screen there is no room for anything else */
  .mc-cta { white-space: nowrap; }
  [style*="max-width: 1180px"][style*="display: flex"] { gap: 12px !important; }

  /* the booking panel is a card inside a card at desk width — one is enough */
  [style*="border-radius: 30px"][style*="padding: 40px"] {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  /* ---- admin ------------------------------------------------------------- */

  /* The masthead is sticky, so every row it keeps is a row the calendar loses
     for the whole session. Wrap it, shrink it, and drop the date — the screens
     underneath are all dated already. */
  [style*="padding: 14px 28px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  [style*="padding: 14px 28px"] > .text-muted { display: none !important; }
  [style*="padding: 14px 28px"] .btn { padding: 8px 13px !important; font-size: 11px !important; }
  [style*="padding: 14px 28px"] [style*="font-size: 17px"] { font-size: 15px !important; }
  /* "Admin" next to the mark — you already know where you are */
  [style*="padding: 14px 28px"] [style*="font-size: 11px"] { display: none !important; }
  [style*="padding: 14px 28px"] [style*="font-size: 17px"] { letter-spacing: .1em !important; }

  /* six tabs never fit — let the strip scroll instead of wrapping into rubble */
  [style*="padding: 0px 28px"][style*="gap: 28px"],
  [style*="padding: 0 28px"][style*="gap: 28px"] {
    padding: 0 16px !important;
    gap: 20px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [style*="padding: 0px 28px"][style*="gap: 28px"]::-webkit-scrollbar { display: none; }
  .ad-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 15px 2px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  [style*="padding: 28px 28px 80px"] { padding: 20px 16px 64px !important; }

  /* Booking requests and reminders stack into one card per row: every value
     is self-describing (a name, a time, a service), so they lose nothing. */
  [style*="150px 1fr 220px auto"],
  [style*="120px 1fr 240px auto"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* The client list is different — "1", "17.8." and "Manikura" mean nothing
     without the heading above them. Keep it a table and let it scroll. */
  [style*="border-top"]:has(> [style*="1fr 220px 120px 140px 160px"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [style*="1fr 220px 120px 140px 160px"] {
    grid-template-columns: 170px 180px 62px 72px 150px !important;
    gap: 14px !important;
  }

  /* service and opening-hours rows keep their controls beside the label */
  [style*="1fr auto auto"] { gap: 10px !important; }

  /* a week is seven days wide or it is not a week. Keep all seven and shrink
     what is inside them: at 360px a card is 42px and "Zatvoreno" is 46px. */
  [style*="repeat(7, 1fr)"], [style*="repeat(7,1fr)"] { gap: 5px !important; }
  .ad-day { padding-left: 3px !important; padding-right: 3px !important; }
  .ad-day [style*="font-size: 21px"] { font-size: 16px !important; }
  .ad-day [style*="font-size: 11px"] { font-size: 9px !important; }
  .ad-day [style*="font-size: 10px"] {
    font-size: 8.5px !important;
    letter-spacing: .06em !important;
  }

  /* the two-station day calendar is the point of the screen: keep both
     columns, just give the hour gutter less room */
  [style*="58px 1fr 1fr"] { grid-template-columns: 44px 1fr 1fr !important; }

  /* thumb-sized controls */
  .btn { padding: 11px 16px !important; }
  .ad-in { font-size: 16px !important; }   /* stops iOS zooming on focus */
}