/* ────────── Responsive overrides ──────────
   All site UI uses inline styles + fixed widths around 1440px design.
   This file adapts the layout to tablet (<=900px) and mobile (<=600px)
   by overriding common patterns with !important. Inline styles don't
   carry !important so CSS rules with !important win. */

/* ─────── Tablet & mobile (<= 900px) ─────── */
@media (max-width: 900px) {
  html, body { min-width: 0 !important; overflow-x: hidden !important; }
  body { font-size: 15px; }

  /* Generic section padding — 16px sides everywhere on mobile */
  section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Drop fixed 1312/1100/900 max-widths */
  [style*="maxWidth: 1312"], [style*="max-width: 1312"],
  [style*="maxWidth: 1100"], [style*="max-width: 1100"],
  [style*="maxWidth: 1156"], [style*="max-width: 1156"],
  [style*="maxWidth: 912"],  [style*="max-width: 912"],
  [style*="maxWidth: 1088"], [style*="max-width: 1088"],
  [style*="maxWidth: 900"],  [style*="max-width: 900"],
  [style*="maxWidth: 760"],  [style*="max-width: 760"],
  [style*="maxWidth: 760"]  { max-width: 100% !important; }

  /* Inner content paddings — zero out horizontal so section-edge padding is the source of truth */
  [style*="padding: 0 40px"], [style*="padding: 40px"] {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* Section-level paddings: normalize horizontal to 16px, keep vertical */
  [style*="padding: 180px 24px 80px"] { padding: 120px 16px 48px !important; }
  [style*="padding: 40px 24px 80px"] { padding: 24px 16px 48px !important; }
  [style*="padding: 200px 24px 80px"] { padding: 130px 16px 48px !important; }
  /* Article body/hero inner column — match the 40px inner inset other sections keep */
  [style*="max-width: 912px"] { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
  [style*="padding: 80px 24px"] { padding: 48px 16px !important; }
  [style*="padding: 180px 24px"] { padding: 120px 16px 48px !important; }
  [style*="padding: 80px 0"] { padding: 48px 0 !important; }
  [style*="padding: 40px 64px"] { padding: 20px 16px !important; }
  [style*="padding: 0 64px"] { padding: 0 16px !important; }
  [style*="padding: 64px 24px"] { padding: 40px 16px !important; }
  [style*="padding: 96px 24px"] { padding: 48px 16px !important; }
  [style*="padding: 120px 24px"] { padding: 56px 16px !important; }
  /* WstepHome — collapse bottom space and quote padding on mobile */
  [style*="padding: 0 24px 120px"] { padding: 0 16px 32px !important; min-height: 0 !important; }
  [style*="padding: 80px 20px"] { padding: 28px 0 !important; }
  /* WstepHome — hide background image entirely on mobile */
  [style*="wstep_pyl"] { display: none !important; }
  /* WstepHome — aggressively force grid flatten + center text. Section has both min-height:720 and padding:0px 24px 120px */
  [style*="padding: 0 24px 120px"] [style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    margin-bottom: 24px !important;
    gap: 0 !important;
  }
  [style*="padding: 0 24px 120px"] [style*="grid-template-columns"] > div:first-child {
    display: none !important;
  }
  [style*="padding: 0 24px 120px"] h2,
  [style*="padding: 0 24px 120px"] p,
  [style*="padding: 0 24px 120px"] blockquote {
    text-align: center !important;
  }
  [style*="padding: 0 24px 120px"] [style*="flex-direction: column"],
  [style*="padding: 0 24px 120px"] [style*="flex-direction: column"] {
    /* Don't force stretch — leave inherited alignment (some children like the moon img need to stay center) */
  }
  [style*="padding: 0 24px 120px"] h2 br { display: none !important; }
  /* Ensure the moon img in the quote block stays centered */
  [style*="padding: 0 24px 120px"] [style*="align-items: center"] img { align-self: center !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }
  /* JakPracujemy — hide background image on mobile + tighten spacing + smaller icons */
  [src*="jak-pracujemy/infinite"] { display: none !important; }
  [style*="margin-bottom: 150px"] { margin-bottom: 32px !important; }
  [style*="width: 64px"][style*="height: 64px"] {
    width: 44px !important;
    height: 44px !important;
  }
  /* Remove inner card padding so icons/text hug the section edge */
  [style*="padding: 16px"] { padding: 0 !important; }

  /* Eksperci carousel — stack photo above text, center text on mobile */
  [style*="grid-template-columns: 348px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns:  348px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
    text-align: center !important;
  }
  /* Expert photo square — keep on top, shrink */
  [style*="width: 348px"][style*="height: 348px"],
  [style*="width: 320px"][style*="height: 320px"] {
    width: 220px !important;
    height: 220px !important;
    max-width: 70vw !important;
    max-height: 70vw !important;
  }
  /* Center text content in right column (now stacked below) */
  [style*="padding-right: 8px"] {
    padding-right: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }
  [style*="padding-right: 8px"] * {
    text-align: center !important;
  }

  /* Hero heights */
  [style*="height: 1000"] { height: auto !important; min-height: 640px !important; padding-top: 100px !important; padding-bottom: 60px !important; }
  [style*="height: 559"] { height: auto !important; min-height: 420px !important; padding-top: 100px !important; padding-bottom: 48px !important; }
  [style*="minHeight: 560"] { min-height: 420px !important; padding-top: 100px !important; padding-bottom: 48px !important; }
  [style*="minHeight: 720"] { min-height: 420px !important; }

  /* Headings */
  h1 { font-size: 44px !important; line-height: 1.18 !important; }
  h2 { font-size: 28px !important; line-height: 1.22 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }

  /* Inline-sized headings (Playfair Display) — many components use literal fontSize numbers */
  [style*="font-size: 72px"] { font-size: 44px !important; }
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size: 52px"] { font-size: 36px !important; }
  [style*="font-size: 48px"] { font-size: 32px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 20px !important; }
  [style*="font-size: 24px"] { font-size: 18px !important; }
  [style*="font-size: 22px"] { font-size: 17px !important; }

  /* Body text — drop 18px → 16px and 16px → 14px */
  [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 15px !important; }
  [style*="font-size: 16px"] { font-size: 14px !important; }
  [style*="font-size: 15px"] { font-size: 13px !important; }

  /* Flatten 2-col grids → 1 col */
  [style*="grid-template-columns: 537px 1fr"],
  [style*="grid-template-columns: 620px 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 620px"],
  [style*="grid-template-columns: 1fr 520px"],
  [style*="grid-template-columns: 537px 1fr"],
  [style*="grid-template-columns: 314px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    row-gap: 32px !important;
  }

  /* Zalety tiles — 1 column on mobile */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* Flex rows with big gaps go vertical */
  [style*="gap: 72"] { gap: 32px !important; }
  [style*="gap: 64"] { gap: 32px !important; }
  [style*="gap: 48"] { gap: 24px !important; }
  [style*="gap: 36"] { gap: 16px !important; }

  /* Cards / fixed-width blocks shrink to viewport */
  [style*="width: 1000"], [style*="minWidth: 1000"],
  [style*="width: 421"],  [style*="minWidth: 421"],
  [style*="width: 388"],  [style*="minWidth: 388"],
  [style*="width: 478"],  [style*="minWidth: 478"],
  [style*="width: 537"],  [style*="minWidth: 537"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Discipline card — auto height so button gets same spacing as top padding */
  [style*="height: 746"] { height: auto !important; min-height: 460px !important; padding: 24px 20px !important; gap: 14px !important; }
  [style*="height: 640"] { height: auto !important; min-height: 460px !important; padding: 24px 20px !important; gap: 14px !important; }
  /* Discipline illustration — 280px → 160px on mobile */
  [style*="width: 280px"][style*="height: 280px"] {
    width: 160px !important;
    height: 160px !important;
  }
  /* Discipline illustration — 384x384 → fluid square */
  [style*="width: 384"][style*="height: 384"] {
    width: 200px !important;
    height: 200px !important;
    max-width: 55vw !important;
    max-height: 55vw !important;
  }
  /* Section header in Dyscypliny — center on mobile */
  [style*="max-width: 644"], [style*="maxWidth: 644"] {
    max-width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }
  /* Photo / illustration squares cap */
  [style*="height: 547"] { height: auto !important; min-height: 280px !important; aspect-ratio: 1 / 1 !important; max-height: 60vw !important; }
  [style*="height: 427"] { height: auto !important; min-height: 240px !important; aspect-ratio: 1 / 1 !important; max-height: 60vw !important; }
  [style*="height: 420"] { height: auto !important; min-height: 0 !important; }
  [style*="height: 200"] { height: 180px !important; }

  /* Menu header — flush layout: logo at the very left, hamburger at the very right */
  [style*="padding: 0 64px"] { padding: 0 20px !important; }
  [style*="height: 84"] { height: 64px !important; }

  /* Logo aligned left on mobile (was absolute-centered on desktop) */
  a[aria-label="Luna Persona Hermetica"] {
    position: static !important;
    transform: none !important;
  }
  /* Hamburger ml-auto pushes it to the far right; logo stays on the left */
  .luna-mobile-toggle { margin-left: auto !important; }

  /* CTA "duster" image */
  [style*="background-size: contain"] { background-size: 120% auto !important; }

  /* Disable horizontal scroll/touch carousel side cards visibility */
  [style*="transform: scale(0.78)"] {
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  /* Logo header (centered absolute) — keep but smaller */
  img[alt="Luna Persona Hermetica"] { max-width: 60vw !important; height: auto !important; }

  /* Buttons — smaller padding/text on mobile, full-width-friendly */
  [style*="padding: 14px 32px"] {
    padding: 11px 22px !important;
    font-size: 14px !important;
  }
  [style*="padding: 8px 24px"] {
    padding: 8px 18px !important;
    font-size: 13px !important;
  }
  .luna-btn-main, button[style*="font-family: Nunito"], a[style*="font-family: Nunito"][style*="border-radius"] {
    /* No-op fallback rule, real sizing handled above */
  }

  /* Hero / CTA button rows — stack vertically and full width */
  [style*="display: flex"][style*="gap: 36px"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  [style*="display: flex"][style*="gap: 36px"] > a,
  [style*="display: flex"][style*="gap: 36px"] > button {
    width: 100% !important;
  }

  /* Mobile menu: hide desktop nav items, show hamburger */
  .luna-nav-links { display: none !important; }
  .luna-mobile-toggle { display: inline-flex !important; }

  /* Hero text container — center & narrow */
  [style*="text-align: center"][style*="padding: 0 40px"] { padding: 0 20px !important; }

  /* Mega-menu panels become full-width */
  [style*="top: 84"][style*="position: fixed"] { top: 64px !important; max-height: calc(100vh - 64px) !important; overflow-y: auto !important; }

  /* Hide section-specific decor on tiny screens to declutter */
  [style*="width: 900"][style*="position: absolute"] { max-width: 100% !important; }

  /* OnasDlaKogo — moon logo: smaller + vertical padding on mobile */
  [style*="width: 240px"][style*="height: 298px"] {
    width: 100px !important;
    height: 124px !important;
  }
  [style*="height: 547px"][style*="display: flex"][style*="align-items: center"][style*="justify-content: center"] {
    height: auto !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* JakPracujemy cards — center icons and text on mobile */
  [style*="grid-template-columns: repeat(3, 1fr)"] > div {
    align-items: center !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > div h3 {
    text-align: center !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] > div p {
    text-align: center !important;
  }

  /* Usługi category filter tags — smaller so more fit per row on mobile */
  [style*="padding: 8px 24px"] {
    padding: 5px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  /* Footer */
  footer { padding-top: 24px !important; }
  footer img[alt="Luna Persona Hermetica"] { height: 48px !important; max-width: none !important; }
  /* Footer grid: stack logo on top, then 2 nav columns side-by-side */
  [style*="grid-template-columns: 2fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="grid-template-columns: 2fr 1fr 1fr"] > *:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ─────── Phones (<= 600px) ─────── */
@media (max-width: 600px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 180px 24px 80px"] { padding: 120px 16px 48px !important; }
  [style*="padding: 80px 24px"] { padding: 48px 16px !important; }
  [style*="padding: 180px 24px"] { padding: 120px 16px 48px !important; }
  [style*="padding: 80px 0"] { padding: 48px 0 !important; }
  [style*="padding: 0 24px 120px"] { padding: 0 16px 32px !important; }
  [style*="padding: 64px 24px"] { padding: 40px 16px !important; }
  [style*="padding: 96px 24px"] { padding: 48px 16px !important; }
  [style*="padding: 120px 24px"] { padding: 56px 16px !important; }

  h1, [style*="font-size: 72px"], [style*="font-size: 64px"] { font-size: 36px !important; }
  h2, [style*="font-size: 48px"] { font-size: 26px !important; }

  /* Headers/heroes pack tighter */
  [style*="height: 1000"] { min-height: 560px !important; }

  /* Card padding */
  [style*="padding: 32"] { padding: 20px !important; }

  /* CTA wraps and stays full-width */
  [style*="display: flex"][style*="gap: 36"] > * { width: 100% !important; }
  a[href] { word-break: break-word; }

  /* Article cover */
  [style*="height: 420"] { height: 220px !important; }

  /* Service card title scale */
  [style*="fontSize: 32"][style*="whiteSpace"] { font-size: 22px !important; }
}

/* Mobile menu toggle is hidden by default (desktop) */
.luna-mobile-toggle { display: none; }

/* Mobile dropdown panel */
.luna-mobile-nav {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(6,11,24,0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgb(78,70,114);
  z-index: 99;
  padding: 12px 20px 24px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.luna-mobile-nav.open { display: block; }
.luna-mn-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(78,70,114,0.5);
  background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgb(220, 220, 230);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.luna-mn-toggle { justify-content: space-between; gap: 12px; }
.luna-mn-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.luna-mn-sub.open { max-height: 800px; }
.luna-mn-sub-item {
  display: block;
  padding: 12px 16px 12px 12px;
  border-bottom: 1px solid rgba(78,70,114,0.3);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: rgb(140, 132, 162);
  text-decoration: none;
}
.luna-mn-sub-item:last-child { border-bottom: none; }