/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/

/* WordPress menus render nav > ul > li > a, unlike the original static markup. */
.nav .current-menu-item > a,
.nav .current_page_item > a {
  color: #000;
  min-width: clamp(112px, 6.77vw, 130px);
  height: clamp(40px, 2.4vw, 46px);
  padding: 0 18px;
  border-radius: 8px;
  background: linear-gradient(99.09deg, rgba(240, 197, 102, 0.57) 4.15%, rgba(254, 244, 178, 0.57) 19.12%, rgba(253, 221, 134, 0.57) 31.07%, rgba(205, 159, 72, 0.57) 49.89%, rgba(252, 244, 179, 0.57) 66.96%, rgba(202, 160, 74, 0.57) 86.36%);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.25);
}

.is-booking-target,
.is-booking-target * {
  cursor: pointer;
}

/* Header & Footer social icons alignment (shared/css/header.css and footer.css are not loaded in WordPress) */
.social-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__social {
  grid-area: social;
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 1px;
}

.site-footer__social a {
  display: inline-flex;
  width: 33px;
  height: 33px;
}

/* Keep the shared contact email visible in both layouts at every breakpoint. */
.mail-link,
.site-footer__mail {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.mail-link:hover,
.mail-link:focus-visible,
.site-footer__mail:hover,
.site-footer__mail:focus-visible {
  text-decoration: none !important;
}

.site-footer__hours {
  grid-area: hours;
  display: grid;
  justify-self: end;
  gap: 1px;
  margin: 0;
  color: #000;
  font-family: var(--font-body);
  line-height: 1.25;
  text-align: right;
}

.site-footer__hours span {
  color: #6b6358;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__hours strong {
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 1541px) {
  .site-footer__connect {
    grid-template-areas:
      "social phone"
      "social mail"
      "social hours";
  }
}

/* Keep the breadcrumb band continuous across the full page width and above section backgrounds. */
.page-breadcrumbs-wrap {
  position: relative !important;
  z-index: 3 !important;
  max-width: none;
}

/* Event detail pages: keep the featured image proportional and separate it
   from the article text. */
body.single .text-page article {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

body.single .text-page .post-thumbnail {
  width: min(760px, 100%);
  margin: 0 auto 36px;
  overflow: hidden;
  border-radius: 24px;
}

body.single .text-page .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

body.single .text-page .entry-content {
  max-width: 920px;
  margin: 0 auto;
}

/* The cooperation artwork extends into the breadcrumb area. */
.page-template-sotr-page main {
  background: #fff;
}

.page-template-sotr-page .page-breadcrumbs-wrap {
  background: transparent;
}

/* Price categories show one selected panel after JavaScript starts without giant empty spaces */
.price-page__board.is-tabs-ready {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "panel" !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px clamp(24px, 4vw, 56px) !important;
}

.price-page__board.is-tabs-ready .price-panel {
  min-height: auto !important;
  padding: 36px clamp(20px, 3.5vw, 40px) !important;
}

.price-page__board.is-tabs-ready .price-panel:not([hidden]) {
  grid-area: panel !important;
}

.price-page__board.is-tabs-ready .price-panel[hidden] {
  display: none !important;
}

.price-page__board.is-tabs-ready .price-panel__action {
  margin-top: 36px !important;
}

/* All price cards stay in one vertical section. */
.price-page__board--all-cards {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-flow: row;
}

.price-page__board--all-cards .price-panel {
  min-height: auto !important;
  grid-area: auto !important;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.price-page__board--all-cards .price-panel__action {
  margin: 28px auto 0 !important;
}

.price-page__tabs .price-page__tab {
  cursor: default;
}

.price-panel--has-decor h2,
.price-panel--has-decor .price-panel__list {
  position: relative;
  z-index: 1;
}

.price-page__board > .price-panel:not(:last-child) .price-panel__decor {
  display: none;
}

/* Fix contract card email color (was white/inherited from theme) */
.home-contacts__mail {
  color: #000 !important;
  text-decoration: none !important;
}

.home-contacts__mail span {
  color: #000 !important;
  text-decoration: none !important;
}

/* Service cards: content stays on the left, while the editor-selected image
   gets a proper visual area on the right. */
.service-tile {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

.service-tile--has-image {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 34%, 280px);
  grid-template-areas:
    "content media"
    "action media";
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: stretch;
}

/* Cards without an assigned image must remain a simple vertical stack. */
.service-tile:not(.service-tile--has-image) > a {
  align-self: flex-start;
  margin-top: auto !important;
}

.service-tile__content {
  grid-area: content;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.service-tile h3 {
  border: none !important;
  color: #ca9e44 !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #ca9e44 !important;
  text-shadow: none !important;
  font-family: var(--font-heading) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 16px !important;
  width: auto !important;
  min-width: 0;
  max-width: 100% !important;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.service-tile p {
  color: #222222 !important;
  font-size: 19px !important;
  line-height: 1.4 !important;
}

.service-tile > a {
  margin-top: auto !important;
}

.service-tile__media {
  grid-area: media;
  display: flex;
  min-width: 0;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
}

.service-tile__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: contain;
  object-position: center;
}

.service-tile--has-image > a {
  grid-area: action;
}

/* Email button used in the cooperation section. */
.form-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #2c2c2c;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 160ms ease;
}

.form-email:hover {
  color: #b2452d;
  text-decoration: underline;
}

.home-cooperation__inner .form-email {
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 14px 38px;
  border: 1px solid #fff;
  border-radius: 40px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%), #4c9dc4;
  box-shadow: 0px 0px 12px 0px #00000040;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 160ms ease, filter 160ms ease;
  min-height: auto !important;
}

.home-cooperation__inner .form-email:hover {
  filter: saturate(1.08);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

/* Hide name & phone inputs in lead forms and reduce card heights */
.trial-form input[type="text"],
.trial-form input[type="tel"],
.trial-form .wpcf7-form-control-wrap:has(input[type="text"]),
.trial-form .wpcf7-form-control-wrap:has(input[type="tel"]),
.trial-form .form-group:has(input[type="text"]),
.trial-form .form-group:has(input[type="tel"]),
.home-cta input[type="text"],
.home-cta input[type="tel"],
.home-cta .wpcf7-form-control-wrap:has(input[type="text"]),
.home-cta .wpcf7-form-control-wrap:has(input[type="tel"]),
.home-cta .form-group:has(input[type="text"]),
.home-cta .form-group:has(input[type="tel"]),
.home-contacts__form input[type="text"],
.home-contacts__form input[type="tel"],
.home-contacts__form .wpcf7-form-control-wrap:has(input[type="text"]),
.home-contacts__form .wpcf7-form-control-wrap:has(input[type="tel"]),
.home-contacts__form .form-group:has(input[type="text"]),
.home-contacts__form .form-group:has(input[type="tel"]) {
  display: none !important;
}

.trial-form {
  min-height: auto !important;
  height: auto !important;
  padding: 44px 50px 28px !important;
  gap: 16px !important;
}

.trial-form h2 {
  max-width: 100% !important;
  white-space: nowrap !important;
}

.trial-form br,
.trial-form.is-booking-target br {
  display: none !important;
}

.home-cta__inner {
  padding: 48px 0 54px !important;
  min-height: auto !important;
}

.home-contacts__form {
  min-height: 290px !important;
}

.home-cta p {
  margin-top: 14px !important;
}

.home-cta__form {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 24px !important;
}

.home-cta button {
  width: min(340px, 100%) !important;
}

/* Original vinyl disk position: z-index 1 (above gold line, behind text) — only on the cooperation page */
.page-template-sotr-page .home-cooperation__decor,
nav.page-breadcrumbs-wrap + #cooperation .home-cooperation__decor,
nav.page-breadcrumbs-wrap + .home-cooperation .home-cooperation__decor {
  top: -75px !important;
  right: -138px !important;
  width: 465px !important;
  z-index: 1 !important;
}

/* Heading text, description paragraph & button stay above disk (Layer 2). */
.home-section-title h1,
.home-section-title h2 {
  position: relative !important;
  z-index: 2 !important;
  order: 1;
  width: 100%;
  margin: 0;
  text-align: left;
}

/* The contacts section follows the breadcrumb band directly - white background */
.page-template-contacts-page main,
.page-template-contacts-page .home-contacts,
nav.page-breadcrumbs-wrap + .home-contacts,
nav.page-breadcrumbs-wrap + #contacts {
  background: #fff !important;
  box-shadow: none !important;
}

/* Cooperation text & button centering */
.home-cooperation p {
  position: relative !important;
  z-index: 2 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.home-cooperation__inner > a {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Individual service page: content is administered in ACF and shares the
   existing CTA and team-card components instead of maintaining duplicates. */
.service-detail__intro {
  background: #fff;
}

.service-detail__inner {
  width: min(1100px, calc(100% - 80px));
  margin: 0 auto;
  padding: 32px 0 78px;
}

.service-detail__title {
  margin-bottom: 36px;
}

.service-detail__image {
  display: block;
  width: 100%;
  margin: 0 auto 42px;
  overflow: hidden;
  border-radius: 24px;
  background: #f5f2ec;
}

.service-detail__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
}

.service-detail__price,
.service-detail__content {
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
}

.service-detail__price {
  margin-bottom: 28px;
  color: #fff;
  background: linear-gradient(135deg, #4c9dc4 0%, #326e92 100%);
  box-shadow: 0 12px 28px rgba(44, 85, 110, 0.2);
}

.service-detail__content {
  color: #222;
  background: #f8f5ef;
}

.service-detail__price h2,
.service-detail__content h2 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  text-transform: uppercase;
}

.service-detail__wysiwyg > :first-child {
  margin-top: 0;
}

.service-detail__wysiwyg > :last-child {
  margin-bottom: 0;
}

.service-detail__wysiwyg,
.service-detail__wysiwyg p,
.service-detail__wysiwyg li {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
}

.service-detail__wysiwyg ul,
.service-detail__wysiwyg ol {
  padding-left: 1.25em;
}

.service-detail__teachers {
  background: #fff;
}

/* Keep section content and headings on one shared left edge across templates. */
.home-section-title {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-items: start;
  text-align: left;
}

.home-section-title span {
  order: 2;
  width: 100%;
  max-width: none;
  position: relative !important;
  z-index: 0 !important;
}

/* ==========================================================================
   MEDIA QUERIES (Organized hierarchically from largest desktop to smallest mobile)
   ========================================================================== */

/* 1. Large Desktop (>1540px) */
@media (min-width: 1541px) {
  .about-section__inner,
  .home-services__inner,
  .home-team__inner,
  .home-why__inner,
  .home-gallery__inner,
  .home-events__inner,
  .home-pricing__inner,
  .home-cooperation__inner,
  .home-contacts__inner,
  .price-page__inner,
  .gallery-page__inner,
  .events-page__inner {
    width: min(1756px, calc(100% - 154px));
  }

  .trial-form {
    margin-top: 50px !important;
  }
}

/* 2. Intermediate Desktop (1541px – 1839px) */
@media (max-width: 1839px) and (min-width: 1541px) {
  .site-footer__inner {
    grid-template-columns: 320px minmax(0, 1fr) 24px 320px !important;
    gap: clamp(24px, 3vw, 50px) !important;
    width: min(calc(100% - 80px), 1756px) !important;
    min-height: 200px !important;
  }

  .site-footer__brand {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .site-footer__nav {
    grid-template-columns: repeat(4, auto) !important;
    gap: 14px clamp(20px, 2.5vw, 50px) !important;
  }

  .site-footer__connect {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    width: 328px !important;
    gap: 4px 14px !important;
  }

  .site-footer__phone {
    font-size: 22px !important;
  }

  .site-footer__bottom {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}

/* 3. Medium Desktop (1101px – 1540px) — stacked footer connect */
@media (max-width: 1540px) and (min-width: 1101px) {
  .trial-form {
    margin-top: 30px !important;
  }

  .site-footer__inner {
    grid-template-columns: 280px minmax(0, 1fr) 22px 260px !important;
    grid-template-areas:
      "brand nav note connect"
      "bottom bottom bottom bottom" !important;
    gap: clamp(16px, 2vw, 30px) !important;
    width: min(100% - 40px, 1460px) !important;
    min-height: 180px !important;
  }

  .site-footer__brand {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .site-footer__brand p {
    font-size: 16px !important;
  }

  .site-footer__nav {
    grid-template-columns: repeat(4, auto) !important;
    gap: 14px clamp(16px, 1.8vw, 36px) !important;
  }

  .site-footer__connect {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "phone"
      "mail"
      "hours"
      "social" !important;
    justify-items: end !important;
    width: 100% !important;
    gap: 2px 0 !important;
    padding-top: 16px !important;
  }

  .site-footer__phone {
    justify-self: end !important;
    font-size: 20px !important;
  }

  .site-footer__mail {
    justify-self: end !important;
    font-size: 13px !important;
  }

  .site-footer__hours {
    justify-self: end !important;
  }

  .site-footer__social {
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }

  .site-footer__bottom {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}

/* Tablet (981px – 1100px) — stacked footer connect */
@media (max-width: 1100px) and (min-width: 981px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) 286px !important;
    grid-template-areas:
      "brand connect"
      "nav nav"
      "bottom bottom" !important;
    width: min(984px, calc(100% - 40px)) !important;
    gap: 20px 28px !important;
  }

  .site-footer__note {
    display: none !important;
  }

  .site-footer__connect {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "phone"
      "mail"
      "hours"
      "social" !important;
    justify-items: end !important;
    width: 100% !important;
    gap: 2px 0 !important;
    padding-top: 16px !important;
  }

  .site-footer__phone {
    justify-self: end !important;
    font-size: 18px !important;
  }

  .site-footer__mail {
    justify-self: end !important;
    font-size: 13px !important;
  }

  .site-footer__hours {
    justify-self: end !important;
  }

  .site-footer__social {
    justify-content: flex-end !important;
    margin-top: 6px !important;
  }

  .site-footer__bottom {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* 4. Narrow Desktop (1101px – 1350px) */
@media (max-width: 1350px) and (min-width: 1101px) {
  .trial-section {
    min-height: 680px !important;
  }

  .trial-section__inner {
    height: 680px !important;
  }

  .trial-section__decor {
    left: -160px !important;
    width: 680px !important;
  }

  .trial-section__note {
    top: 118px !important;
    left: calc(50% - 580px + 390px) !important;
    width: 76px !important;
    height: 76px !important;
  }

  .trial-section__content h2 {
    top: 158px !important;
    left: calc(50% - 580px + 60px) !important;
    width: 300px !important;
    min-height: 96px !important;
    font-size: 32px !important;
    line-height: 42px !important;
  }

  .trial-section__signature {
    top: 228px !important;
    left: calc(50% - 580px + 220px) !important;
    width: 270px !important;
  }

  .trial-section__content p {
    top: 390px !important;
    left: calc(50% - 580px + 58px) !important;
    width: 460px !important;
    font-size: 19px !important;
    line-height: 27px !important;
  }

  .trial-form {
    top: 100px !important;
    left: calc(50% - 580px + 580px) !important;
    width: 520px !important;
    min-height: auto !important;
    padding: 36px 30px 20px !important;
  }
}

/* 5. Compact Desktop Navigation (1101px – 1280px) */
@media (max-width: 1280px) and (min-width: 1101px) {
  .site-footer__social a {
    width: 28px;
    height: 28px;
  }

  .site-header__inner {
    grid-template-columns: 180px minmax(0, 1fr) 230px !important;
    gap: 16px !important;
    width: min(calc(100% - 32px), 1460px) !important;
  }

  .brand {
    grid-template-columns: 42px 116px !important;
    width: 180px !important;
    gap: 8px !important;
  }

  .brand__mark {
    width: 42px !important;
    height: 42px !important;
  }

  .brand__logo {
    width: 116px !important;
  }

  .nav {
    gap: clamp(10px, 1.3vw, 18px) !important;
  }

  .nav a,
  .nav li > a {
    font-size: 13px !important;
    min-height: 38px !important;
  }

  .nav a[aria-current="page"] {
    min-width: 96px !important;
    height: 38px !important;
    padding: 0 12px !important;
  }

  .header-actions {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    width: 242px !important;
    gap: 10px !important;
  }

  .social-link {
    width: 28px !important;
    height: 28px !important;
  }

  .site-header__phone,
  .phone-link {
    font-size: 17px !important;
  }

  .mail-link {
    font-size: 12px !important;
  }
}

/* 6. Desktop General (>980px) */
@media (min-width: 981px) {
  .home-cta__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 377px);
  }

  .home-cta__form > * {
    min-width: 0;
  }

  .home-cta__form .form-group p {
    max-width: 100%;
  }

  .home-cta__form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .home-cta__form input:not([type="submit"]) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/* 6.1 Desktop trial layout (>1100px) */
@media (min-width: 1101px) {
  .trial-section {
    min-height: 640px !important;
  }

  .trial-section__inner {
    height: 640px !important;
  }

  .trial-form {
    top: 100px !important;
  }
}

/* 7. Tablet Range (981px – 1100px) */
@media (min-width: 981px) and (max-width: 1100px) {
  .price-page__inner {
    width: min(1320px, calc(100% - 56px));
  }
}

/* 8. Mobile Breakpoint (<=1100px) — Header menu & cookie banner */
@media (max-width: 1100px) {
  /* Keep long service titles, descriptions and CTA labels inside their cards. */
  .home-services__grid,
  .home-services__grid > .service-tile {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .service-tile h3,
  .service-tile p,
  .service-tile a {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .service-tile h3 {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service-tile p {
    overflow-wrap: anywhere;
  }

  .service-tile a {
    box-sizing: border-box;
  }

  .trial-section {
    min-height: auto !important;
  }

  .trial-section__inner {
    height: auto !important;
    padding: 24px 0 32px !important;
  }

  .trial-form {
    top: auto !important;
    position: relative !important;
    margin-top: 0 !important;
  }

  .site-header.is-menu-open .nav {
    display: block;
  }

  .site-header.is-menu-open .nav > ul.nav-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 12px 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header.is-menu-open .nav .current-menu-item > a,
  .site-header.is-menu-open .nav .current_page_item > a {
    min-width: 0;
    height: auto;
    padding: 0 0 11px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #ckyPreferenceCenter {
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  #ckyPreferenceCenter .cky-preference-header,
  #ckyPreferenceCenter .cky-preference-body-wrapper,
  #ckyPreferenceCenter .cky-preference-content-wrapper,
  #ckyPreferenceCenter .cky-footer-wrapper,
  #ckyPreferenceCenter .cky-prefrence-btn-wrapper {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* 9. Mobile General (<=980px) */
@media (max-width: 980px) {
  .service-tile h3 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0 !important;
  }

  .service-tile--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 28%);
    grid-template-areas:
      "content media"
      "action action";
    gap: 12px;
    text-align: left;
  }

  .service-tile__content {
    width: 100%;
  }

  .service-tile__media,
  .service-tile__image {
    min-height: 150px;
  }

  .service-tile__media {
    border-radius: 18px;
  }

  .service-tile p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .service-tile--has-image a {
    justify-self: start;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
  }

  /* Keep event photos at their natural ratio on all mobile layouts. */
  .home-events .event-card picture,
  .events-page .event-card picture {
    aspect-ratio: auto !important;
  }

  .home-events .event-card img,
  .events-page .event-card img {
    height: auto !important;
    object-fit: contain !important;
  }

  .form-email {
    font-size: 12px;
  }

  .home-cooperation__inner .form-email {
    font-size: 13px;
    padding: 12px 30px;
  }

  .page-breadcrumbs-wrap {
    width: calc(100% - 40px);
  }

  .page-breadcrumbs-wrap .about-section__inner {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .about-section__inner,
  .home-services__inner,
  .home-team__inner,
  .home-why__inner,
  .home-gallery__inner,
  .home-events__inner,
  .home-pricing__inner,
  .home-cooperation__inner,
  .home-contacts__inner,
  .price-page__inner,
  .gallery-page__inner,
  .events-page__inner {
    width: min(700px, calc(100% - 64px));
  }

  /* Mobile cooperation section: disk position + inner centering for ALL pages */
  .home-cooperation__inner {
    width: min(700px, calc(100% - 40px)) !important;
    padding: 48px 0 278px !important;
    text-align: center !important;
  }

  .home-cooperation__decor {
    top: auto !important;
    right: 50% !important;
    bottom: 0 !important;
    width: 265px !important;
    transform: translateX(50%) !important;
  }

  /* sotr-page overrides — keep breadcrumb spacing */
  .page-template-sotr-page .home-cooperation__inner,
  nav.page-breadcrumbs-wrap + #cooperation .home-cooperation__inner,
  nav.page-breadcrumbs-wrap + .home-cooperation .home-cooperation__inner {
    padding-top: 48px !important;
  }

  .page-template-sotr-page .home-cooperation__decor,
  nav.page-breadcrumbs-wrap + #cooperation .home-cooperation__decor,
  nav.page-breadcrumbs-wrap + .home-cooperation .home-cooperation__decor {
    top: auto !important;
    right: 50% !important;
    bottom: 0 !important;
    width: 265px !important;
    transform: translateX(50%) !important;
  }

  .page-template-contacts-page .home-contacts__inner,
  nav.page-breadcrumbs-wrap + .home-contacts .home-contacts__inner {
    padding-top: 44px !important;
  }

  html,
  body {
    overflow-x: clip;
  }

  .hero-section {
    overflow: clip;
  }

  .site-footer__nav {
    display: block;
  }

  .site-footer__bottom a:last-child {
    justify-self: center;
    text-align: center;
  }

  .site-footer__connect {
    left: 50% !important;
    grid-template-areas:
      "social"
      "phone"
      "mail"
      "hours" !important;
    justify-items: center !important;
    width: min(240px, calc(100% - 40px)) !important;
    transform: translateX(-50%) !important;
    text-align: center;
  }

  .site-footer__social,
  .site-footer__phone,
  .site-footer__mail,
  .site-footer__hours {
    justify-self: center !important;
    justify-content: center !important;
    text-align: center;
  }

  .site-footer__bottom {
    left: 50% !important;
    justify-items: center !important;
    width: min(343px, calc(100% - 26px)) !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .site-footer__nav > ul {
    display: grid;
    grid-area: auto;
    grid-template-columns: 70px 117px;
    gap: 17px clamp(24px, 8.7vw, 35px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__nav > ul > li:nth-child(1),
  .site-footer__nav > ul > li:nth-child(3) {
    grid-row: 1;
  }

  .site-footer__nav > ul > li:nth-child(5),
  .site-footer__nav > ul > li:nth-child(7) {
    grid-row: 2;
  }

  .site-footer__nav > ul > li:nth-child(2),
  .site-footer__nav > ul > li:nth-child(4) {
    grid-row: 3;
  }

  .site-footer__nav > ul > li:nth-child(6),
  .site-footer__nav > ul > li:nth-child(8) {
    grid-row: 4;
  }

  .site-footer__nav > ul > li:nth-child(1),
  .site-footer__nav > ul > li:nth-child(2),
  .site-footer__nav > ul > li:nth-child(5),
  .site-footer__nav > ul > li:nth-child(6) {
    grid-column: 1;
  }

  .site-footer__nav > ul > li:nth-child(3),
  .site-footer__nav > ul > li:nth-child(4),
  .site-footer__nav > ul > li:nth-child(7),
  .site-footer__nav > ul > li:nth-child(8) {
    grid-column: 2;
  }

  .home-cta__form,
  .home-contacts__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-cta__form > *,
  .home-contacts__layout > * {
    min-width: 0;
  }

  .home-contacts__form {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .trial-form .form-group,
  .trial-form .form-group p,
  .trial-form .wpcf7-form-control-wrap,
  .home-cta__form .form-group,
  .home-cta__form .form-group p,
  .home-cta__form .wpcf7-form-control-wrap,
  .home-contacts__form .form-group,
  .home-contacts__form .form-group p,
  .home-contacts__form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .trial-form input,
  .trial-form button,
  .home-cta__form input,
  .home-cta__form button,
  .home-contacts__form input,
  .home-contacts__form button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .home-cta__form .form-submit p {
    width: min(317px, 100%);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-cta__inner {
    display: grid !important;
    justify-items: center;
    width: min(361px, calc(100% - 40px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
  }

  .home-cta h2,
  .home-cta p {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .home-cta__form {
    align-items: center;
    flex-direction: column;
  }

  .home-cta__form > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Pricing section: ACF renders price lists as tables, so constrain both
     the grid and its table cells instead of clipping the page horizontally. */
  .home-pricing {
    position: relative;
    overflow: hidden;
  }

  .home-pricing__inner,
  .home-pricing__grid,
  .pricing-card,
  .pricing-offer {
    min-width: 0;
    max-width: 100%;
  }

  .home-pricing__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .pricing-card,
  .pricing-offer {
    width: 100%;
    box-sizing: border-box;
  }

  .pricing-card table,
  .pricing-offer table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  .pricing-card th,
  .pricing-card td,
  .pricing-offer th,
  .pricing-offer td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pricing-card td:last-child,
  .pricing-offer td:last-child {
    width: 32%;
    white-space: nowrap;
    text-align: right;
  }
}

/* 10. Tablet-Mobile Specific (700px – 980px) */
@media (min-width: 700px) and (max-width: 980px) {
  .page-breadcrumbs-wrap {
    left: 50%;
    width: min(700px, calc(100% - 64px));
    transform: translateX(-50%);
  }

  .home-contacts__form {
    width: min(520px, 100%);
  }
}

/* 11. Small Mobile (<=699px) */
@media (max-width: 699px) {
  .service-detail__inner {
    width: calc(100% - 40px);
    padding-top: 24px;
    padding-bottom: 54px;
  }

  .service-detail__title {
    margin-bottom: 26px;
  }

  .service-detail__image {
    margin-bottom: 28px;
    border-radius: 16px;
  }

  .service-detail__price,
  .service-detail__content {
    padding: 24px 20px;
    border-radius: 16px;
  }

  /* Services must shrink with the viewport: the base heading uses
     width:max-content, which can otherwise widen a one-column grid. */
  .home-services__inner,
  .home-services__grid,
  .home-services__grid > .service-tile {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .home-services__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .service-tile {
    box-sizing: border-box;
  }

  .service-tile h3 {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service-tile a {
    box-sizing: border-box;
    max-width: 100%;
  }

  .about-section__inner,
  .home-services__inner,
  .home-team__inner,
  .home-why__inner,
  .home-gallery__inner,
  .home-events__inner,
  .home-pricing__inner,
  .home-cooperation__inner,
  .home-contacts__inner,
  .price-page__inner,
  .gallery-page__inner,
  .events-page__inner {
    width: calc(100% - 40px);
  }

  .home-contacts__form {
    width: 100%;
  }

  .pricing-card *,
  .pricing-offer * {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .home-pricing__decor {
    display: none !important;
  }
}

/* 11.1 Compact phones (<=480px) */
@media (max-width: 480px) {
  .trial-form h2 {
    white-space: normal !important;
  }
}

/* 12. Extra Small Mobile (<=360px) */
@media (max-width: 360px) {
  .site-footer__nav > ul {
    grid-template-columns: 61px 105px;
    column-gap: 12px;
  }
}