/*
 * SzabĂł Art Design
 * Mobil olvashatósági és tipográfiai finomhangolás
 *
 * Betöltési sorrend:
 * a global, homepage és Project Intake frontend CSS után.
 *
 * A fájl kizárólag célzott felülírásokat tartalmaz.
 */

/* ================================================================
   Header: 1181–1280 px közötti kompakt desktop tartomány
   ================================================================ */

@media (min-width: 1181px) and (max-width: 1280px) {
  .szaboartdesign-site-header__menu-link {
    padding-inline: 6px;
    font-size: 0.78rem;
  }

  .szaboartdesign-site-header__desktop-cta {
    min-width: 176px;
    padding-inline: 16px;
    font-size: 0.78rem;
  }
}


/* ================================================================
   Mobil olvashatóság
   ================================================================ */

@media (max-width: 767px) {
  /* Kapcsolat oldal főcím */
  .szaboartdesign-contact-page__title {
    font-size: clamp(2.28rem, 9vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.038em;
  }

  /* Kapcsolat oldal proof sor */
  .szaboartdesign-contact-page__proof dd {
    color: rgba(241, 244, 247, 0.62);
    font-size: 0.80rem;
    line-height: 1.5;
  }

  /* Kapcsolat oldal űrlapfejléc */
  .szaboartdesign-contact-page__form-header > p {
    font-size: 0.74rem;
  }

  .szaboartdesign-contact-page__form-header > span {
    color: rgba(241, 244, 247, 0.58);
    font-size: 0.82rem;
    line-height: 1.55;
  }

  /* Főoldali esettanulmányok */
  .szaboartdesign-case-studies__description {
    font-size: 0.90rem;
    line-height: 1.64;
  }

  .szaboartdesign-case-studies__detail-copy p {
    font-size: 0.86rem;
    line-height: 1.62;
  }

  .szaboartdesign-case-studies__metric-label {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  /* FĹ‘oldali GYIK */
  .szaboartdesign-faq__technical-note p {
    font-size: 0.84rem;
    line-height: 1.58;
  }

  .szaboartdesign-faq__answer p {
    font-size: 0.92rem;
    line-height: 1.72;
  }

  /* Globális lábléc */
  .szaboartdesign-site-footer__bottom p {
    font-size: 0.80rem;
  }

  .szaboartdesign-site-footer__back-to-top {
    font-size: 0.75rem;
  }

  .szaboartdesign-site-footer__column a {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  /* ------------------------------------------------------------
     Aktív Szabó Art Design Project Intake űrlaprendszer
     ------------------------------------------------------------ */

  .sadpi-field label,
  .sadpi-field legend,
  .sadpi-choice,
  .sadpi-service-card {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .sadpi-field-help,
  .sadpi-form__privacy-note,
  .sadpi-field-error,
  .sadpi-conditional-section__heading p {
    font-size: 0.80rem;
    line-height: 1.55;
  }

  .sadpi-field input:not([type="checkbox"]):not([type="radio"]),
  .sadpi-field select,
  .sadpi-field textarea {
    font-size: 1rem;
    line-height: 1.45;
  }

  .sadpi-field input[type="file"] {
    font-size: 0.84rem;
  }

  /* ------------------------------------------------------------
     Régi Gravity Forms szelektorok kompatibilitási védelme
     Nem változtatja meg az aktív Project Intake működését.
     ------------------------------------------------------------ */

  .szaboartdesign-contact-page__form-shell .gfield_label,
  .szaboartdesign-contact-page__form-shell .gform-field-label,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--contact-method .gchoice label,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--compact-choices .gchoice label,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--ongoing .gchoice label,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--consent .gchoice label {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .szaboartdesign-contact-page__form-shell .gfield_description,
  .szaboartdesign-contact-page__form-shell .validation_message,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--conditional-section .gsection_description,
  .szaboartdesign-contact-page__form-shell
  .szaboartdesign-field--upload input[type="file"] {
    font-size: 0.80rem !important;
    line-height: 1.55 !important;
  }

  .szaboartdesign-contact-page__form-shell input[type="text"],
  .szaboartdesign-contact-page__form-shell input[type="email"],
  .szaboartdesign-contact-page__form-shell input[type="tel"],
  .szaboartdesign-contact-page__form-shell input[type="url"],
  .szaboartdesign-contact-page__form-shell input[type="number"],
  .szaboartdesign-contact-page__form-shell select,
  .szaboartdesign-contact-page__form-shell textarea {
    font-size: 1rem !important;
  }
}

@media (max-width: 390px) {
  .szaboartdesign-contact-page__title {
    font-size: 2.18rem;
    line-height: 1.06;
    letter-spacing: -0.035em;
  }
}

/* ================================================================
   Premium readability polish
   A foorculati CSS erintetlen marad; ez csak olvashatosagi es
   reszponziv finomhangolas a betoltesi sor legvegen.
   ================================================================ */

.home,
.home :where(
  button,
  input,
  select,
  textarea,
  a,
  p,
  li,
  small,
  strong,
  em,
  label,
  summary
) {
  font-family: Manrope, sans-serif;
}

.home :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .szaboartdesign-hero__title,
  .szaboartdesign-partner-orbit__title,
  .szaboartdesign-case-studies__title,
  .szaboartdesign-pro__title,
  .szaboartdesign-development-process__title,
  .szaboartdesign-system-mindset__title,
  .szaboartdesign-testimonials__title,
  .szaboartdesign-project-fit__title,
  .szaboartdesign-faq__title
) {
  font-family: Manrope, sans-serif;
}

.home :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: 48px;
  font-size: max(1rem, 16px);
}

.home :where(
  .szaboartdesign-hero__button,
  .szaboartdesign-partner-orbit__cta,
  .szaboartdesign-case-studies__cta,
  .szaboartdesign-system-mindset__cta-button,
  .szaboartdesign-project-fit__cta-button,
  .szaboartdesign-faq__cta,
  .szaboartdesign-site-header__desktop-cta,
  .szaboartdesign-global-cta .szaboartdesign-button,
  .sadpi-submit-button
) {
  font-size: max(0.875rem, 14px);
  line-height: 1.15;
}

.home :where(
  .szaboartdesign-hero__eyebrow,
  .szaboartdesign-partner-orbit__eyebrow,
  .szaboartdesign-case-studies__eyebrow,
  .szaboartdesign-pro__eyebrow,
  .szaboartdesign-development-process__eyebrow,
  .szaboartdesign-system-mindset__eyebrow,
  .szaboartdesign-testimonials__eyebrow,
  .szaboartdesign-project-fit__eyebrow,
  .szaboartdesign-faq__eyebrow,
  .szaboartdesign-section-eyebrow,
  .szaboartdesign-card-eyebrow,
  .szaboartdesign-card-label
) {
  font-size: max(0.875rem, 14px);
}

.home :where(
  .szaboartdesign-hero__metric-label,
  .szaboartdesign-hero__micro-proof,
  .szaboartdesign-partner-orbit__brand-rail-copy,
  .szaboartdesign-partner-orbit__partner-sector,
  .szaboartdesign-case-studies__metric-label,
  .szaboartdesign-case-studies__project-type,
  .szaboartdesign-testimonials__meta,
  .szaboartdesign-global-cta__panel-label,
  .szaboartdesign-global-cta__point-index,
  .szaboartdesign-global-cta__direct-contact span
) {
  font-size: max(0.8125rem, 13px);
  line-height: 1.42;
}

.home .szaboartdesign-site-header__menu-link {
  font-size: max(0.8125rem, 13px);
}

.home .szaboartdesign-site-header__desktop-cta {
  font-size: max(0.875rem, 14px);
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .home .szaboartdesign-site-header {
    --szaboartdesign-header-height: 76px;
  }

  .home .szaboartdesign-site-header__shell {
    width: min(100% - 32px, 1180px);
  }

  .home .szaboartdesign-site-header__desktop-navigation,
  .home .szaboartdesign-site-header__desktop-cta {
    display: inline-flex;
  }

  .home .szaboartdesign-site-header__mobile-toggle {
    display: none;
  }

  .home .szaboartdesign-site-header__menu {
    gap: 2px;
  }

  .home .szaboartdesign-site-header__menu-link {
    min-height: 42px;
    padding-inline: 7px;
    font-size: 0.78rem;
  }

  .home .szaboartdesign-site-header__desktop-cta {
    min-width: 166px;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.78rem;
  }
}

.home .szaboartdesign-light-section .szaboartdesign-section-divider__line,
.home .szaboartdesign-theme-light .szaboartdesign-section-divider__line,
.home .szaboartdesign-strategy .szaboartdesign-section-divider__line,
.home .szaboartdesign-focus-areas .szaboartdesign-section-divider__line,
.home .szaboartdesign-focus-areas__light-page .szaboartdesign-section-divider__line,
.home .szaboartdesign-case-studies .szaboartdesign-section-divider__line,
.home .szaboartdesign-pro .szaboartdesign-section-divider__line {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(8, 23, 37, 0.22) 18%,
      rgba(8, 23, 37, 0.52) 50%,
      rgba(8, 23, 37, 0.22) 82%,
      transparent 100%
    );
}

.home .szaboartdesign-light-section .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-theme-light .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-strategy .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-focus-areas .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-focus-areas__light-page .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-case-studies .szaboartdesign-section-divider__emblem,
.home .szaboartdesign-pro .szaboartdesign-section-divider__emblem {
  border-color: rgba(8, 23, 37, 0.28);
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(251, 248, 241, 0.88) 100%
    );
  box-shadow:
    0 0 0 1px rgba(8, 23, 37, 0.10),
    0 12px 28px rgba(8, 23, 37, 0.12);
}

.home .szaboartdesign-case-studies__viewport,
.home .szaboartdesign-partner-orbit__viewport,
.home .szaboartdesign-testimonials__carousel {
  overflow: hidden;
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .home .szaboartdesign-case-studies__carousel,
  .home .szaboartdesign-partner-orbit__carousel,
  .home .szaboartdesign-testimonials__carousel {
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) {
  .home :where(
    .szaboartdesign-hero__button,
    .szaboartdesign-partner-orbit__cta,
    .szaboartdesign-case-studies__cta,
    .szaboartdesign-system-mindset__cta-button,
    .szaboartdesign-project-fit__cta-button,
    .szaboartdesign-faq__cta,
    .szaboartdesign-global-cta .szaboartdesign-button,
    .sadpi-submit-button
  ) {
    min-height: 48px;
    font-size: max(0.875rem, 14px);
  }

  .home :where(
    .szaboartdesign-hero__metric-label,
    .szaboartdesign-hero__micro-proof,
    .szaboartdesign-partner-orbit__brand-rail-copy,
    .szaboartdesign-partner-orbit__partner-sector,
    .szaboartdesign-case-studies__metric-label,
    .szaboartdesign-case-studies__project-type,
    .szaboartdesign-testimonials__meta,
    .szaboartdesign-global-cta__panel-label,
    .szaboartdesign-global-cta__point-index,
    .szaboartdesign-global-cta__direct-contact span
  ) {
    font-size: max(0.8125rem, 13px);
  }
}

@media (max-width: 390px) {
  .home .szaboartdesign-hero__button {
    font-size: max(0.84rem, 13.5px);
  }

  .home .szaboartdesign-hero__metric-label {
    font-size: max(0.8125rem, 13px);
  }
}

/* Final micro-type hardening for shared buttons and the compact tablet header. */
.home .szaboartdesign-button {
  font-size: max(0.875rem, 14px);
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .home .szaboartdesign-site-header__menu-link {
    font-size: max(0.8125rem, 13px);
  }

  .home .szaboartdesign-site-header__desktop-cta,
  .home .szaboartdesign-site-header__desktop-cta.szaboartdesign-button {
    font-size: max(0.84rem, 13.5px);
  }
}

@media (max-width: 767px) {
  .home .szaboartdesign-site-header__mobile-toggle-label {
    font-size: max(0.8125rem, 13px);
  }

  .home .szaboartdesign-button {
    min-height: 48px;
    font-size: max(0.875rem, 14px);
  }
}

@media (max-width: 390px) {
  .home .szaboartdesign-button {
    font-size: max(0.84rem, 13.5px);
  }
}

/* Mobile carousel flash guard: prevents the page background from showing
   between class swaps while preserving the existing visual design. */
@media (max-width: 767px) {
  .home :where(
    .szaboartdesign-hero-projects__viewport,
    .szaboartdesign-hero-projects__stage,
    .szaboartdesign-partner-orbit__viewport,
    .szaboartdesign-partner-orbit__band,
    .szaboartdesign-partner-orbit__stage,
    .szaboartdesign-testimonials__carousel,
    .szaboartdesign-testimonials__viewport,
    .szaboartdesign-testimonials__stage
  ) {
    background-color: var(--szaboartdesign-brand-navy-950, #071521);
    backface-visibility: hidden;
    contain: paint;
    isolation: isolate;
    transform: translateZ(0);
  }

  .home :where(
    .szaboartdesign-case-studies__carousel,
    .szaboartdesign-case-studies__viewport,
    .szaboartdesign-case-studies__stage
  ) {
    background-color: var(--szaboartdesign-light-cream, #fbf8f1);
    backface-visibility: hidden;
    contain: paint;
    isolation: isolate;
    transform: translateZ(0);
  }

  .home :where(
    .szaboartdesign-hero-projects__slide,
    .szaboartdesign-partner-orbit__partner,
    .szaboartdesign-case-studies__slide,
    .szaboartdesign-testimonials__slide
  ) {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .home :where(
    .szaboartdesign-hero-projects__slide--current,
    .szaboartdesign-case-studies__slide--current,
    .szaboartdesign-testimonials__slide--current,
    .szaboartdesign-partner-orbit__partner--current
  ) {
    z-index: 3;
  }
}

/* Final mobile homepage density pass. Kept last so later component rules cannot undo it. */
@media (max-width: 767px) {
  .home :where(
    .szaboartdesign-hero__title,
    .szaboartdesign-services-overview__title,
    .szaboartdesign-focus-areas__title,
    .szaboartdesign-testimonials__title,
    .szaboartdesign-system-mindset__title,
    .szaboartdesign-project-fit__title,
    .szaboartdesign-global-cta__title,
    .szaboartdesign-faq__title
  ) {
    font-size: clamp(2rem, 8.4vw, 2.42rem);
    line-height: 1.14;
  }

  .home .szaboartdesign-testimonials__navigation-button {
    bottom: -82px;
  }

  .home .szaboartdesign-testimonials__controls {
    margin-top: 98px;
  }

  .home .szaboartdesign-testimonials__slide,
  .home .szaboartdesign-testimonials__slide--current {
    width: min(100%, calc(100vw - 28px));
    padding: 30px 26px 28px;
  }

  .home .szaboartdesign-testimonials__quote-mark {
    height: 36px;
    font-size: 64px;
  }

  .home .szaboartdesign-testimonials__quote {
    display: -webkit-box;
    margin: 12px 0 20px;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.56;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
  }

  .home .szaboartdesign-testimonials__rating {
    padding-bottom: 16px;
  }

  .home .szaboartdesign-focus-areas {
    padding-top: 44px;
    padding-bottom: 76px;
  }

  .home .szaboartdesign-focus-areas__title {
    margin-top: 30px;
    margin-bottom: 14px;
  }

  .home .szaboartdesign-focus-areas__header-divider {
    margin-top: 22px;
    margin-bottom: 22px;
  }
}

@media (max-width: 560px) {
  .home .szaboartdesign-services-overview__service-list {
    justify-items: center;
    padding-left: 0;
  }

  .home .szaboartdesign-services-overview__service {
    grid-template-columns:
      56px
      minmax(92px, 1fr)
      56px;
    max-width: 342px;
    margin-inline: auto;
    padding:
      22px
      18px
      24px;
  }

  .home .szaboartdesign-services-overview__service-content {
    width: min(100%, 286px);
    justify-self: center;
    padding-top: 18px;
  }

  .home .szaboartdesign-services-overview__service-title {
    font-size: 1.16rem;
    line-height: 1.25;
  }

  .home .szaboartdesign-services-overview__service-description {
    font-size: 0.92rem;
    line-height: 1.58;
  }
}

@media (max-width: 390px) {
  .home :where(
    .szaboartdesign-hero__title,
    .szaboartdesign-services-overview__title,
    .szaboartdesign-focus-areas__title,
    .szaboartdesign-testimonials__title,
    .szaboartdesign-system-mindset__title,
    .szaboartdesign-project-fit__title,
    .szaboartdesign-global-cta__title,
    .szaboartdesign-faq__title
  ) {
    font-size: clamp(1.9rem, 8vw, 2.18rem);
    line-height: 1.16;
  }

  .home .szaboartdesign-testimonials__slide,
  .home .szaboartdesign-testimonials__slide--current {
    padding-inline: 24px;
  }

  .home .szaboartdesign-services-overview__service {
    padding-inline: 18px;
  }
}

/* Desktop hero readability: the original 1.04 ratio is too tight for the
   large multi-line heading, especially around accented characters. */
@media (min-width: 1024px) {
  .home .szaboartdesign-hero__title {
    line-height: 1.12;
  }
}

/* Final mobile alignment and vertical rhythm correction. */
@media (max-width: 767px) {
  .home .szaboartdesign-system-mindset__concept-list {
    width: 100%;
    padding-inline: 0;
    justify-items: center;
  }

  .home .szaboartdesign-system-mindset__concept {
    width: min(100%, 390px);
    max-width: 390px;
    margin-inline: auto;
  }

  /* The arrows sit outside the testimonial viewport. Paint containment clipped
     them even though the viewport itself allowed visible overflow. */
  .home .szaboartdesign-testimonials__viewport {
    contain: none;
    overflow: visible;
  }

  .home .szaboartdesign-testimonials__navigation-button {
    z-index: 8;
    visibility: visible;
    opacity: 1;
  }

  .home :where(
    .szaboartdesign-hero__eyebrow,
    .szaboartdesign-partner-orbit__eyebrow,
    .szaboartdesign-strategy__eyebrow,
    .szaboartdesign-services-overview__eyebrow,
    .szaboartdesign-focus-areas__eyebrow,
    .szaboartdesign-case-studies__eyebrow,
    .szaboartdesign-pro__eyebrow,
    .szaboartdesign-development-process__eyebrow,
    .szaboartdesign-system-mindset__eyebrow,
    .szaboartdesign-testimonials__eyebrow,
    .szaboartdesign-project-fit__eyebrow,
    .szaboartdesign-faq__eyebrow,
    .szaboartdesign-section-eyebrow
  ) {
    margin-bottom: 0 !important;
  }

  .home :where(
    .szaboartdesign-hero__title,
    .szaboartdesign-partner-orbit__title,
    .szaboartdesign-strategy__title,
    .szaboartdesign-services-overview__title,
    .szaboartdesign-focus-areas__title,
    .szaboartdesign-case-studies__title,
    .szaboartdesign-pro__title,
    .szaboartdesign-development-process__title,
    .szaboartdesign-system-mindset__title,
    .szaboartdesign-testimonials__title,
    .szaboartdesign-project-fit__title,
    .szaboartdesign-faq__title,
    .szaboartdesign-global-cta__title
  ) {
    margin-top: 24px !important;
  }

  .home :where(
    .szaboartdesign-hero,
    .szaboartdesign-partner-orbit,
    .szaboartdesign-strategy,
    .szaboartdesign-services-overview,
    .szaboartdesign-focus-areas,
    .szaboartdesign-case-studies,
    .szaboartdesign-pro,
    .szaboartdesign-development-process,
    .szaboartdesign-system-mindset,
    .szaboartdesign-testimonials,
    .szaboartdesign-project-fit,
    .szaboartdesign-faq,
    .szaboartdesign-global-cta
  ) {
    padding-top: 52px;
    padding-bottom: 78px;
  }

  .home .szaboartdesign-global-cta .szaboartdesign-section-eyebrow,
  .home .szaboartdesign-partner-orbit .szaboartdesign-partner-orbit__eyebrow {
    margin-bottom: 0 !important;
  }

  .home .szaboartdesign-global-cta .szaboartdesign-global-cta__title,
  .home .szaboartdesign-partner-orbit .szaboartdesign-partner-orbit__title {
    margin-top: 24px !important;
  }
}