/* =====================================================================
   Floating side tabs — fixed to the viewport (not the hero), so they
   persist across the whole page as the user scrolls. Not part of the SP
   frame, desktop-only. JS (main.js) toggles `.is-hidden` via an
   IntersectionObserver on the footer, fading them out once the footer
   is on screen so they don't sit on top of it.
   ===================================================================== */

.floating-tabs {
  display: none;
}

@media (min-width: 992px) {
  .floating-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  /* visibility as well as opacity, so the faded-out links also leave the
     tab order (no invisible focus stops); flips only after the fade. */
  .floating-tabs.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .floating-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    border-radius: 8px 0 0 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
  }

  .floating-tab span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  .floating-tab img {
    width: 18px;
    height: 18px;
  }
}
/* =====================================================================
   Hero (FV) — matches Figma node 589:5439 (PC) / 589:8788 (SP)

   Desktop is built as a scaling "stage": a full-viewport-width box (the
   FV is intentionally exempt from the site's 1280px content wrapper —
   it's meant to bleed edge to edge), height = min(62.5vw, 100vh) so the
   FV can never exceed 100vh (62.5vw == 800/1280 * width, i.e. the
   Figma-spec aspect ratio, until the viewport gets too short/wide for
   that to fit).

   Every child is positioned with `cqh` (container query BLOCK/height
   size) units derived from the Figma pixel spec (value / 800 * 100).
   Height is always the constrained axis of a 1280:800 box, so as long
   as the stage is following its natural aspect ratio, cqh and a
   cqw-based (value / 1280 * 100) system produce IDENTICAL results —
   this only diverges once height hits the 100vh ceiling, at which
   point cqh locks to a vh-based value instead of continuing to grow
   with viewport width. That's what keeps the logo/nav/heading/ticker
   from overflowing a height-capped FV on very wide-but-short screens.

   .hero__photo and .hero__ticker are the deliberate exception: they're
   positioned with `left` + `right` (no fixed width), so once height is
   capped and the rest of the composition stops growing horizontally,
   the photo (and the ticker bar under it) freely stretches to fill
   whatever width is left, instead of leaving a gap.

   Text sizes (font-size, and the heading's letter-spacing) are further
   wrapped in `clamp(min, Ncqh, max)`, min/max = the Figma (1280x800)
   value * 0.7 / * 1.6. cqh already adapts to both viewport width AND
   height (see above), so this clamp is a hard floor/ceiling on top of
   that — text never renders smaller than 0.7x or larger than 1.6x its
   spec size, no matter how extreme the viewport gets. Each declaration
   has a comment with its 1280x800 base value for reference.

   Below 768px it drops to plain stacked flow, matching the SP frame.
   ===================================================================== */

.hero {
  position: relative;
  padding-bottom: 32px;
}

.hero__stage {
  position: relative;
  width: 100%;
}

/* ---- Mobile topbar (logo + hamburger) ---- */

.hero__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.hero__logo-mobile img {
  height: 25px;
  width: auto;
}

.hero__burger {
  width: 24px;
  height: 16px;
}

.hero__burger img {
  width: 100%;
  height: 100%;
}

/* ---- Mobile brand block (desktop-only on the stage) ---- */

.hero__brand {
  display: none;
}

/* ---- Mobile photo ---- */

.hero__photo {
  position: relative;
  margin: 24px 20px 0;
  aspect-ratio: 359 / 288;
  border-radius: 4px;
  overflow: hidden;
}

/* object-fit: cover (not a fixed overscan %) so the photo always fills
   .hero__photo regardless of its own aspect ratio or the container's —
   .hero__photo's own width is fluid at desktop (see the cqh stage note
   above), so a hardcoded overscan amount can't be guaranteed to cover it
   at every viewport size the way cover's live recalculation can. */
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Hero photo crossfade: all three images stacked via the shared
   position/inset rule above, opacity-only transition swaps which is
   visible — see js/main.js for the 7s interval that toggles is-active. ---- */
.hero__photo-img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero__photo-img.is-active {
  opacity: 1;
}

/* ---- Mobile content ---- */

.hero__content {
  padding: 32px 20px 0;
}

.hero__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.hero__subtext {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.8;
}

.hero__ctas {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__ticker {
  margin-top: 32px;
  padding: 16px 20px 18px;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--color-gray-300);
  border-bottom: 1px solid var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__ticker-text {
  font-size: 13px;
  line-height: 1.6;
}

.hero__ticker-date {
  display: block;
  margin-bottom: 2px;
}

@media (min-width: 992px) {
  .hero {
    padding-bottom: 0;
  }

  .hero__stage {
    container-type: size;
    container-name: hero;
    height: min(62.5vw, 100vh);
  }

  /* ---- Brand block: logo + nav grid + contact link ----
     Everything below uses `cqh` (container query BLOCK size), not cqw,
     computed on the /800 basis (Figma px / 800 * 100). Since the stage's
     height is always the constrained axis of the 1280:800 box (height =
     min(62.5vw, 100vh)), cqh and cqw are mathematically identical whenever
     the stage is following its natural aspect ratio — so this renders
     pixel-identical to a cqw version in the normal case. The difference
     only shows up once height hits the 100vh ceiling: cqh then locks to
     a vh-based value (stops growing with viewport width), which is what
     keeps the left-column content from overflowing a height-capped FV,
     while .hero__photo (below) is deliberately NOT capped the same way —
     it's positioned with left+right instead of a fixed width, so it
     freely fills whatever horizontal space is left.

     Note: .hero__brand itself (display + position) is toggled at 1200px,
     not here — see the nav-breakpoint block below. Its children's cqh
     sizing rules are harmless to define here since they're inert while
     the parent is display:none. */

  .hero__logo img {
    width: 21.875cqh;
    height: auto;
  }

  .hero__nav-grid {
    margin-top: 3.75cqh;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 3cqh;
    row-gap: 2cqh;
  }

  .hero__nav-col {
    display: flex;
    flex-direction: column;
    gap: 2cqh;
  }

  .hero__nav-col a {
    /* 14px @ 1280x800 · clamps 9.8px (0.7x) – 22.4px (1.6x) */
    font-size: clamp(9.8px, 1.75cqh, 22.4px);
    white-space: nowrap;
    border-bottom: 1px solid #666;
    padding-bottom: 1px;
    max-width: fit-content;
  }

  /* サウナマップ link: same underline + circle-arrow treatment as
     .hero__contact-link, sized on the same cqh basis */
  .hero__nav-col .hero__nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 1cqh;
    width: fit-content;
    padding-bottom: 3px;
  }

  .hero__nav-btn img {
    width: 2.25cqh;
    height: 2.25cqh;
  }

  .hero__contact-link {
    margin-top: 4.5cqh;
    display: inline-flex;
    align-items: center;
    gap: 1cqh;
    /* 14px @ 1280x800 · clamps 9.8px (0.7x) – 22.4px (1.6x) */
    font-size: clamp(9.8px, 1.75cqh, 22.4px);
    white-space: nowrap;
    border-bottom: 1px solid #666;
    padding-bottom: 3px;
    width: fit-content;
  }

  .hero__contact-link img {
    width: 2.25cqh;
    height: 2.25cqh;
  }

  /* ---- Photo: left+right (no fixed width) so it fills remaining space ---- */

  .hero__photo {
    margin: 0;
    position: absolute;
    aspect-ratio: auto;
    left: 45cqh;
    right: 4cqh;
    top: calc(50% - 3cqh);
    transform: translateY(-50%);
    height: 86cqh;
    border-radius: 1cqh;
  }

  /* ---- Heading / subtext / CTAs ---- */

  .hero__content {
    padding: 0;
    position: absolute;
    left: 8.75cqh;
    top: 51.75cqh;
    display: flex;
    flex-direction: column;
    gap: 3cqh;
    z-index: 1;
  }

  .hero__heading {
    /* 47px @ 1280x800 · clamps 32.9px (0.7x) – 75.2px (1.6x) */
    font-size: clamp(32.9px, 5.875cqh, 75.2px);
    /* -1.88px @ 1280x800 · clamps -3.008px (1.6x) – -1.316px (0.7x), tracks the heading's own clamp */
    letter-spacing: clamp(-3.008px, -0.235cqh, -1.316px);
  }

  .hero__subtext {
    margin-top: 0;
    margin-left: 1cqh;
    /* 15px @ 1280x800 · clamps 10.5px (0.7x) – 24px (1.6x) */
    font-size: clamp(10.5px, 1.875cqh, 24px);
    max-width: 44cqh;
  }

  .hero__ctas {
    margin-top: 0;
    flex-direction: row;
    padding-left: 0.625cqh;
    gap: 1cqh;
  }

  .hero__ctas .pill-btn {
    width: 28.25cqh;
    min-width: 0;
    padding: 1.625cqh 2cqh 1.5cqh 2.25cqh;
    /* 15px @ 1280x800 · clamps 10.5px (0.7x) – 24px (1.6x) */
    font-size: clamp(10.5px, 1.875cqh, 24px);
  }

  .hero__ctas .pill-btn img {
    width: 2.25cqh;
    height: 2.25cqh;
  }

  /* ---- News ticker: left+right, mirrors the photo's right edge ---- */

  .hero__ticker {
    margin-top: 0;
    position: absolute;
    left: 45cqh;
    right: 4cqh;
    top: 92.5cqh;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid var(--color-gray-300);
    padding: 0 0 0.75cqh;
  }

  .hero__ticker-text {
    /* 14px @ 1280x800 · clamps 9.8px (0.7x) – 22.4px (1.6x) */
    font-size: clamp(9.8px, 1.75cqh, 22.4px);
  }

  .hero__ticker-date {
    display: inline;
    margin-right: 1cqh;
  }

  .hero__ticker .link-arrow {
    /* 14px @ 1280x800 · clamps 9.8px (0.7x) – 22.4px (1.6x) */
    font-size: clamp(9.8px, 1.75cqh, 22.4px);
    border-bottom-color: #666;
  }

  .hero__ticker .link-arrow img {
    width: 2.25cqh;
    height: 2.25cqh;
  }
}

/* ---- Nav breakpoint: the header nav switches from the mobile
   hamburger topbar to the full in-hero nav (.hero__brand) at 1200px —
   deliberately later than the 992px content/layout breakpoint above,
   since the nav needs more horizontal room than the rest of the hero
   does before it can lay out in one row. ---- */
@media (min-width: 1200px) {
  .hero__topbar {
    display: none;
  }

  .hero__brand {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 4cqh;
    top: 4cqh;
    z-index: 2;
  }
}

/* ---- Tablet (768–991px): keeps the mobile flow layout above (the
   cqh "stage" is a 992px+-only thing), just with PC-scale type and the
   site's 40px tablet gutter instead of the phone-width 20px. ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero__topbar {
    padding-inline: 40px;
  }

  .hero__photo {
    margin-inline: 40px;
  }

  .hero__content {
    padding-inline: 40px;
  }

  .hero__heading {
    font-size: 47px;
  }

  .hero__ticker {
    padding-inline: 40px;
  }

  .hero__ticker-text {
    font-size: 14px;
  }
}
/* ===== Concept ===== */

.concept__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.concept__lede {
  font-size: 14px;
  line-height: 1.8;
}

/* Gallery (photo-strip) hover interaction + lightbox: promoted to
   main.css — see the ".photo-strip" block there. */

.why {
  padding-top: 0;
}

.why__grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
}

.why__media {
  position: relative;
  /* Height derived from .why__media-main's own box (width:70%, aspect-ratio
     238/190, top:19% of this element's height) so the container always
     exactly wraps the taller (main) photo, instead of a fixed px value
     tuned for one viewport width that falls out of sync as width changes
     across the SP/tablet range. */
  aspect-ratio: 1377 / 950;
}

.why__media-main {
  position: absolute;
  left: 33%;
  top: 19%;
  width: 70%;
  aspect-ratio: 238 / 190;
}

.why__media-small {
  position: absolute;
  left: 0;
  top: 0;
  width: 29%;
  aspect-ratio: 73 / 109;
}

.why__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.why__body > .link-arrow{
  margin-left: auto;
}

.why__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
}

.why__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.9;
}

@media (min-width: 992px) {
  .concept__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 46px;
  }

  .concept__lede {
    font-size: 15px;
    max-width: 520px;
  }
  .why__grid {
    flex-direction: row;
    align-items: center;
    gap: 93px;
    padding-right: 128px;
    padding-left: 40px;
  }

  .why__media {
    flex: 613 1 0%;
    height: 380px;
  }

  .why__media-main {
    right: 28%;
    left: auto;
    width: 73%;
  }

  .why__media-small {
    right: 0;
    left: auto;
    width: 22%;
  }

  .why__body {
    flex: 414 1 0%;
  }

  .why__paragraphs {
    gap: 16px;
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ---- Tablet: mobile (stacked) layout, PC-scale type ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .concept__lede {
    font-size: 15px;
  }
}

/* ===== Voice ===== */

/* No gap here — eyebrow-to-title spacing comes from .section-title's
   own margin-top; a flex gap would double-count it. */
.voice__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.voice__video {
  margin-top: 32px;
  aspect-ratio: 335 / 189;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.voice__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.voice__subheading {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
}

.voice__subheading::before,
.voice__subheading::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

.voice__cards {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- SP/tablet disclosure: only the first testimonial shows by default,
   the "もっと見る" button reveals the remaining two. PC always shows all
   three (see .voice__cards row layout below), so the button is hidden
   there and the extra cards' display:none is scoped to this query only. ---- */
.voice__more {
  align-self: center;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  padding: 0 0 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

@media (max-width: 991px) {
  .voice__cards:not(.is-expanded) .voice__card--extra {
    display: none;
  }
}

@media (min-width: 992px) {
  .voice__more {
    display: none;
  }

  .voice__video {
    aspect-ratio: 748 / 421;
    border-radius: 4px;
    max-width: 748px;
    margin: 32px auto 0;
  }

  .voice__subheading {
    margin-top: 64px;
    font-size: 24px;
    flex-direction: row;
  }

  .voice__cards {
    margin-top: 48px;
    flex-direction: row;
    align-items: stretch;
  }

}

/* ---- Tablet: mobile (stacked) layout, PC-scale type ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .voice__subheading {
    font-size: 24px;
  }
}
/* ===== Guide — matches Figma node 589:5582 (PC) ===== */

.guide {
  padding-block: 48px;
}

.guide__grid {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guide-card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 365 / 292;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-white);
}

/* Named class (not a generic `.guide-card img` descendant selector) so
   this never collides with .guide-card__arrow, which is also an <img>
   inside .guide-card — a bare `img` selector here would outrank the
   arrow's own (lower-specificity) class rule and stretch it to fill
   the card instead of staying 22x22px. */
.guide-card__photo {
  position: absolute;
  object-fit: cover;
  max-width: none;
}

/* Mobile/tablet: generic cover crop (no SP-specific offsets captured).
   Desktop below replaces this with the exact Figma per-card crop. */
.guide-card__photo {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Each card uses a different source photo AND a different gradient —
   card 1's overlay concentrates into solid black lower on the image,
   card 2's fades gradually across most of the lower half. */
.guide-card--home .guide-card__overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 43.718%, #000 76.655%);
}

.guide-card--pro .guide-card__overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 44.771%, #000 96.895%);
}

.guide-card__overlay {
  position: absolute;
  inset: 0;
}

.guide-card__content {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-white);
}

.guide-card__text {
  max-width: 259px;
}

.guide-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
}

.guide-card__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.guide-card__arrow {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.guide__container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .guide {
    padding-block: 104px;
  }

  .guide__container {
    flex-direction: row;
    gap: 88px;
    align-items: flex-start;
  }

  .guide__intro {
    flex: 0 0 auto;
  }

  .guide__grid {
    margin-top: 0;
    flex-direction: row;
    flex: 1;
  }

  .guide-card {
    flex: 1;
    width: auto;
  }

  .guide-card__content {
    left: 24px;
  }

  /* Exact Figma crop: an oversized img positioned with left/top offsets
     expressed as % of the card's own 365x292 box, so it scales with the
     card instead of a generic object-fit guess. */
  .guide-card--home .guide-card__photo {
    width: 100%;
    height: 100%;
    left: -67.397%;
    top: -55.479%;
    inset: auto;
  }

  .guide-card--pro .guide-card__photo {
    width: 120%;
    height: 100%;
    left: -11.507%;
    top: 0;
    inset: auto;
  }
}
/* ===== Product ===== */

.product__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.product__lede {
  font-size: 15px;
}

.product__grid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-card__media {
  aspect-ratio: 413 / 275;
  border-radius: 4px;
}

.product-card__text {
  flex: 1;
}

.product-card__name {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
}

.product-card__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.product__banner {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product__banner-text {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-gray-300);
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .product__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 56px;
  }

  .product-card {
    flex: 1;
  }

  .product__banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .product__banner-text {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 14px;
  }
}

/* ---- Tablet: mobile (stacked) layout, PC-scale type ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .product__banner-text {
    font-size: 14px;
  }
}
/* ===== Sauna map CTA — matches Figma node 1802:11267 (PC) ===== */

.sauna-map-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sauna-map-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.sauna-map-cta__text .section-title {
  margin-top: 0;
}

.sauna-map-cta__desc {
  font-size: 14px;
  line-height: 1.9;
}

.sauna-map-cta__media {
  aspect-ratio: 622 / 311;
}

@media (min-width: 992px) {
  .sauna-map-cta {
    padding-block: 104px;
  }

  .sauna-map-cta__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 88px;
  }

  /* Column width = the heading's unwrapped width (Figma: nowrap title,
     body copy wraps to fit under it) */
  .sauna-map-cta__text {
    flex-shrink: 0;
    width: min-content;
  }

  .sauna-map-cta__text .section-title {
    white-space: nowrap;
  }

  .sauna-map-cta__desc {
    font-size: 15px;
  }

  .sauna-map-cta__media {
    flex: 1;
    min-width: 0;
  }
}

/* ---- Tablet: mobile (stacked) layout, PC-scale type ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .sauna-map-cta__desc {
    font-size: 15px;
  }
}

/* ===== Column — matches Figma node 589:5630 (PC) ===== */

.column__grid {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.column__more {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .column {
    padding-top: 88px;
    padding-bottom: 80px;
  }

  .column__grid {
    margin-top: 64px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 32px;
  }
}

/* ===== News — SP matches Figma node 589:8961 ===== */

/* Qualified with the element type: .news is (unusually) shared by both
   the outer <section class="section news"> and the inner
   <div class="container news"> — a bare `.news { padding-top/bottom }`
   would apply to both and double the vertical gap. Scoping to
   `section.news` targets only the outer one. */
section.news {
  padding-top: 32px;
  padding-bottom: 48px;
}

.news {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.news__layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.news__list {
  display: flex;
  flex-direction: column;
}

.news-item {
  padding: 16px 0 16px 4px;
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  gap: 8px;
}

.news__list .news-item:last-child {
  border-bottom: 1px solid var(--color-gray-300);
}

.news-item__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
}

.news-item__date {
  display: block;
}

.news-item__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.news__empty {
  padding: 16px 0 16px 4px;
  font-size: 14px;
  color: var(--color-gray-400);
}

.news__more {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  section.news {
    padding-top: 56px;
    padding-bottom: 88px;
  }

  .news {
    flex-direction: row;
    gap: 104px;
  }

  .news__eyebrow-block {
    flex: 0 0 auto;
  }

  .news__layout {
    flex: 1;
    gap: 40px;
  }

  .news-item {
    padding: 32px 8px;
    gap: 16px;
  }

  .news-item__text {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .news-item__date {
    display: inline;
    width: 62px;
    flex-shrink: 0;
  }
}