/*
 * MONO STUDIO · GLOBAL SPACING SYSTEM
 * A single set of spacing tokens for the public theme and Gutenberg canvas.
 *
 * Change the variables below to adjust the site's overall sense of space.
 * 1. Sections = large vertical rhythm (desktop 64–88px).
 * 2. Section introductions = headings and supporting copy (24–28px).
 * 3. Components = cards and internal content (12–24px).
 * Mobile uses the same scale, reduced proportionally.
 */
:root,
.editor-styles-wrapper {
  --mono-space-section: clamp(64px, 6vw, 88px);
  --mono-space-section-mobile: clamp(42px, 7.2vw, 54px);
  --mono-space-section-heading: clamp(22px, 2.1vw, 30px);
  --mono-space-text: 19px;
  --mono-space-card-text: 16px;
  --mono-space-card-pad: clamp(25px, 2.5vw, 32px);
  --mono-space-grid: clamp(14px, 1.6vw, 20px);
  --mono-space-contact-pad: clamp(30px, 3.2vw, 44px);
}

/* Main sections — uniform top-to-top breathing room. The first section starts
   below the hero, so the hero itself keeps its original size and proportions. */
.services {padding-top:var(--mono-space-section);}
.stats {margin-top:var(--mono-space-section);}
.about {margin-top:var(--mono-space-section);}
.projects {margin-top:var(--mono-space-section);padding-bottom:0;}
.contact {margin-top:var(--mono-space-section);}
.mono-contact-section {padding-top:var(--mono-space-section);padding-bottom:var(--mono-space-section);}
.site-footer {margin-top:clamp(14px,2vw,30px);}

/* Introductions — give headings/eyebrows their own space before content. */
.services .section-intro {
  min-height:0;
  padding-bottom:var(--mono-space-section-heading);
  align-items:center;
}
.section-intro h2, .projects h2 {line-height:1.22;}
.services .section-intro > p,
.section-intro .mono-intro-body > p {line-height:1.75;}
.services .section-intro > p + p,
.section-intro .mono-intro-body > p + p {margin-top:var(--mono-space-text);}
.projects .projects-heading {margin-bottom:var(--mono-space-section-heading);}
.projects .projects-heading .eyebrow {margin-bottom:7px;}

/* Service cards — generous but consistent breathing room. */
.service-grid {gap:var(--mono-space-grid);}
.service-card {
  padding:var(--mono-space-card-pad) var(--mono-space-card-pad) 49px;
  min-height:clamp(290px,24vw,330px);
}
.service-card-dark {
  padding:var(--mono-space-card-pad) var(--mono-space-card-pad) 49px;
}
.service-icon {margin-bottom:var(--mono-space-text);}
.service-card h3 {line-height:1.38;}
.service-card p,
.service-card-dark p {
  margin-top:var(--mono-space-card-text);
  line-height:1.75;
}

/* Statistics — separate values and labels, pad the entire panel. */
.stats {
  min-height:178px;
  padding:34px 30px;
}
.stat {min-height:85px;transform:none;}
.stat span:not(.eyebrow):not(.dot) {line-height:1.75;}
.stat small {margin-top:7px;line-height:1.6;}
.stat-tech .eyebrow {line-height:1.6;}

/* About — copy hierarchy, desktop photo, and the stacked value features. */
.about {align-items:center;}
.about-photo {height:clamp(245px,24vw,280px);}
.about-copy h2 {line-height:1.2;}
.about-copy p {margin-top:var(--mono-space-text);line-height:1.8;}
.about-copy .text-link {margin-top:26px;}
.values-list {min-height:220px;gap:24px;}
.value-row {gap:18px;}
.value-row p {margin-top:8px;line-height:1.6;}

/* Projects — more breathing room around images, captions and between cards. */
.projects-grid {gap:var(--mono-space-grid);}
.project-image {height:clamp(185px,19vw,280px);}
.project-meta {padding:17px 14px 19px;}
.project-meta span {margin-top:8px;line-height:1.55;}
.project-meta > div > p {margin-top:8px;}

/* Existing CTA and new contact/details form: same section rhythm and padding. */
.contact {padding:var(--mono-space-contact-pad);}
.contact-bottom {margin-top:34px;}
.contact-note {margin-top:24px;}
.mono-contact-section .mono-contact-intro {margin-bottom:var(--mono-space-section-heading);}
.mono-contact-section .mono-contact-title {margin-top:11px;line-height:1.18;}
.mono-contact-section .mono-contact-layout {gap:var(--mono-space-grid);}
.mono-contact-section .mono-contact-details,
.mono-contact-section .mono-contact-form-panel {
  padding:var(--mono-space-contact-pad);
}
.mono-contact-section .mono-details-lead {margin-top:var(--mono-space-text);line-height:1.8;}
.mono-contact-section .mono-details-divider {margin:28px 0;}
.mono-contact-section .mono-form-description {margin-bottom:24px;}
.mono-contact-section .mono-form {gap:19px;}

/*
 * Gutenberg editor: same rhythm, with selectors scoped to the editing canvas.
 * !important overrides only pre-existing editor preview rules that used it.
 */
.editor-styles-wrapper .services {padding-top:var(--mono-space-section)!important;}
.editor-styles-wrapper .services .section-intro {
  min-height:0!important;
  padding-bottom:var(--mono-space-section-heading)!important;
}
.editor-styles-wrapper .service-grid {gap:var(--mono-space-grid)!important;}
.editor-styles-wrapper .service-grid > .service-card {
  padding:var(--mono-space-card-pad) var(--mono-space-card-pad) 49px!important;
  min-height:clamp(290px,24vw,330px)!important;
}
.editor-styles-wrapper .service-card .service-icon.wp-block-image {
  margin-bottom:var(--mono-space-text)!important;
}
.editor-styles-wrapper .service-card p {
  margin-top:var(--mono-space-card-text)!important;
  line-height:1.75!important;
}
.editor-styles-wrapper .stats {
  margin-top:var(--mono-space-section)!important;
  min-height:178px!important;
  padding:34px 30px!important;
}
.editor-styles-wrapper .stats .stat {min-height:85px!important;}
.editor-styles-wrapper .about {margin-top:var(--mono-space-section)!important;}
.editor-styles-wrapper .about .about-photo {height:clamp(245px,24vw,280px)!important;}
.editor-styles-wrapper .about .about-copy > p:not(.eyebrow) {
  margin-top:var(--mono-space-text)!important;
  line-height:1.8!important;
}
.editor-styles-wrapper .about .values-list {gap:24px!important;}
.editor-styles-wrapper .projects {
  margin-top:var(--mono-space-section)!important;
  padding-bottom:0!important;
}
.editor-styles-wrapper .projects-heading {
  margin-bottom:var(--mono-space-section-heading)!important;
}
.editor-styles-wrapper .projects-grid {gap:var(--mono-space-grid)!important;}
.editor-styles-wrapper .project-image.wp-block-image {
  height:clamp(185px,19vw,280px)!important;
}
.editor-styles-wrapper .project-meta {padding:17px 14px 19px!important;}
.editor-styles-wrapper .contact {
  margin-top:var(--mono-space-section)!important;
  padding:var(--mono-space-contact-pad)!important;
}
.editor-styles-wrapper .contact-bottom {margin-top:34px!important;}
.editor-styles-wrapper .mono-contact-section {
  padding-top:var(--mono-space-section)!important;
  padding-bottom:var(--mono-space-section)!important;
}
.editor-styles-wrapper .mono-contact-section .mono-contact-intro {
  margin-bottom:var(--mono-space-section-heading)!important;
}
.editor-styles-wrapper .mono-contact-details,
.editor-styles-wrapper .mono-contact-form-panel {
  padding:var(--mono-space-contact-pad)!important;
}
.editor-styles-wrapper .mono-contact-section .mono-details-lead {
  margin-top:var(--mono-space-text)!important;
}
.editor-styles-wrapper .site-footer {margin-top:clamp(14px,2vw,30px)!important;}

@media (max-width:830px) {
  :root,.editor-styles-wrapper {
    --mono-space-section:clamp(50px,6.5vw,64px);
    --mono-space-section-heading:24px;
    --mono-space-card-pad:25px;
    --mono-space-text:17px;
    --mono-space-grid:14px;
  }
  .service-card {min-height:275px;}
  .stats {padding:28px 24px;}
  .about-photo {height:auto;min-height:225px;}
  .values-list {min-height:0;}
  .editor-styles-wrapper .service-grid > .service-card {min-height:275px!important;}
  .editor-styles-wrapper .stats {padding:28px 24px!important;}
  .editor-styles-wrapper .about .about-photo {height:auto!important;min-height:225px;}
}

@media (max-width:650px) {
  :root,.editor-styles-wrapper {
    --mono-space-section:var(--mono-space-section-mobile);
    --mono-space-section-heading:22px;
    --mono-space-card-pad:24px;
    --mono-space-card-text:13px;
    --mono-space-text:17px;
    --mono-space-grid:15px;
    --mono-space-contact-pad:26px;
  }
  .services {padding-top:var(--mono-space-section);}
  .section-intro {padding-bottom:var(--mono-space-section-heading);}
  .service-grid {margin-top:0;}
  .service-card,.service-card-dark {
    min-height:265px;
    padding:24px 23px 43px;
  }
  .service-icon {margin-bottom:15px;}
  .service-card p,.service-card-dark p {line-height:1.7;}
  .stats {min-height:0;padding:27px 23px;row-gap:20px;}
  .stat {min-height:65px;}
  .about {margin-top:var(--mono-space-section);}
  .about-photo {min-height:0;}
  .about-copy {margin-top:27px;}
  .about-copy p {margin-top:17px;line-height:1.75;}
  .values-list {margin-top:25px;gap:24px;}
  .projects {margin-top:var(--mono-space-section);}
  .projects-heading {margin-bottom:22px;}
  .projects-grid {gap:24px;}
  .project-image {height:auto;aspect-ratio:1.8;}
  .contact {padding:var(--mono-space-contact-pad);}
  .contact-bottom {margin-top:28px;}
  .mono-contact-section {padding-top:var(--mono-space-section);}
  .mono-contact-section .mono-contact-details,
  .mono-contact-section .mono-contact-form-panel {padding:25px 22px;}
  .editor-styles-wrapper .service-grid {gap:var(--mono-space-grid)!important;}
  .editor-styles-wrapper .service-grid > .service-card {
    min-height:265px!important;
    padding:24px 23px 43px!important;
  }
  .editor-styles-wrapper .stats {min-height:0!important;padding:27px 23px!important;}
  .editor-styles-wrapper .about .about-photo {min-height:0;height:auto!important;}
  .editor-styles-wrapper .about .about-copy {margin-top:27px!important;}
  .editor-styles-wrapper .projects-heading {margin-bottom:22px!important;}
  .editor-styles-wrapper .projects-grid {gap:24px!important;}
  .editor-styles-wrapper .project-image.wp-block-image {height:auto!important;aspect-ratio:1.8;}
  .editor-styles-wrapper .contact {padding:var(--mono-space-contact-pad)!important;}
}
@media (max-width:480px) {
  .service-card,.service-card-dark {min-height:205px;}
  .editor-styles-wrapper .service-grid > .service-card {min-height:205px!important;}
}

/* Statistics: align the numerical baselines across the first three columns.
 * The 3-person role list is a third line, below "Komandos nariai". */
.stats { align-items:stretch; }
.stats .stat:not(.stat-tech) { justify-content:flex-start; }
.stats .stat:not(.stat-tech) > small { margin-top:9px; }
.stats .stat:not(.stat-tech) > .stat-note { margin-top:9px; }
.editor-styles-wrapper .stats { align-items:stretch!important; }
.editor-styles-wrapper .stats .stat:not(.stat-tech) { justify-content:flex-start!important; }
.editor-styles-wrapper .stats .stat:not(.stat-tech) .stat-note { margin-top:9px!important; }