/* Page-specific styles for Social Portals (social.php)
   Everything else should come from magicstyle.css */

/* ===== Page shell parity ===== */
    .social-body .page-shell{ min-height:100vh; display:flex; flex-direction:column; }
    .social-body .parchment-wrapper{ position:relative; flex:1 0 auto; height:auto!important; min-height:0!important; padding-bottom:110px; }
    .social-body .parchment{ position:absolute; inset:0; height:100%; }
    .social-body .page-content.social-page{
      position:relative; z-index:1;
      display:flex; flex-direction:column; gap:1.8rem;
      padding:2.4rem 2rem 3.2rem;
    }
    @media (max-width:640px){ .social-body .page-content.social-page{ padding:2rem 1.4rem 2.6rem; } }
    .social-shell{ max-width:1120px; width:100%; margin:0 auto; }
    .social-body .scroll-cap--bottom{ position:absolute; left:50%; transform:translateX(-50%); bottom:-26px; }

    /* ===== Menu fix (one-line) ===== */
    .social-body .magic-menu{
      display:flex !important;
      justify-content:center !important;
      width:100% !important;
      max-width:none !important;
      padding:0 1rem !important;
      margin:0.4rem auto 1.4rem !important;
      overflow:visible !important;
    }
    .social-body .magic-menu > ul{
      display:inline-flex !important;
      flex-wrap:nowrap !important;
      width:auto !important;
      justify-content:center !important;
      gap:1.6rem !important;
      overflow:visible !important;
    }
    .social-body .magic-menu > ul > li{
      white-space:nowrap !important;
      flex:0 0 auto !important;
      overflow:visible !important;
    }
    @media (max-width:980px){
      .social-body .magic-menu > ul{
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:0.8rem 1.1rem !important;
      }
    }

    /* ===== Chapter heading ===== */
    .chapter-heading{ text-align:center; margin-bottom:1.4rem; }
    .chapter-label{
      font-family:'Cinzel',serif; font-size:0.85rem; letter-spacing:0.28em;
      text-transform:uppercase; color:#7b5532; margin-bottom:0.35rem;
    }
    .chapter-title{
      font-family:'Cinzel',serif; font-size:1.9rem; letter-spacing:0.16em;
      text-transform:uppercase; color:#4b2c16;
      text-shadow:0 0 6px rgba(255,248,205,0.9), 0 0 18px rgba(223,188,115,0.85);
      margin:0;
    }
    .chapter-subtitle{ margin-top:0.5rem; font-size:0.98rem; color:#5c3921; font-style:italic; }
    .chapter-divider{
      margin:1.1rem auto 1.6rem; width:60%; height:1px;
      background:linear-gradient(to right, rgba(73,47,20,0), rgba(214,171,89,0.9), rgba(73,47,20,0));
    }

    /* ===== Main parchment panel ===== */
    .social-panel{
      max-width:980px; margin:0 auto;
      background:rgba(255,252,240,0.96);
      border-radius:14px;
      border:1px solid rgba(190,150,90,0.9);
      box-shadow:0 8px 20px rgba(0,0,0,0.22), 0 0 18px rgba(223,188,115,0.45);
      padding:1.25rem 1.35rem 1.35rem;
      position:relative; overflow:hidden;
    }
    .social-panel::before{
      content:""; position:absolute; inset:0;
      background:
        radial-gradient(circle at 0% 0%, rgba(255,255,255,0.38) 0, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(255,240,210,0.30) 0, transparent 60%);
      pointer-events:none; opacity:0.9;
    }
    .social-panel-inner{ position:relative; z-index:1; font-family:'Crimson Pro',serif; color:#4b2c16; }
    .social-lead{ text-align:center; margin:0 auto 1.2rem; color:#5b3a29; font-size:1.02rem; line-height:1.7; }

    /* ===== Featured embeds grid ===== */
    .social-strip{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
      margin:1rem 0 1.2rem;
    }
    @media (max-width:980px){ .social-strip{ grid-template-columns:1fr; } }

    .embed-card{
      border-radius:14px;
      border:1px solid rgba(190,150,90,0.65);
      background:rgba(255,255,255,0.55);
      padding:12px;
      box-shadow:0 8px 16px rgba(0,0,0,0.10);
      overflow:hidden;
    }
    .embed-card h2{
      font-family:'Cinzel',serif;
      letter-spacing:0.12em;
      text-transform:uppercase;
      font-size:0.95rem;
      margin:0 0 6px;
      color:#4b2c16;
    }
    .embed-card p{ margin:0 0 10px; color:#5c3921; font-style:italic; }

    .ratio{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(190,150,90,0.55);
      background:rgba(0,0,0,0.06);
    }
    .ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

    /* ===== Link grid ===== */
    .social-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
    @media (max-width:820px){ .social-grid{ grid-template-columns:1fr; } }

    .social-item{
      border-radius:14px;
      border:1px solid rgba(190,150,90,0.65);
      background:rgba(255,255,255,0.55);
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      box-shadow:0 8px 16px rgba(0,0,0,0.10);
    }
    .social-icon{
      width:44px; height:44px; border-radius:999px;
      display:flex; align-items:center; justify-content:center;
      border:1px solid rgba(190,150,90,0.85);
      background:rgba(255,252,240,0.95);
      box-shadow:0 6px 14px rgba(0,0,0,0.10);
      flex:0 0 auto;
      font-size:1.2rem;
    }
    .social-name{
      font-family:'Cinzel',serif; letter-spacing:0.12em; text-transform:uppercase;
      font-size:0.92rem; margin:0 0 2px; color:#4b2c16;
    }
    .social-note{ margin:0 0 10px; color:#5c3921; font-style:italic; font-size:0.96rem; line-height:1.55; }

    /* Gold pill button */
    .social-btn{
      display:inline-flex; align-items:center; gap:8px;
      padding:0.6rem 1rem; border-radius:999px;
      border:1px solid rgba(233,195,120,0.95);
      background:linear-gradient(to bottom,#fbe4b3,#d8b36b);
      color:#3c2210;
      font-family:'Cinzel',serif;
      font-size:0.78rem;
      letter-spacing:0.14em;
      text-transform:uppercase;
      text-decoration:none;
      box-shadow:0 10px 20px rgba(0,0,0,0.20), 0 0 14px rgba(224,188,115,0.55);
      transition:transform 120ms ease, box-shadow 120ms ease, background 160ms ease;
      white-space:nowrap;
    }
    .social-btn:hover{
      transform:translateY(-1px);
      background:linear-gradient(to bottom,#ffeaba,#deb873);
      box-shadow:0 14px 28px rgba(0,0,0,0.28), 0 0 18px rgba(255,228,145,0.80);
    }

    .social-cta{
      margin-top:1.1rem;
      padding-top:1.1rem;
      border-top:1px solid rgba(190,150,90,0.55);
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
    }
    .social-cta p{ margin:0; color:#5c3921; font-style:italic; }