/* Print styles for PDF export
   Goal: static, readable pages with predictable section rhythm. */

@media print {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --print-page-content-height: 269mm;
    --print-hero-image: url("./assets/img/planka_hero_desktop_rightfade.jpg");
  }

  html {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    margin: 0;
    background: #fff;
    color: #1f2b37;
  }

  @page {
    size: A4;
    margin: 14mm;
  }

  .section {
    min-height: auto !important;
    height: auto !important;
    background: #fff !important;
    break-before: page;
    page-break-before: always;
    break-after: page;
    page-break-after: always;
    break-inside: auto;
    page-break-inside: auto;
  }

  .section:first-of-type {
    break-before: auto;
    page-break-before: auto;
  }

  .section:last-of-type {
    break-after: auto;
    page-break-after: auto;
  }

  .container {
    padding: 0;
  }

  .only-print {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }

  /* Keep headings attached to first content row. */
  h1, h2, h3, h4,
  .display, .title, .stage-print-header, .stage-name, .layer-name, .slide-point__label,
  #gesture .stage-title {
    break-inside: avoid-page;
    page-break-inside: avoid;
    break-after: avoid-page;
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  h1 + *, h2 + *, h3 + *, h4 + *,
  .display + *, .title + *, .stage-print-header + *, .stage-name + *, .layer-name + *, .slide-point__label + *,
  #gesture .stage-title + * {
    break-before: avoid-page;
    page-break-before: avoid;
  }

  .reveal,
  .reveal.slide {
    opacity: 1 !important;
    transform: none !important;
  }

  .parallax {
    transform: none !important;
    position: static !important;
    height: auto !important;
  }

  .section-sticky {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    min-height: auto !important;
    margin: 0 0 4mm !important;
    padding: 0 0 2.2mm !important;
    border: 0 !important;
    border-bottom: 0.35mm solid #9fb2c5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .section-sticky .title {
    margin: 0 !important;
    font-size: 14pt !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #1f2b37 !important;
  }

  #object .section-sticky .title {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #object .section-sticky .title::before {
    content: "Предмет";
    display: block;
    font-size: 14pt;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #1f2b37;
  }

  .slide-point {
    margin-top: 5mm;
    padding: 3mm 3.5mm;
    border-left: 0.35mm solid #97abbe;
    background: rgba(31, 43, 55, 0.035);
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .slide-point__label {
    margin-bottom: 1.2mm;
    font-size: 9pt;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: none;
    opacity: 0.75;
  }

  .slide-point__text {
    font-size: 10.2pt;
    line-height: 1.34;
    font-weight: 600;
  }

  /* HERO: remove print full-bleed artifacts and force image fallback. */
  #intro {
    width: auto !important;
    margin: 0 !important;
    min-height: var(--print-page-content-height) !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transition: none !important;
    background: #fff var(--print-hero-image) right center / cover no-repeat !important;
  }

  #intro .planka-hero__bg {
    display: none !important;
  }

  #intro .planka-hero__bg,
  #intro .planka-hero__bg::before,
  #intro .planka-hero__bg::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
  }

  #intro.planka-hero .planka-hero__bg-print {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }

  #intro::before {
    content: none !important;
  }

  #intro .planka-hero__content {
    position: relative !important;
    z-index: 1 !important;
    min-height: var(--print-page-content-height) !important;
    max-width: 58% !important;
    padding: 10mm 0 !important;
    justify-content: flex-end !important;
    background: transparent !important;
  }

  #intro .planka-hero__title {
    max-width: 18ch;
    font-size: 30pt !important;
    line-height: 1.08 !important;
  }

  #intro .planka-hero__subtitle {
    max-width: 34ch;
    font-size: 12pt;
    line-height: 1.3;
  }

  #requirements .container,
  #gesture .container,
  #layers .container {
    min-height: var(--print-page-content-height);
    display: block;
  }

  #principles .container,
  #object .container,
  #growth .container {
    min-height: var(--print-page-content-height);
    display: flex;
    flex-direction: column;
  }

  /* REQUIREMENTS: two cards per page + repeated section heading. */
  #requirements {
    break-inside: auto;
    page-break-inside: auto;
  }

  #requirements .req-sticky {
    display: none !important;
  }

  #requirements .requirements-intro {
    display: none !important;
  }

  #requirements .req-stages {
    display: block;
  }

  #requirements .stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 104mm !important;
    margin: 0;
    padding: 0;
    border: 0;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #requirements .stage:nth-child(odd) {
    break-before: page;
    page-break-before: always;
  }

  #requirements .stage:first-child {
    break-before: auto;
    page-break-before: auto;
  }

  #requirements .stage:nth-child(even) {
    border-top: 0.26mm solid #d5dfeb;
    padding-top: 2.4mm;
    margin-top: 2.4mm;
  }

  #requirements .stage-print-header {
    display: none !important;
  }

  #requirements .stage:nth-child(odd)::before {
    content: "Эволюция средств коммуникации";
    display: block;
    width: 100%;
    margin: 0 0 3mm;
    padding: 0 0 2mm;
    border-bottom: 0.35mm solid #9fb2c5;
    font-size: 14pt;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #1f2b37;
  }

  #requirements .stage-grid {
    display: grid !important;
    width: 100%;
    grid-template-columns: 68mm minmax(0, 1fr);
    gap: 2.2mm 2.9mm;
    align-items: start;
    flex: 1 1 auto;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #requirements .stage-media,
  #requirements .stage-copy {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #requirements .stage-media .media-image,
  #requirements .stage-media-placeholder {
    min-height: 68mm;
    height: 68mm;
    object-fit: cover;
  }

  #requirements .stage-copy {
    gap: 1.2mm;
    align-content: start;
  }

  #requirements .stage-name {
    font-size: 10.1pt;
    line-height: 1.24;
    text-transform: none;
    letter-spacing: 0.015em;
  }

  #requirements .stage-strong,
  #requirements .stage-but,
  #requirements .stage-need {
    margin: 0;
    max-width: none;
    font-size: 8.9pt;
    line-height: 1.24;
  }

  #requirements .stage-strong span,
  #requirements .stage-but span,
  #requirements .stage-need span {
    margin-bottom: 0.45mm;
    font-size: 7.2pt;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  #requirements .stage .slide-point {
    margin-top: auto;
  }

  #designing .grid-12 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6mm;
  }

  #designing .ph,
  #designing .media-image {
    min-height: 50mm;
    height: 50mm;
    object-fit: cover;
  }

  /* GESTURE: page split by subheading + stacked print alternatives. */
  #gesture .stage {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--print-page-content-height) - 12mm);
    margin: 0;
    padding: 0;
    border: 0;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #gesture .stage + .stage {
    break-before: page;
    page-break-before: always;
  }

  #gesture .stage + .stage::before {
    content: "Жест";
    display: block;
    width: 100%;
    margin: 0 0 3mm;
    padding: 0 0 2mm;
    border-bottom: 0.35mm solid #9fb2c5;
    font-size: 14pt !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #1f2b37 !important;
  }

  #gesture .stage-title {
    margin: 0 0 2.2mm;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  #gesture .stage-title::before {
    display: block;
    font-size: 11.2pt;
    line-height: 1.24;
    font-weight: 650;
    color: #31485d;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  #gesture .stage:nth-of-type(1) .stage-title::before { content: "Письмо"; }
  #gesture .stage:nth-of-type(2) .stage-title::before { content: "Намерение"; }
  #gesture .stage:nth-of-type(3) .stage-title::before { content: "Показ"; }
  #gesture .stage:nth-of-type(4) .stage-title::before { content: "Продолжил"; }

  #gesture .media-row {
    grid-template-columns: 1fr;
    gap: 2mm;
    margin-top: 0;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #gesture .media-row .gesture-visual {
    display: none !important;
  }

  #gesture .only-print {
    display: block !important;
  }

  #gesture .only-screen {
    display: none !important;
  }

  #gesture .gesture-copy {
    max-width: none;
    gap: 1.6mm;
  }

  #gesture .gesture-copy p {
    margin: 0;
    font-size: 10pt;
    line-height: 1.34;
    color: #31485d;
  }

  #gesture .only-print.alt {
    margin-top: 1.4mm;
    display: block !important;
  }

  #gesture .stage:not(:last-of-type) .only-print.alt {
    margin-bottom: auto;
  }

  #gesture .only-print.alt .media-image + .media-image {
    margin-top: 1.4mm;
  }

  #gesture .only-print .media-image {
    min-height: 68mm;
    height: 68mm;
    object-fit: contain;
  }

  #gesture .stage:nth-of-type(2) .only-print .media-image,
  #gesture .stage:nth-of-type(3) .only-print .media-image {
    min-height: 36mm;
    height: 36mm;
  }

  #gesture .stage:nth-of-type(4) .only-print .media-image {
    min-height: 62mm;
    height: 62mm;
  }

  #gesture .stage:nth-of-type(4) {
    min-height: calc(var(--print-page-content-height) - 16mm);
  }

  #gesture .stage:nth-of-type(4) .media-row,
  #gesture .stage:nth-of-type(4) .only-print.alt {
    flex: 1 1 auto;
  }

  #gesture .gesture-reaction--overlay,
  #gesture .gesture-reaction--print {
    display: none !important;
  }

  #gesture .stage .slide-point {
    margin-top: auto;
  }

  /* PRINCIPLES: full-width tags, reduced vertical padding. */
  #principles .principles {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 1.4mm;
    margin-top: 0;
    min-height: 0;
    flex: 1 1 auto;
  }

  #principles .pill {
    width: 100%;
    min-height: 0 !important;
    padding: 0.75mm 2.8mm 0.75mm 7.8mm;
    border-radius: 7mm 0 0 7mm;
    font-size: 8.9pt !important;
    line-height: 1.14 !important;
    text-align: left;
  }

  #principles .pill::before {
    left: 3.3mm;
    width: 2.1mm;
    height: 2.1mm;
    border-width: 0.3mm;
  }

  #principles .slide-point {
    margin-top: auto;
  }

  /* OBJECT: compact pair rows and bottom summary block. */
  #object .object-subtitle {
    max-width: none;
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.33;
  }

  #object .object-layout {
    margin-top: 2.4mm;
    display: grid;
    gap: 2.8mm;
    min-height: 0;
    flex: 1 1 auto;
  }

  #object .object-pair {
    display: grid;
    grid-template-columns: 68mm minmax(0, 1fr);
    gap: 3.2mm;
    align-items: start;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  #object .object-pair.is-reverse .object-media {
    order: 1;
  }

  #object .object-pair.is-reverse .object-copy {
    order: 2;
  }

  #object .object-media .media-image {
    min-height: 62mm;
    height: 62mm;
    object-fit: contain;
  }

  #object .object-title {
    margin: 0;
    font-size: 10.4pt;
    line-height: 1.28;
    color: #2f4559;
  }

  #object .object-text {
    margin: 1.1mm 0 0;
    font-size: 8.9pt;
    line-height: 1.22;
    color: #42586d;
  }

  #object .slide-point {
    margin-top: auto;
  }

  /* LAYERS: force second block onto a new page with section title at top. */
  #layers .layers-stages {
    margin-top: 0;
    display: block;
  }

  #layers .layer-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: calc(var(--print-page-content-height) - 12mm);
    margin: 0;
    padding: 0;
    border: 0;
    break-inside: auto;
    page-break-inside: auto;
  }

  #layers .layer-stage + .layer-stage {
    break-before: page;
    page-break-before: always;
  }

  #layers .layer-stage + .layer-stage::before {
    content: "Разделение сред";
    display: block;
    width: 100%;
    margin: 0 0 3mm;
    padding: 0 0 2mm;
    border-bottom: 0.35mm solid #9fb2c5;
    font-size: 14pt !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #1f2b37 !important;
  }

  #layers .layer-stage-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2.2mm;
    align-items: start;
    margin-top: auto;
  }

  #layers .layer-stage:first-of-type .layer-stage-grid {
    margin-bottom: auto;
  }

  #layers .layer-stage.is-reverse .layer-media,
  #layers .layer-stage.is-reverse .layer-copy {
    order: initial;
  }

  #layers .layer-media .media-image {
    min-height: 68mm;
    height: 68mm;
    object-fit: contain;
  }

  #layers .layer-copy {
    max-width: none;
    gap: 1.3mm;
  }

  #layers .layer-name {
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.24;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  #layers .layer-note {
    margin: 0;
    font-size: 9.1pt;
    line-height: 1.24;
    color: #3d5267;
  }

  #layers .layer-stage .slide-point {
    margin-top: auto;
  }

  #layers .layer-stage:last-child {
    min-height: calc(var(--print-page-content-height) - 12mm);
  }

  #layers .layer-stage:last-child .layer-stage-grid {
    flex: 1 1 auto;
  }

  /* GROWTH: printable cloud via explicit absolute positioning. */
  #growth .word-field {
    position: relative;
    min-height: 144mm;
    flex: 1 1 auto;
    display: block;
    padding: 0;
    overflow: hidden;
  }

  #growth .word-field::before {
    content: none !important;
    display: none !important;
  }

  #growth .word {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
    animation: none !important;
    text-shadow: none !important;
    line-height: 1.16;
    white-space: nowrap;
    z-index: 1;
  }

  #growth .word.center {
    opacity: 0.95;
    font-size: 11.2pt;
    font-weight: 680;
    color: #1f3347;
    letter-spacing: 0.015em;
  }

  #growth .word.periphery {
    opacity: 0.66;
    font-size: 8.8pt;
    font-weight: 520;
    color: #3c5268;
    letter-spacing: 0.03em;
  }

  #growth .center-1 {
    top: 52%;
    left: 50%;
    font-size: 17.2pt;
    font-weight: 790;
    opacity: 1;
    z-index: 2;
  }

  #growth .center-2 { top: 34%; left: 35%; }
  #growth .center-3 { top: 35%; left: 66%; }
  #growth .center-4 { top: 66%; left: 32%; }
  #growth .center-5 { top: 69%; left: 69%; }
  #growth .center-6 { top: 20%; left: 52%; }
  #growth .center-7 { top: 50%; left: 21%; }
  #growth .center-8 { top: 50%; left: 79%; }
  #growth .periphery-1 { top: 12%; left: 17%; }
  #growth .periphery-2 { top: 84%; left: 22%; }
  #growth .periphery-3 { top: 13%; left: 84%; }
  #growth .periphery-4 { top: 84%; left: 81%; }

  #growth .slide-point {
    margin-top: auto;
  }

  #requirements .stage .slide-point,
  #gesture .stage .slide-point,
  #layers .layer-stage .slide-point,
  #principles .container > .slide-point,
  #object .container > .slide-point,
  #growth .container > .slide-point {
    margin-top: auto !important;
  }

  /* FINAL PAGE: centered message + reflection, white gradient tail. */
  #final-a {
    break-before: page !important;
    page-break-before: always !important;
    break-after: auto;
    page-break-after: auto;
  }

  #final-a .container {
    min-height: var(--print-page-content-height);
    display: grid !important;
    place-content: center;
    text-align: center;
  }

  #final-a .stack {
    --final-track-width: min(15ch, 100%);
    gap: 3mm;
    justify-items: center;
  }

  #final-a .final-message {
    margin: 0;
    width: var(--final-track-width);
    max-width: var(--final-track-width);
    font-size: 31pt;
    line-height: 1.08;
    text-align: center;
    white-space: nowrap;
  }

  #final-a .final-accent {
    display: block !important;
    width: var(--final-track-width);
    height: 0.45mm;
    margin: 1.8mm 0 2.2mm;
    opacity: 1;
    background: linear-gradient(90deg, transparent 0%, #cad3de 18%, #cad3de 82%, transparent 100%);
  }

  #final-a .final-accent::after {
    content: none !important;
  }

  #final-a .final-reflection {
    width: var(--final-track-width);
    height: auto;
    min-height: 16mm;
    margin: 0 auto 1.6mm;
    display: block !important;
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }

  #final-a .final-reflection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./assets/img/pad_screen_wired.png") center / contain no-repeat;
    transform: scaleY(-1);
    transform-origin: center;
    opacity: 0.26;
    pointer-events: none;
  }

  #final-a .final-reflection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.94) 28%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
  }

  #final-a .final-reflection-image {
    width: 100%;
    min-height: 16mm;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: scaleY(-1);
    transform-origin: center;
    opacity: 0.26;
    position: relative;
    z-index: 1;
  }

  #final-a .final-support {
    margin: 1.6mm 0 0;
    max-width: 58ch;
    font-size: 11.6pt;
    line-height: 1.33;
    text-align: center;
    color: #5f6f81;
  }

  #final-b {
    break-before: page !important;
    page-break-before: always !important;
    break-after: auto !important;
    page-break-after: auto !important;
    display: block !important;
    background: #fff !important;
    color: #1f2b37 !important;
  }

  #final-b .container {
    min-height: var(--print-page-content-height);
    display: grid !important;
    place-content: center;
    text-align: center;
    padding: 0;
  }

  #final-b .final-anchor {
    width: min(95mm, 100%);
    justify-items: center;
    gap: 3mm;
  }

  #final-b .final-logo {
    display: none !important;
  }

  #final-b .footnote {
    margin: 0;
    max-width: 60ch;
    text-align: center;
    color: #5f6f81;
    font-size: 11.2pt;
    line-height: 1.34;
  }
}