/**
 * FinClub longread layout fixes — hero/boris without overlapping overlays.
 */

/* --- Hero: column layout instead of stacked absolute layers --- */
.fc-pl-hero.fullscreen-white-office,
.fc-dds-hero.fullscreen-white-office,
.fc-unit-hero.fullscreen-white-office,
.fc-nalogi-hero.fullscreen-white-office,
[class*="fc-"][class*="-hero"].fullscreen-white-office {
  position: relative;
  overflow: hidden;
  min-height: 0 !important;
  height: auto !important;
  padding: calc(var(--header-offset, 7.75rem) + 1.5rem) clamp(1.25rem, 4vw, 3rem) 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.75rem;
  background: #eef6f1;
}

.fc-dds-hero.fullscreen-white-office {
  background: #ecfdf5;
}

/* Decorative chips overlap canvas — hide */
.fc-pl-hero .vl-ui-tasks,
.fc-pl-hero .vl-ui-pill,
.fc-dds-hero .vl-ui-tasks,
.fc-dds-hero .vl-ui-pill,
[class*="fc-"][class*="-hero"] .vl-ui-tasks,
[class*="fc-"][class*="-hero"] .vl-ui-pill {
  display: none !important;
}

/* Title block: normal flow */
.fc-pl-hero__content,
.fc-dds-hero__content,
[class*="fc-"][class*="-hero"] [class*="__content"] {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 42rem !important;
  width: 100%;
  z-index: 2;
  order: 1;
}

/* Canvas: contained strip below headline, not full-screen backdrop */
#pl-marzhi-hero-canvas,
#dds-sellera-hero-canvas,
[id$="-hero-canvas"] {
  position: relative !important;
  inset: auto !important;
  order: 2;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: clamp(220px, 32vw, 340px) !important;
  min-height: 220px;
  border-radius: 16px;
  border: 1px solid rgba(4, 120, 87, 0.12);
  background: rgba(255, 255, 255, 0.65);
  z-index: 1;
  pointer-events: none;
  flex-shrink: 0;
}

/* --- Boris / body canvas blocks --- */
.boris-pl-ladder,
.boris-dds-bridge,
[class*="boris-"][class*="ladder"],
[class*="boris-"][class*="bridge"],
section[id$="-boris-block"] {
  margin: 2rem auto !important;
  max-width: min(820px, 100%) !important;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
  box-sizing: border-box;
}

.boris-pl-ladder__grid,
.boris-dds-bridge__grid,
[class*="boris-"] [class*="__grid"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.boris-pl-ladder__canvas-wrap,
.boris-dds-bridge__canvas-wrap,
[class*="boris-"] [class*="__canvas-wrap"] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 280px;
  height: auto !important;
  overflow: hidden;
  border-radius: 14px;
}

.boris-pl-ladder__canvas-wrap canvas,
.boris-dds-bridge__canvas-wrap canvas,
[id$="-body-canvas"] {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  max-height: 320px;
  display: block;
}

/* --- Content sections --- */
[class$="-page"] .ym-section,
[class$="-page"] .ym-section-compact {
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
  box-sizing: border-box;
}

[class$="-page"] .ym-container,
[class$="-page"] .ym-wrap {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

[class$="-page"] .ym-prose {
  overflow-wrap: anywhere;
  word-break: break-word;
}

[class$="-page"] .ym-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pl-intro-grid,
.dds-intro-grid,
[class$="-intro-grid"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 901px) {
  .pl-intro-grid,
  .dds-intro-grid,
  [class$="-intro-grid"] {
    flex-direction: row !important;
    align-items: flex-start;
  }

  .pl-intro-grid > *:first-child,
  .dds-intro-grid > *:first-child {
    flex: 1 1 55%;
  }
}

@media (max-width: 640px) {
  .fc-pl-hero .giant-seo,
  .fc-dds-hero .giant-seo,
  [class*="fc-"][class*="-hero"] .giant-seo {
    font-size: clamp(1.65rem, 7vw, 2rem) !important;
  }

  [id$="-hero-canvas"] {
    height: 200px !important;
    min-height: 200px;
  }
}