/* Tenki — Social & Feeds section
     Lives below the timeline embed on the homepage.  Self-contained
     scoped styles (prefix `tenki-social-` and `fb-`) so it can't bleed
     into other Code Blocks. */
  .tenki-social-parallax-section {
    --tenki-blue: #005A9C;
    --tenki-green: #008C45;
    --tenki-black: #1A1A1A;
    --tenki-white: #FFFFFF;
    --text-light: #555555;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    /* Tight internal padding so the section visually butts up against
       the timeline above without a chasm.  Top padding minimal (20 px)
       so the photographer's "pointing into the sky" composition lands
       right under the timeline; bottom padding slightly larger so the
       fade-out doesn't crash into whatever comes next.  External
       vertical margin is NEGATIVE on top to pull up against the
       timeline section. */
    padding: 20px 20px 40px;
    margin: -16px -50vw 0;       /* full-bleed + slight top overlap */
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    right: 50%;
    /* Isolate stacking context so the next section below can't paint
       into ours (same defensive pattern we just added to .dashboard-
       container in timeline.html). */
    isolation: isolate;
    z-index: 1;
  }

  .tenki-social-masked-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* RESTORED to center anchoring — the original composition had the
       pointing person aligned with the quote card.  My previous
       background-position: top center pushed everything up and broke
       that alignment.  Back to the symmetric crop that lets the photo
       sit visually centered behind the quote. */
    background-position: center center;
    z-index: 1;
    /* Sharp edge bleed — symmetric top + bottom fade, but NARROW (6 %)
       instead of the earlier 15 % soft fade.  The image stays crisp
       across the middle 88 % of the section; only the top + bottom
       edges feather out so the section blends into whatever's
       adjacent.  No white wash anywhere — the photo reads at full
       saturation. */
    -webkit-mask-image: linear-gradient(to bottom,
                          transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to bottom,
                          transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .tenki-social-inner-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Quote card */
  .tenki-social-quote-container {
    background-color: var(--tenki-white);
    border-radius: 16px;
    padding: 32px 40px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    border-top: 5px solid var(--tenki-blue);
  }
  .tenki-social-quote-container::before {
    content: '"';
    position: absolute;
    top: -15px; left: 40px;
    font-size: 140px;
    color: rgba(0, 90, 156, 0.04);
    font-family: Georgia, serif;
    line-height: 1;
  }
  .tenki-social-quote-text {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--tenki-black);
    font-weight: 600;
    font-style: italic;
    margin: 0 0 10px 0;
  }
  .tenki-social-quote-author {
    font-size: 1.1rem;
    color: var(--tenki-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
  }

  /* Feed columns */
  .tenki-feeds-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .tenki-feed-column-card {
    background-color: var(--tenki-white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    width: 100%;
    border-top: 6px solid var(--tenki-blue);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .tenki-feed-column-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  }
  .tenki-feed-column-card.ig-card { border-top-color: var(--tenki-green); }

  .fb-card-header-trigger {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    min-height: 48px;  /* touch target */
  }
  .fb-card-header-trigger:hover { background-color: #FAFAFA; }
  .fb-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #eef5fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .tenki-feed-column-card.ig-card .fb-icon-circle { background-color: #eefbf3; }
  .fb-header-text { flex-grow: 1; }
  .fb-header-text h3 {
    margin: 0;
    color: var(--tenki-black);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .fb-header-text p {
    margin: 2px 0 0 0;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s ease;
  }
  .tenki-feed-column-card:hover .fb-header-text p { color: var(--tenki-blue); }
  .tenki-feed-column-card.ig-card:hover .fb-header-text p { color: var(--tenki-green); }

  /* Expandable drawer */
  .fb-iframe-container-drawer {
    display: none;
    opacity: 0;
    width: 100%;
    justify-content: center;
    overflow-y: auto;
    border-top: 1px dashed #EAEAEA;
    height: 550px;
    padding: 15px 10px;
    position: relative;
    background-color: #FAFAFA;
    box-sizing: border-box;
    transition: opacity 0.35s ease;
  }
  .tenki-feed-column-card.active .fb-iframe-container-drawer {
    display: flex;
    opacity: 1;
  }
  .fb-iframe-container-drawer iframe {
    width: 340px;
    height: 500px;
    border: none;
    overflow: hidden;
    pointer-events: auto;
  }
  .fb-iframe-container-drawer .elfsight-app-a618fcce-28d6-49e5-87f9-efbfd761ba01 {
    width: 100%;
    height: auto;
  }

  /* Build chip — visible only with ?debug=1 (toggled via .show-build) */
  .tenki-social-build-chip {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 90, 156, 0.85);
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: none;
  }
  .tenki-social-parallax-section.show-build .tenki-social-build-chip { display: inline-block; }

  @media (max-width: 900px) {
    .tenki-feeds-grid-wrapper {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .tenki-social-parallax-section {
      padding: 30px 15px;
    }
    .tenki-social-quote-container {
      padding: 30px 20px;
    }
    .tenki-social-quote-text {
      font-size: 1.3rem;
    }
  }