/* assets/css/components/entry-content.css
 * @layer components — rich content styles for Classic Editor body (.entry-content)
 * ════════════════════════════════════════════════════════════════════
 *
 * Features:
 *   1. Tables     — responsive scroll wrapper, styled like .vimta-data-table
 *   2. Pill tabs  — .ec-tabs / .ec-tab-panel authored in HTML view
 *   3. Gallery    — WordPress [gallery] shortcode → PhotoSwipe grid
 *
 * Token source: tokens.css — no hardcoded values.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     0. PROSE BASE — body copy rhythm for all .entry-content contexts
     ════════════════════════════════════════════════════════════════════ */

  .entry-content {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  /* Flow spacing — vertical rhythm between all direct children */
  .entry-content > * + * {
    margin-block-start: var(--space-m);
  }

  /* Headings */
  .entry-content h2 {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    margin-block-start: var(--space-xl);
    margin-block-end: 0;
  }

  .entry-content h3 {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
    margin-block-start: var(--space-l);
    margin-block-end: 0;
  }

  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-main);
    margin-block-start: var(--space-l);
    margin-block-end: 0;
  }

  /* Paragraphs */
  .entry-content p {
    margin: 0;
  }

  /* Lead paragraph — first <p> after heading */
  .entry-content h2 + p,
  .entry-content h3 + p {
    color: var(--text-body);
  }

  /* Lists */
  .entry-content ul,
  .entry-content ol {
    padding-inline-start: var(--space-l);
    margin: 0;
  }

  .entry-content li + li {
    margin-block-start: var(--space-2xs);
  }

  .entry-content ul li {
    list-style-type: disc;
  }

  .entry-content ol li {
    list-style-type: decimal;
  }

  /* Links */
  .entry-content a {
    color: var(--text-link);
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .entry-content a:hover {
    color: var(--text-link-hover);
  }

  /* Strong / em */
  .entry-content strong {
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .entry-content em {
    font-style: italic;
  }

  /* Blockquote */
  .entry-content blockquote {
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: var(--space-m);
    padding-block: var(--space-xs);
    margin: 0;
    font-size: var(--text-l);
    font-style: italic;
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  .entry-content blockquote cite {
    display: block;
    margin-block-start: var(--space-xs);
    font-size: var(--text-s);
    font-style: normal;
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
  }

  /* Horizontal rule */
  .entry-content hr {
    border: none;
    border-block-start: 1px solid var(--border-subtle);
    margin-block: var(--space-xl);
  }

  /* Images */
  .entry-content img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-m);
  }

  /* Figure / captions */
  .entry-content figure {
    margin: 0;
  }

  .entry-content figcaption {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
  }

  /* Code */
  .entry-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--surface-tinted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    padding-block: 0.1em;
    padding-inline: 0.35em;
  }

  .entry-content pre {
    background-color: var(--neutral-ultra-dark);
    color: var(--neutral-ultra-light);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
  }

  .entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
  }

  /* Entry thumbnail — featured image above content */
  .entry-thumbnail {
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .entry-thumbnail img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ratio-wide);
    object-fit: cover;
  }

  /* Entry footer — share row + tags, side by side */
  .entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--card-gap);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--border-subtle);
  }

  .entry-footer__share {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .entry-footer__share-label {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    white-space: nowrap;
  }

  .entry-footer__share-links {
    display: flex;
    gap: var(--space-2xs);
  }

  .entry-footer__share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-target-min);
    block-size: var(--tap-target-min);
    border-radius: var(--radius-s);
    border: 1px solid var(--border-subtle);
    color: var(--text-body);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .entry-footer__share-btn:hover {
    background-color: var(--surface-tinted);
    border-color: var(--card-accent);
    color: var(--text-accent);
  }

  .entry-footer__share-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .entry-footer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
  }


  /* ════════════════════════════════════════════════════════════════════
     1. TABLES
     Editors insert plain <table> in Classic Editor.
     JS (navigation.js IIFE 15) wraps each table in .ec-table-wrap for
     responsive horizontal scroll.
     ════════════════════════════════════════════════════════════════════ */

  .ec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-m);
    margin-block: var(--space-l);
  }

  .entry-content table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-s);
    min-inline-size: var(--modal-max-width-s); /* prevents collapse before scroll kicks in */
  }

  .entry-content thead {
    background-color: var(--surface-tinted);
    border-block-end: var(--line-medium) solid var(--primary);
  }

  .entry-content th {
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-main);
    text-align: start;
    white-space: nowrap;
  }

  .entry-content tbody tr:nth-child(odd) {
    background-color: var(--white);
  }

  .entry-content tbody tr:nth-child(even) {
    background-color: var(--surface-raised);
  }

  .entry-content tbody tr {
    border-block-end: 1px solid var(--border-subtle);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .entry-content tbody tr:last-child {
    border-block-end: none;
  }

  .entry-content tbody tr:hover {
    background-color: var(--surface-highlight);
  }

  .entry-content td {
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    color: var(--text-body);
    line-height: var(--leading-normal);
    vertical-align: middle;
  }

  .entry-content td strong {
    color: var(--text-main);
    font-weight: var(--weight-medium);
  }


  /* ════════════════════════════════════════════════════════════════════
     2. PILL TABS
     Markup pattern (authored in HTML view of Classic Editor):

     <div class="ec-tabs">
       <div class="ec-tabs__nav" role="tablist">
         <button class="ec-tabs__tab" role="tab" data-target="tab-1">Tab One</button>
         <button class="ec-tabs__tab" role="tab" data-target="tab-2">Tab Two</button>
       </div>
       <div class="ec-tab-panel" id="tab-1">...content...</div>
       <div class="ec-tab-panel" id="tab-2" hidden>...content...</div>
     </div>

     JS (IIFE 15) handles activation. CSS handles appearance.
     ════════════════════════════════════════════════════════════════════ */

  .ec-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-block: var(--space-l);
  }

  .ec-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--border-subtle);
  }

  .ec-tabs__tab {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-m);
    border-radius: var(--radius-full);
    border: 1px solid var(--primary-semi-light);
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .ec-tabs__tab:hover {
    background-color: var(--secondary);
    border-color: var(--secondary-semi-dark);
    color: var(--text-main);
  }

  .ec-tabs__tab[aria-selected="true"] {
    background-color: var(--surface-primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
  }

  .ec-tabs__tab:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-full);
  }

  .ec-tab-panel {
    display: block;
  }

  .ec-tab-panel[hidden] {
    display: none;
  }


  /* ════════════════════════════════════════════════════════════════════
     3. GALLERY
     WordPress [gallery] shortcode outputs .gallery with .gallery-item
     children. PHP filter (functions.php) adds data-lightbox to the
     wrapper and data-pswp-* to each <a>.
     ════════════════════════════════════════════════════════════════════ */

  .entry-content .gallery {
    display: grid;
    grid-template-columns: var(--auto-grid-xs);
    gap: var(--space-s);
    margin-block: var(--space-l);
  }

  .entry-content .gallery-item {
    overflow: hidden;
    border-radius: var(--radius-m);
    background-color: var(--surface-sunken);
  }

  .entry-content .gallery-item a {
    display: block;
    line-height: 0; /* collapse whitespace */
    aspect-ratio: 1;
    overflow: hidden;
  }

  .entry-content .gallery-item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-default),
                opacity  var(--duration-fast)   var(--ease-default);
  }

  .entry-content .gallery-item a:hover img {
    transform: scale(1.04);
    opacity: var(--opacity-strong);
  }

  .entry-content .gallery-item a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-m);
  }

  /* WordPress outputs .gallery-columns-N classes — override with our grid */
  .entry-content [class*="gallery-columns-"] {
    grid-template-columns: var(--auto-grid-xs);
  }

  /* Caption below each image */
  .entry-content .gallery-caption {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-tight);
  }

} /* end @layer components */