/*!
 * @file large_read_area.css
 * @brief Layout widening rules for large read area mode in Shibuya theme
 * @author STMicroelectronics
 * @copyright Copyright (c) 2026 STMicroelectronics.
 *            All rights reserved.
 *            This software is licensed under SLA0044 terms that can be found at:
 *            https://www.st.com/SLA0044
 *            or in the LICENSE.md file in the root directory of this software component.
 */

/* large_read_area layout widening rules */
.sy-page.large-read-area.sy-container { max-width: 100%; }

/* Keep sidebars fixed; expand center without pushing right sidebar off-screen.
   Left: w-72 (18rem) | Right: w-64 (16rem) | Reserve an additional gap (2rem) */
.sy-page.large-read-area .large-read-inner {
  width: calc(100vw - 36rem); /* 18 + 16 + 2 gap */
  max-width: 120rem;          /* safety cap on ultra-wide monitors */
}

/* Prevent overflow causing horizontal scroll: allow wrapping inside */
.sy-page.large-read-area .large-read-inner { overflow-wrap: anywhere; }

/* Prevent overflow-wrap: anywhere from collapsing table column widths (A9OD-601).
 * The table layout algorithm respects min-content width; resetting overflow-wrap
 * and word-break on cells lets the browser distribute column space correctly.
 * Without this, first columns in list-table directives render one char per line. */
.sy-page.large-read-area .large-read-inner table td,
.sy-page.large-read-area .large-read-inner table th {
  overflow-wrap: normal;
  word-break: normal;
}

/* Narrow screens: fall back gracefully */
@media (max-width: 1024px) { /* below large desktop */
  .sy-page.large-read-area .large-read-inner { width: 100%; max-width: none; }
}

/* Stretch article fully within inner container */
.sy-page.large-read-area article.yue { width: 100%; }

/* Print: neutralize viewport-based widths and flex distribution that push
   content beyond the printable area, producing a blank last page */
@media print {
  .sy-page.large-read-area .large-read-inner {
    width: 100% !important;
    max-width: none !important;
  }

  .sy-page.large-read-area .flex.flex-col.break-words.justify-between {
    display: block !important;
  }
}
