/*
 * fitme.lt light refresh (2026-11). Loaded last, after theme.css and app.css.
 * Same layouts and imagery; only type sizes, spacing rhythm, button/radius
 * consistency, small colour fixes and removal of visual noise.
 */

/* ---------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------- */
:root {
  --fm-green: #208741;        /* one CTA green, white text 4.6:1 (was #249449 / #2b9348, 3.9:1) */
  --fm-green-hover: #1b7a3b;
  --fm-ink: #0d2e31;          /* brand dark green, used for headings on light backgrounds */
  --fm-orange: #f16d24;
  --fm-orange-text: #c4500f;  /* orange for small text on light backgrounds (4.6:1 on #fff) */
  --fm-radius: 14px;          /* images and cards */
  --fm-section: 88px;         /* vertical section padding, desktop */

  /* Prestige base text was 11 px; raise the scale to a readable 16 px body. */
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.0625rem;   /* 17 */
  --text-xl: 1.125rem;    /* 18 */

  --button-letter-spacing: 0.04em;
  --button-border-radius: 999px;
}

@media screen and (min-width: 700px) {
  :root {
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.1875rem;
  }
}

@media screen and (max-width: 999px) {
  :root { --fm-section: 64px; }
}

/* ---------------------------------------------------------------------
 * 2. Buttons: one green, one shape, one hover
 * ------------------------------------------------------------------- */
.original-button.button,
.floating-button,
a.btn-custom-header,
.oma\:bg-\[\#249449\],
.oma\:bg-\[\#2b9348\],
.oma\:bg-\[\#00a65a\],
.empty-state .button {
  background-color: var(--fm-green) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.original-button.button:hover,
.floating-button:hover,
a.btn-custom-header:hover,
.oma\:bg-\[\#249449\]:hover,
.oma\:bg-\[\#2b9348\]:hover,
.oma\:bg-\[\#00a65a\]:hover,
.empty-state .button:hover {
  background-color: var(--fm-green-hover) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* The large in-page CTAs were 22 px on desktop; 18 px matches the rest of the page. */
@media (min-width: 1024px) {
  .original-button.button,
  .oma\:bg-\[\#2b9348\].oma\:text-\[22px\] {
    font-size: 18px !important;
    line-height: 20px !important;
    padding: 18px 40px !important;
  }
}

/* Soft shadow instead of the heavy shadow-lg. */
.original-button.button,
.floating-button {
  box-shadow: 0 6px 18px rgb(13 46 49 / 0.18) !important;
}

/* The mobile sticky CTA sat above the open menu drawer. */
html:has(header-sidebar[open]) .floating-button { visibility: hidden; }

/* ---------------------------------------------------------------------
 * 3. Headings on light backgrounds: one ink colour
 * ------------------------------------------------------------------- */
.oma\:text-\[\#333\] h2,
h2.oma\:text-\[\#2c2c2c\] {
  color: var(--fm-ink);
}

/* ---------------------------------------------------------------------
 * 4. FAQ accordion: sentence case, single hairline, readable toggle
 * ------------------------------------------------------------------- */
.faq-section .accordion__toggle .text-with-icon {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
}

@media (max-width: 999px) {
  .faq-section .accordion__toggle .text-with-icon { font-size: 18px; }
}

.faq-section .accordion {
  border-color: rgb(241 109 36 / 0.35) !important;
  border-width: 0 0 1px !important;
}

.faq-section .accordion:first-child {
  border-top-width: 1px !important;
}

.faq-section .accordion__content > div {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: rgb(255 255 255 / 0.88) !important;
}

.faq-section .animated-plus {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------------
 * 5. Section rhythm (sections keep their layout; only outer spacing)
 * ------------------------------------------------------------------- */
@media screen and (min-width: 1000px) {
  :root {
    --section-vertical-spacing: 5rem;        /* 80, was 56 */
    --section-vertical-spacing-tight: 4rem;  /* 64, was 56 */
  }
}

/* "Ką gausi": bottom gap was 100 px on top of the next section's 158 px. */
[id^="shopify-section-oma_multicolumn_slider"] > div:first-of-type {
  padding-top: var(--fm-section) !important;
  padding-bottom: calc(var(--fm-section) - 32px) !important;
}
[id^="shopify-section-oma_multicolumn_slider"] h2 {
  padding-bottom: 8px !important;
}
/* closing sentence under the feature grid: 100 px above + 100 px below */
[id^="shopify-section-oma_multicolumn_slider"] > div:first-of-type > div[class*="lg:pb-[100px]"] {
  margin-top: 56px !important;
  padding-bottom: 0 !important;
}

/* Reviews collage was tighter (50 px) than its neighbours. */
[id^="shopify-section-oma_reviews_"] > div:first-of-type {
  padding-top: var(--fm-section) !important;
  padding-bottom: var(--fm-section) !important;
}

/* Newsletter: 40 / 148 px became even. */
[id^="shopify-section-oma_newsletter"] > div:first-of-type {
  padding-top: calc(var(--fm-section) - 8px) !important;
  padding-bottom: calc(var(--fm-section) - 8px) !important;
}
[id^="shopify-section-oma_newsletter"] form {
  padding-top: 32px !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
 * 6. Newsletter form: matching field and button
 * ------------------------------------------------------------------- */
[id^="shopify-section-oma_newsletter"] h2 {
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
}
[id^="shopify-section-oma_newsletter"] .form-row {
  align-items: stretch;
  gap: 12px !important;
}
[id^="shopify-section-oma_newsletter"] input[type="email"] {
  border-radius: 999px !important;
  height: 52px;
  padding-inline: 22px !important;
  border: 0;
}
[id^="shopify-section-oma_newsletter"] .button {
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 0 28px !important;
  min-height: 52px;
  margin: 0 !important;
  box-shadow: none !important;
}

/* 7. Blog cards: see section 24 (round 4). */

/* Blog filter chips */
.blog-tags a {
  font-size: 13px !important;
  letter-spacing: 0.04em;
  padding: 6px 16px !important;
}

/* ---------------------------------------------------------------------
 * 8. Footer
 * ------------------------------------------------------------------- */
.footer .footer-dropdown__title > span,
.footer .footer__block--text .v-stack > p:first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--fm-ink) !important;
}
.footer .footer-dropdown__content a {
  color: #2c3a3b !important;
}
.footer .footer-dropdown__content a:hover {
  color: var(--fm-orange-text) !important;
}
@media (min-width: 1024px) {
  .footer .footer-dropdown__content a { font-size: 16px !important; }
  .footer .footer__block--text .prose { font-size: 16px !important; }
}
.footer .footer-dropdown__content { padding-left: 0; }
.footer .footer-dropdown__content li { margin-left: 0; padding-left: 0; }
.footer .footer__aside .heading {
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 699px) {
  [id^="shopify-section-oma_newsletter"] .form-row { width: 100%; margin-inline: 0 !important; padding-inline: 0 !important; gap: 8px !important; }
  [id^="shopify-section-oma_newsletter"] .form-row .form-control { flex: 1 1 0; min-width: 0; }
  [id^="shopify-section-oma_newsletter"] .form-row input[type="email"] { width: 100%; min-width: 0; padding-inline: 18px !important; }
  [id^="shopify-section-oma_newsletter"] .button { padding: 0 18px !important; flex: none; }
}

/* ---------------------------------------------------------------------
 * 9. Header and mobile drawer
 * ------------------------------------------------------------------- */
a.btn-custom-header {
  font-size: 15px;
  padding: 11px 28px !important;
}
.header-sidebar__linklist-button.h6 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.header-sidebar__linklist.divide-y > * {
  border-color: rgb(13 46 49 / 0.1);
}

/* ---------------------------------------------------------------------
 * 10. Article
 * ------------------------------------------------------------------- */
/* Steps lists lost their numbers and bullets in the port. */
.prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.prose ul:not(.unstyled-list):not(.social-media) { list-style: disc; padding-inline-start: 1.4em; }
.prose li::marker { color: var(--fm-orange); }

/* Brand-coloured share icons were off-palette: one quiet ink colour. */
.article .social-media svg [fill]:not([fill="white"]):not([fill="#fff"]):not([fill="none"]):not(svg) {
  fill: var(--fm-ink);
}
.article .social-media svg [stroke]:not([stroke="white"]):not([stroke="none"]):not(svg) {
  stroke: var(--fm-ink);
}

.article h1 { color: var(--fm-ink); }
.article__footer-bottom .h6 { font-size: 14px; }
.article picture img,
.article .v-stack > div > img.w-full,
.article img.w-full { border-radius: var(--fm-radius); }

/* Page titles on light pages: brand ink instead of pure black. */
.shopify-section--main-blog .h1,
[id^="shopify-section-rich_text"] .color-scheme--scheme-1 .h1,
.shopify-section--main-page h1,
.shopify-section--main-page .h1 { color: var(--fm-ink); }

/* ---------------------------------------------------------------------
 * 11. Contact form button and inputs
 * ------------------------------------------------------------------- */
.oma\:bg-\[\#00a65a\] {
  font-size: 16px !important;
  font-weight: 500 !important;
  padding-inline: 28px !important;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .oma\:bg-\[\#00a65a\] {
    max-width: none !important;
    width: auto !important;
    justify-self: start;
    align-self: flex-start;
  }
}

/* ---------------------------------------------------------------------
 * 12. 404
 * ------------------------------------------------------------------- */
.empty-state h1.h4 {
  font-size: 64px;
  font-weight: 700;
  color: var(--fm-orange);
  line-height: 1;
}
.empty-state p { font-size: 17px; color: #3d4a4b; }
.empty-state .button {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 32px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
 * 14. Apie mus: the orange three-column band touched the window edge
 * ------------------------------------------------------------------- */
[id^="shopify-section-multi_column"] .container {
  padding-inline: var(--container-gutter) !important;
  max-width: calc(var(--container-lg-max-width) + 2 * var(--container-gutter)) !important;
}

@media (max-width: 999px) {
  a.btn-custom-header { font-size: 13px; padding: 8px 16px !important; }
}

/* The hidden 1px section border (orange-on-orange before the FAQ border-colour
   leak was scoped) showed as a dark hairline on the orange gradient sections. */
.bordered-section[class*="bg-linear"],
.bordered-section[class*="bg-[#F16E28]"] {
  border-top-width: 0 !important;
}

/* Mobile: hero and orange band copy sat 8-10 px from the screen edge. */
@media (max-width: 699px) {
  .main-bannner image-with-text > div,
  [id^="shopify-section-oma_image_with_text_simplified"] image-with-text > div {
    padding-inline: 12px;
  }
}

/* Prestige buttons in page sections (Apie mus, Atsiliepimai) carried their own
   22 px, 30 px-radius styles from the template custom CSS. */
[id^="shopify-section-image_with_text"] .button,
[id^="shopify-section-rich_text"] .button {
  background-color: var(--fm-green) !important;
  border-color: var(--fm-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 14px 32px !important;
}
[id^="shopify-section-image_with_text"] .button:hover,
[id^="shopify-section-rich_text"] .button:hover {
  background-color: var(--fm-green-hover) !important;
  border-color: var(--fm-green-hover) !important;
}

/* =====================================================================
 * Round 2 (2026-11): forms, current nav item, chips, share icons, caps
 * ===================================================================== */

/* No all-caps buttons: copy is now written in sentence case. */
:root { --button-text-transform: none; }
.original-button.button,
.floating-button,
.button { text-transform: none; }

/* ---------------------------------------------------------------------
 * 15. Form fields (contact, review): visible labels, readable inputs
 * ------------------------------------------------------------------- */
.fm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}
.fm-field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fm-ink);
}
.fm-field input,
.fm-field textarea {
  background-color: #fff !important;
  border: 1px solid #8c9a9b !important;   /* 3:1 against white and cream */
  border-radius: 12px !important;
  font-size: 16px !important;              /* also stops iOS zoom on focus */
  color: var(--fm-ink) !important;
  padding: 12px 14px !important;
}
.fm-field input { width: 100%; }
.fm-field textarea { min-height: 120px; }
.fm-field input:focus,
.fm-field textarea:focus {
  outline: 2px solid var(--fm-orange);
  outline-offset: 1px;
  border-color: var(--fm-ink) !important;
}
/* Review form sits on solid orange below 1024 px: white labels there. */
@media (max-width: 1023px) {
  [id^="shopify-section-oma_review_form"] .fm-field__label { color: #fff; }
}

/* Contact page headings: one h1, one subheading, no capitals. */
.fm-contact-title {
  color: var(--fm-ink);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
}
.fm-contact-subheading {
  color: var(--fm-ink);
  font-weight: 500;
  margin-top: 0;
}
[id^="shopify-section-oma_contact"] .oma\:grid-cols-1 a {
  color: var(--fm-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * 16. Header: current section
 * ------------------------------------------------------------------- */
.header__primary-nav-item a[aria-current],
.header-sidebar__linklist-button[aria-current] {
  color: var(--fm-ink);
  font-weight: 700 !important;
}
.header__primary-nav-item a:not([aria-current]) {
  color: rgb(13 46 49 / 0.78);
}
.header__primary-nav-item a:not([aria-current]):hover { color: var(--fm-ink); }

/* ---------------------------------------------------------------------
 * 17. Blog filter chips: one style, active one filled
 * ------------------------------------------------------------------- */
.blog-tags li,
.blog-tags li.link-faded { opacity: 1; }
.blog-tags li a {
  display: inline-block;
  border: 1px solid var(--fm-orange) !important;
  background: transparent !important;
  color: var(--fm-ink) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: lowercase;
}
.blog-tags li a::first-letter { text-transform: uppercase; }
.blog-tags li a:hover {
  background: rgb(241 109 36 / 0.1) !important;
}
.blog-tags li.is-active a,
.blog-tags li.is-active a:hover {
  background: var(--fm-orange) !important;
  color: #fff !important;
}

/* Category pill on cards and articles: sentence case (tags are stored in capitals). */
.fm-tag-pill {
  display: inline-block;
  text-transform: lowercase;
  letter-spacing: 0 !important;
}
.fm-tag-pill::first-letter { text-transform: uppercase; }
.fm-tag-pill {
  font-size: 13px;
  line-height: 1;
  padding: 6px 12px;
}

/* Footer copyright: sentence case. */
.footer .footer__aside .heading { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---------------------------------------------------------------------
 * 18. Article share icons: 32 px outlined circles, ink glyphs
 * ------------------------------------------------------------------- */
.share-buttons { gap: 10px !important; }
.share-buttons .share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(13 46 49 / 0.35);
  border-radius: 50%;
  color: var(--fm-ink);
  background: transparent;
  transition: border-color .15s, background-color .15s;
}
.share-buttons .share-button:hover {
  border-color: var(--fm-ink);
  background: rgb(13 46 49 / 0.06);
}

/* ---------------------------------------------------------------------
 * 19. Apie mus orange band: readable body text
 * ------------------------------------------------------------------- */
/* White 14 px on the light end of the gradient was ~2:1. Body copy is now
   16 px brand ink (4.8:1 to 7:1 across the gradient); headings stay white. */
[id^="shopify-section-multi_column_WYJgKf"] .multi-column__item p,
[id^="shopify-section-multi_column_WYJgKf"] .multi-column__item .prose {
  color: var(--fm-ink) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------------
 * 20. Blog newsletter with photo: section rhythm, photo not cropped
 * ------------------------------------------------------------------- */
[id^="shopify-section-oma_newsletter_v2"] > div {
  height: auto !important;
  min-height: 480px;
  justify-content: flex-start !important;
  padding-top: var(--fm-section);
  background-position: center bottom !important;
}
[id^="shopify-section-oma_newsletter_v2"] form { padding-top: 32px !important; }
@media (max-width: 699px) {
  [id^="shopify-section-oma_newsletter_v2"] > div { min-height: 340px; }
}

/* Contact page on mobile: breathing room between the stacked contact blocks. */
@media (max-width: 1023px) {
  [id^="shopify-section-oma_contact"] .oma\:grid-cols-1 { gap: 24px; margin-top: 40px; }
  .fm-contact-title { margin-bottom: 8px !important; }
  .fm-contact-subheading { margin-bottom: 12px !important; }
}

/* Contact headings: restore rhythm between the h1 and the two-column block. */
.fm-contact-title { margin-bottom: 44px !important; }
.fm-contact-subheading { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 16px !important; }
@media (max-width: 1023px) {
  .fm-contact-title { margin-bottom: 28px !important; }
  .fm-contact-subheading { font-size: 20px !important; margin-bottom: 12px !important; }
}

/* =====================================================================
 * Round 3 (2026-11): orange bands, CTA on orange, header
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 21. Orange image-with-text band ("Užpildyk anketą..." on Atsiliepimai)
 * ------------------------------------------------------------------- */
[id^="shopify-section-oma_image_with_text_simplified"] > div {
  padding-top: var(--fm-section) !important;
  padding-bottom: var(--fm-section) !important;
}
/* The phone image sits inside the band with room around it, never taller
   than what fits under the sticky header. */
[id^="shopify-section-oma_image_with_text_simplified"] #animated-image {
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}
[id^="shopify-section-oma_image_with_text_simplified"] #animated-image img {
  width: auto;
  max-width: 100%;
  max-height: min(600px, calc(100vh - var(--header-height, 66px) - 2 * var(--fm-section)));
  object-fit: contain;
}
/* One text block: heading, paragraph, claim, CTA, guarantee, evenly spaced. */
[id^="shopify-section-oma_image_with_text_simplified"] .main-content {
  gap: 0 !important;
  color: #fff;
}
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > * {
  margin: 0 0 20px !important;
  color: #fff !important;
}
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > *:last-child { margin-bottom: 0 !important; }
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > p:first-child {
  font-size: 52px !important;
  line-height: 1.1 !important;
  width: auto !important;
  max-width: 560px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > div:not(.icon-with-text-container) {
  font-size: 19px !important;
  line-height: 1.55 !important;
}
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > div p { margin: 0; }
[id^="shopify-section-oma_image_with_text_simplified"] .main-content > .button {
  margin-top: 12px !important;
  max-width: none !important;
}
[id^="shopify-section-oma_image_with_text_simplified"] .icon-with-text-item {
  gap: 10px !important;
}
[id^="shopify-section-oma_image_with_text_simplified"] .icon-with-text-item img {
  width: 22px !important;
  display: block;
}
@media (max-width: 999px) {
  [id^="shopify-section-oma_image_with_text_simplified"] .main-content > p:first-child {
    font-size: 34px !important;
    margin-inline: auto;
  }
  [id^="shopify-section-oma_image_with_text_simplified"] .main-content > div:not(.icon-with-text-container) {
    font-size: 17px !important;
  }
  [id^="shopify-section-oma_image_with_text_simplified"] > div { padding-bottom: 0 !important; }
}

/* ---------------------------------------------------------------------
 * 22. CTAs on orange: white pill, ink text, no heavy shadow
 *     (green CTAs stay on white and light backgrounds; the mobile sticky
 *     CTA floats over every section, so it keeps the green)
 * ------------------------------------------------------------------- */
.main-bannner .original-button.button,
[id^="shopify-section-oma_image_with_text_simplified"] .original-button.button {
  background-color: #fff !important;
  color: var(--fm-ink) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.main-bannner .original-button.button:hover,
[id^="shopify-section-oma_image_with_text_simplified"] .original-button.button:hover {
  background-color: #fde7da !important;
  color: var(--fm-ink) !important;
}

/* ---------------------------------------------------------------------
 * 23. Header
 * ------------------------------------------------------------------- */
/* The Prestige hover bar was sized from data-title in the heading font,
   sat at the header's bottom edge and slid in. Replaced by an instant
   underline right under the word. */
.header__primary-nav-item:before { display: none !important; }
.header__primary-nav { column-gap: 28px !important; }
#shopify-section-header .header__primary-nav-item a {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-decoration: none;
  transition: none !important;
}
#shopify-section-header .header__primary-nav-item a:hover {
  color: var(--fm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
#shopify-section-header .header__primary-nav-item a[aria-current] { font-weight: 700 !important; color: var(--fm-ink); }
#shopify-section-header .header__primary-nav-item a[aria-current]:hover { text-decoration: none; }
a.btn-custom-header {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 22px !important;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none !important;
}
#shopify-section-header .header { padding-block: 13px !important; }
#shopify-section-header .header {
  transition: box-shadow .15s;
}
#shopify-section-header[data-scrolled] .header {
  box-shadow: 0 1px 0 rgb(13 46 49 / 0.08), 0 4px 16px rgb(13 46 49 / 0.06);
}
@media (max-width: 999px) {
  a.btn-custom-header { height: 34px; padding: 0 16px !important; font-size: 13px; }
}

/* Band text column: centred against the phone, 560 px measure. */
@media (min-width: 1000px) {
  [id^="shopify-section-oma_image_with_text_simplified"] image-with-text { align-items: center !important; }
  [id^="shopify-section-oma_image_with_text_simplified"] .main-content {
    align-self: center !important;
    justify-content: center;
    max-width: 560px !important;
    width: 100%;
  }
  [id^="shopify-section-oma_image_with_text_simplified"] .main-content > div:not(.icon-with-text-container) { max-width: 560px !important; }
}

/* ---------------------------------------------------------------------
 * 24. Horizontal overflow fixes
 * ------------------------------------------------------------------- */
/* Feature columns slide in from 120 px off-screen (translate-x-30); until they
   are revealed they widened the page and caused a horizontal scrollbar. */
#features-section { overflow-x: clip; }

/* Contact photo had max-width 500 px inside a 40 % column, overflowing at ~1024 px. */
.contact-photo-col { min-width: 0; }
.contact-photo-col img { width: 100%; height: auto; }

/* =====================================================================
 * Round 4 (2026-11): blog post card
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 24. Post card: one link, 4:3 image, pill + date, clamped title/excerpt
 * ------------------------------------------------------------------- */
.blog-post-list { align-items: stretch !important; }

.fm-card {
  position: relative;            /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--fm-radius);
}
.fm-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fm-radius);
  background: #eceae3;
}
.fm-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* keeps faces in portrait photos */
}
.fm-card__body {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.fm-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  line-height: 1.3;
  color: #5b6b6b;
}
.fm-card__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fm-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.fm-card__title {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fm-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.fm-card__link {
  color: inherit;
  text-decoration: none;
  transition: none;
}
/* The title link covers the whole card: one target, one tab stop. */
.fm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fm-radius);
}
.fm-card__excerpt {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5859;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* Hover: instant, title only; the image does not move. */
.fm-card:hover .fm-card__link {
  color: var(--fm-orange-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* Keyboard focus: ring around the whole card. */
.fm-card__link:focus { outline: none; }
.fm-card__link:focus-visible::after {
  outline: 3px solid var(--fm-orange);
  outline-offset: 6px;
}
@media (max-width: 699px) {
  .fm-card__title { font-size: 18px; }
}

/* Article sidebar "Naujausi įrašai": same date format, no reading time. */
.fm-sidebar-date { font-size: 14px; color: #5b6b6b; }
.featured-blog-post-img > div {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center;
  gap: 4px !important;
}
.featured-blog-post-img > img { border-radius: 8px; }
.featured-blog-post-img h2 { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--fm-ink); margin: 0; }
.featured-blog-post-img h2 a:hover { color: var(--fm-orange-text); text-decoration: underline; text-underline-offset: 3px; }