<?php
include __DIR__ . '/config/db_new.php';

// ══════════════════════════════════════════════════════
// FETCH ALL SECTIONS
// ══════════════════════════════════════════════════════
$hero          = $pdo->query("SELECT * FROM hp_hero WHERE id=1 AND is_active=1")->fetch(PDO::FETCH_ASSOC);
$heroStats     = $pdo->query("SELECT * FROM hp_hero_stats WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$affordability = $pdo->query("SELECT * FROM hp_affordability WHERE id=1 AND is_active=1")->fetch(PDO::FETCH_ASSOC);
$galleryHeader = $pdo->query("SELECT * FROM hp_gallery_header WHERE id=1 AND is_active=1")->fetch(PDO::FETCH_ASSOC);
$tabs          = $pdo->query("SELECT * FROM hp_tabs WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);

// Gallery cards grouped by tab
$allCards = [];
if (!empty($tabs)) {
    $tabIds = array_column($tabs, 'id');
    $ph = implode(',', array_fill(0, count($tabIds), '?'));
    $cardStmt = $pdo->prepare("SELECT * FROM hp_gallery_cards WHERE tab_id IN ($ph) AND is_active=1 ORDER BY sort_order ASC");
    $cardStmt->execute($tabIds);
    foreach ($cardStmt->fetchAll(PDO::FETCH_ASSOC) as $card) {
        $allCards[$card['tab_id']][] = $card;
    }
}

// NEW SECTIONS
$journalStats   = $pdo->query("SELECT * FROM hp_journal_stats WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$scopeTags      = $pdo->query("SELECT * FROM hp_scope_tags WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$scopeHeader    = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='scope' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$submissionSteps= $pdo->query("SELECT * FROM hp_submission_steps WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$submissionHdr  = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='submission' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$boardMembers   = $pdo->query("SELECT * FROM hp_board_members WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$boardHdr       = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='board' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$indexingTags   = $pdo->query("SELECT * FROM hp_indexing_tags WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$indexingHdr    = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='indexing' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$ethicsCards    = $pdo->query("SELECT * FROM hp_ethics_cards WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$ethicsHdr      = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='ethics' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$whyCards       = $pdo->query("SELECT * FROM hp_why_cards WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$whyHdr         = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='why' LIMIT 1")->fetch(PDO::FETCH_ASSOC);
$contactCards   = $pdo->query("SELECT * FROM hp_contact_cards WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
$contactHdr     = $pdo->query("SELECT * FROM hp_section_headers WHERE section_key='contact' LIMIT 1")->fetch(PDO::FETCH_ASSOC);

function p($v): string { return htmlspecialchars($v ?? '', ENT_QUOTES, 'UTF-8'); }

$page_title       = 'communeglobal – Shaping the Future through Research Excellence';
$page_description = 'Pioneering excellence for global well-being through affordable, open-access scholarly publishing.';
$page_url         = 'https://communeglobal.com/';
include 'include/header.php';
?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
  :root {
    --navy:#0f2443; --navy-mid:#1a3a6e;
    --accent:#c8602a; --accent-light:#f0e8e0;
    --gold:#d4a853; --warm-white:#faf9f7;
    --off-white:#f4f1ec; --text:#1c1c1e;
    --text-muted:#5a6070; --border:#e2ddd6;
    --card-bg:#ffffff; --section-bg:#f8f6f2;
  }
  .page-wrap*,.page-wrap *::before,.page-wrap *::after{box-sizing:border-box;margin:0;padding:0;}
  .page-wrap{font-family:'DM Sans',sans-serif;background:var(--warm-white);color:var(--text);font-size:15px;line-height:1.65;overflow-x:hidden;}

  /* ── HERO ── */
  .hero{min-height:92vh;background:var(--navy);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;}
  .hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.45);z-index:1;}
  .hero-bg-pattern{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 80% 20%,rgba(200,96,42,.12) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(26,58,110,.4) 0%,transparent 50%);}
  .hero-grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;}
  .hero-left{display:flex;flex-direction:column;justify-content:center;padding:80px 60px 80px 80px;position:relative;z-index:2;}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(200,96,42,.15);border:1px solid rgba(200,96,42,.3);color:#e8a07a;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:28px;width:fit-content;animation:fadeUp .6s ease both;}
  .hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .hero-title{font-family:'Playfair Display',serif;font-size:clamp(38px,4.5vw,64px);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px;animation:fadeUp .7s ease .1s both;}
  .hero-title em{color:var(--gold);font-style:italic;}
  .hero-sub{font-size:16px;color:rgba(255,255,255,.65);font-weight:300;margin-bottom:44px;max-width:400px;animation:fadeUp .7s ease .2s both;}
  .hero-buttons{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .7s ease .3s both;}
  .btn-primary{background:var(--accent);color:#fff;padding:14px 28px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 4px 20px rgba(200,96,42,.35);}
  .btn-primary:hover{background:#b05222;transform:translateY(-2px);}
  .btn-outline{border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9);padding:13px 28px;border-radius:8px;font-weight:500;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;background:rgba(255,255,255,.06);}
  .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);}
  .hero-trust{margin-top:56px;display:flex;gap:20px;flex-wrap:wrap;animation:fadeUp .7s ease .4s both;}
  .trust-pill{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:8px 18px;color:rgba(255,255,255,.8);font-size:12.5px;font-weight:500;}
  .hero-right{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
  .hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:80px 60px;animation:fadeUp .8s ease .2s both;}
  .hero-stat-card{background:#132c52;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 24px;transition:all .3s;}
  .hero-stat-card:hover{background:#1a3a6b;transform:translateY(-4px);}
  .hero-stat-card:nth-child(2),.hero-stat-card:nth-child(4){transform:translateY(20px);}
  .hero-stat-number{font-family:'Playfair Display',serif;font-size:42px;font-weight:800;color:#fff;line-height:1;margin-bottom:6px;}
  .hero-stat-number sup{font-size:18px;color:var(--gold);}
  .hero-stat-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;}
  .hero-stat-desc{font-size:11.5px;color:rgba(255,255,255,.35);margin-top:4px;}

  /* ── Section helpers ── */
  .sec{padding:80px 80px;}
  .sec-alt{background:var(--section-bg);}
  .sec-dark{background:var(--navy);}
  .section-header{text-align:center;margin-bottom:52px;}
  .section-eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
  .section-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--navy);letter-spacing:-.8px;line-height:1.2;}
  .section-title em{font-style:italic;color:var(--accent);}
  .section-title-light{color:#fff;}
  .section-desc{font-size:15px;color:var(--text-muted);max-width:500px;margin:12px auto 0;}
  .section-desc-light{color:rgba(255,255,255,.6);}

  /* ── Affordability ── */
  .affordability{background:linear-gradient(135deg,#1a3a6e 0%,#0f2443 100%);padding:72px 80px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden;}
  .affordability::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(200,96,42,.15) 0%,transparent 70%);}
  .affordability-eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
  .affordability-title{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#fff;letter-spacing:-.5px;margin-bottom:10px;}
  .affordability-desc{color:rgba(255,255,255,.65);font-size:15px;max-width:480px;}
  .btn-gold{background:var(--gold);color:var(--navy);padding:14px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:all .25s;flex-shrink:0;position:relative;z-index:1;}
  .btn-gold:hover{background:#e0b860;transform:translateY(-2px);}

  /* ── Gallery/Tabs ── */
  .gallery-section{padding:100px 80px;background:var(--warm-white);}
  .tabs-bar{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:48px;}
  .tab-btn{padding:12px 24px;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;font-family:'DM Sans',sans-serif;}
  .tab-btn.active{color:var(--navy);border-bottom-color:var(--accent);}
  .tab-panel{display:none;}
  .tab-panel.active{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
  .gallery-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .3s;text-decoration:none;display:flex;flex-direction:column;}
  .gallery-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(15,36,67,.12);border-color:rgba(200,96,42,.25);}
  .gallery-card-img{height:140px;overflow:hidden;background:var(--off-white);position:relative;}
  .gallery-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(15,36,67,.5) 100%);}
  .gallery-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
  .gallery-card:hover .gallery-card-img img{transform:scale(1.07);}
  .gallery-card-body{padding:18px;flex:1;display:flex;flex-direction:column;}
  .gallery-card-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:7px;line-height:1.3;}
  .gallery-card-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;flex:1;}
  .gallery-card-arrow{margin-top:14px;font-size:12px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:5px;}

  /* ── JOURNAL STATS ── */
  .jstats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
  .jstat-item{background:var(--card-bg);padding:36px 28px;text-align:center;}
  .jstat-number{font-family:'Playfair Display',serif;font-size:44px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-2px;}
  .jstat-label{font-size:13px;color:var(--text-muted);margin-top:8px;font-weight:500;}

  /* ── SCOPE TAGS ── */
  .tags-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .scope-tag{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:10px 18px;font-size:13.5px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .2s;text-decoration:none;}
  .scope-tag:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

  /* ── SUBMISSION STEPS ── */
  .steps-row{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;}
  .steps-row::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:0;}
  .step-item{text-align:center;position:relative;z-index:1;padding:0 8px;}
  .step-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#eff6ff);border:2px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--navy-mid);margin:0 auto 16px;position:relative;z-index:2;}
  .step-title{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:8px;}
  .step-desc{font-size:12px;color:var(--text-muted);line-height:1.5;}

  /* ── EDITORIAL BOARD ── */
  .board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .board-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:20px 20px;display:flex;align-items:center;gap:16px;transition:all .25s;}
  .board-card:hover{border-color:rgba(200,96,42,.3);box-shadow:0 8px 24px rgba(15,36,67,.08);transform:translateY(-2px);}
  .board-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;font-family:'Playfair Display',serif;}
  .board-name{font-size:14px;font-weight:700;color:var(--navy);}
  .board-role{font-size:12px;color:var(--text-muted);margin-top:3px;}

  /* ── INDEXING TAGS ── */
  .index-tags-wrap{display:flex;flex-wrap:wrap;gap:10px;}
  .index-tag{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:10px 20px;font-size:13.5px;font-weight:500;color:var(--text);transition:all .2s;}
  .index-tag:hover{border-color:var(--navy);color:var(--navy);background:var(--off-white);}

  /* ── ETHICS CARDS ── */
  .ethics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .ethics-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:28px 24px;transition:all .25s;}
  .ethics-card:hover{border-color:rgba(200,96,42,.25);box-shadow:0 8px 28px rgba(15,36,67,.08);transform:translateY(-3px);}
  .ethics-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:10px;}
  .ethics-desc{font-size:13px;color:var(--text-muted);line-height:1.6;}

  /* ── WHY PUBLISH ── */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .why-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px 28px;transition:all .25s;}
  .why-card:hover{background:rgba(255,255,255,.1);border-color:rgba(212,168,83,.3);}
  .why-title{font-size:18px;font-weight:700;color:var(--gold);margin-bottom:12px;font-family:'Playfair Display',serif;}
  .why-desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.65;}

  /* ── CONTACT CARDS ── */
  .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .contact-card{background:#132c52;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:32px 28px;transition:all .25s;}
  .contact-card:hover{background:#1a3a6b;transform:translateY(-4px);}
  .contact-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:12px;font-family:'Playfair Display',serif;}
  .contact-desc{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:20px;}
  .contact-link{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:13px;font-weight:600;text-decoration:none;transition:gap .2s;}
  .contact-link:hover{gap:10px;}

  /* ── Info section ── */
  .info-section{background:var(--navy);padding:72px 80px;}
  .info-inner{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start;}
  .info-label{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff;}
  .info-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px;}
  .info-link{color:rgba(255,255,255,.65);text-decoration:none;font-size:13.5px;font-weight:500;padding:8px 0;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.07);transition:color .2s;}
  .info-link::before{content:'→';font-size:12px;opacity:.5;transition:all .2s;}
  .info-link:hover{color:var(--gold);}
  .info-link:hover::before{opacity:1;transform:translateX(3px);}

  /* ── Animations ── */
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
  .reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.25,.8,.25,1);}
  .reveal.visible{opacity:1;transform:translateY(0);}

  /* ══════════════════════════════════════════════════
     RESPONSIVE — Tablet (≤1100px)
  ══════════════════════════════════════════════════ */
  @media(max-width:1100px){
    /* Hero */
    .hero{grid-template-columns:1fr;min-height:auto;}
    .hero-right{display:none;}
    .hero-left{padding:60px 40px;}

    /* Sections */
    .sec,.gallery-section,.info-section{padding:56px 32px;}
    .affordability{padding:56px 32px;flex-direction:column;align-items:flex-start;gap:28px;}
    .affordability-title{font-size:28px;}

    /* Grids */
    .tab-panel.active{grid-template-columns:repeat(3,1fr);}
    .jstats-grid{grid-template-columns:repeat(2,1fr);}
    .ethics-grid{grid-template-columns:repeat(2,1fr);}
    .steps-row{grid-template-columns:repeat(3,1fr);gap:32px;}.steps-row::before{display:none;}
    .board-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:repeat(2,1fr);}

    /* Info section */
    .info-inner{grid-template-columns:1fr;gap:24px;}
    .info-links-grid{grid-template-columns:repeat(2,1fr);}
  }

  /* ══════════════════════════════════════════════════
     RESPONSIVE — Mobile large (≤768px)
  ══════════════════════════════════════════════════ */
  @media(max-width:768px){
    /* Hero */
    .hero-left{padding:48px 20px 56px;}
    .hero-title{font-size:clamp(30px,8vw,44px);letter-spacing:-1px;}
    .hero-sub{font-size:14px;margin-bottom:32px;}
    .hero-buttons{flex-direction:column;gap:12px;}
    .btn-primary,.btn-outline{width:100%;justify-content:center;padding:14px 20px;}
    .hero-trust{margin-top:36px;gap:10px;}
    .trust-pill{font-size:11.5px;padding:7px 14px;}
    .hero-badge{font-size:10.5px;padding:5px 12px;}

    /* Sections */
    .sec,.gallery-section,.info-section{padding:48px 20px;}
    .affordability{padding:44px 20px;}
    .affordability-title{font-size:24px;}
    .affordability-desc{font-size:14px;}
    .btn-gold{width:100%;text-align:center;justify-content:center;display:flex;}

    /* Section header */
    .section-header{margin-bottom:36px;}
    .section-title{font-size:clamp(22px,6vw,32px);}

    /* Tabs */
    .tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;flex-wrap:nowrap;scrollbar-width:none;}
    .tabs-bar::-webkit-scrollbar{display:none;}
    .tab-btn{white-space:nowrap;padding:10px 18px;font-size:13px;}
    .tab-panel.active{grid-template-columns:repeat(2,1fr);gap:14px;}

    /* Journal stats */
    .jstats-grid{grid-template-columns:repeat(2,1fr);}
    .jstat-item{padding:24px 16px;}
    .jstat-number{font-size:34px;}

    /* Steps */
    .steps-row{grid-template-columns:repeat(2,1fr);gap:28px;}
    .step-num{width:48px;height:48px;font-size:16px;}

    /* Board */
    .board-grid{grid-template-columns:1fr;}

    /* Ethics */
    .ethics-grid{grid-template-columns:1fr 1fr;gap:12px;}
    .ethics-card{padding:20px 16px;}

    /* Why */
    .why-grid{grid-template-columns:1fr;}
    .why-card{padding:24px 20px;}

    /* Contact */
    .contact-grid{grid-template-columns:1fr;}
    .contact-card{padding:24px 20px;}

    /* Info */
    .info-section{padding:44px 20px;}
    .info-inner{gap:20px;}
    .info-links-grid{grid-template-columns:1fr 1fr;gap:4px 16px;}
    .info-link{font-size:12.5px;}
  }

  /* ══════════════════════════════════════════════════
     RESPONSIVE — Mobile small (≤480px)
  ══════════════════════════════════════════════════ */
  @media(max-width:480px){
    /* Hero */
    .hero-left{padding:40px 16px 48px;}
    .hero-title{font-size:clamp(26px,9vw,38px);}
    .hero-trust{flex-direction:column;gap:8px;}

    /* Sections */
    .sec,.gallery-section,.info-section{padding:40px 16px;}
    .affordability{padding:36px 16px;}

    /* Gallery */
    .tab-panel.active{grid-template-columns:1fr;}
    .tabs-bar{gap:0;}
    .tab-btn{padding:10px 14px;font-size:12.5px;}

    /* Journal stats */
    .jstats-grid{grid-template-columns:1fr 1fr;}
    .jstat-number{font-size:30px;letter-spacing:-1px;}
    .jstat-label{font-size:12px;}

    /* Steps */
    .steps-row{grid-template-columns:1fr;gap:24px;}

    /* Ethics */
    .ethics-grid{grid-template-columns:1fr;}

    /* Board */
    .board-card{padding:16px;}
    .board-avatar{width:42px;height:42px;font-size:13px;}

    /* Info */
    .info-links-grid{grid-template-columns:1fr;}
    .info-label{font-size:17px;}

    /* Why */
    .why-title{font-size:16px;}

    /* Contact */
    .contact-title{font-size:16px;}
  }

  /* ══════════════════════════════════════════════════
     RESPONSIVE — Mobile XS (≤360px)
  ══════════════════════════════════════════════════ */
  @media(max-width:360px){
    .hero-left{padding:36px 14px 44px;}
    .sec,.gallery-section,.info-section,.affordability{padding:32px 14px;}
    .hero-title{font-size:clamp(24px,10vw,34px);}
    .btn-primary,.btn-outline,.btn-gold{font-size:13px;padding:13px 16px;}
    .jstats-grid{grid-template-columns:1fr;}
  }
</style>
<!-- ══ NEWSLETTER POPUP ══ -->
<style>
.nl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.nl-overlay.open{display:flex;}
.nl-modal{background:#fff;border-radius:20px;padding:48px 44px;max-width:480px;width:calc(100% - 32px);position:relative;z-index:9999;box-shadow:0 32px 80px rgba(15,36,67,.25);animation:nlPop .35s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes nlPop{from{opacity:0;transform:scale(.88) translateY(20px);}to{opacity:1;transform:none;}}
.nl-close{position:absolute;top:16px;right:16px;background:var(--off-white,#f4f1ec);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;color:#555;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.nl-close:hover{background:#e2ddd6;}
.nl-icon{width:56px;height:56px;background:linear-gradient(135deg,#fff3ed,#ffe8d6);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.nl-title{font-family:'Playfair Display',serif;font-size:26px;font-weight:800;color:#0f2443;line-height:1.2;margin-bottom:8px;}
.nl-sub{font-size:14px;color:#5a6070;margin-bottom:28px;line-height:1.6;}
.nl-input-row{display:flex;gap:10px;}
.nl-input{flex:1;border:1.5px solid #e2ddd6;border-radius:10px;padding:13px 16px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border .2s;color:#1c1c1e;}
.nl-input:focus{border-color:#c8602a;}
.nl-submit{background:#c8602a;color:#fff;border:none;border-radius:10px;padding:13px 22px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s;font-family:'DM Sans',sans-serif;}
.nl-submit:hover{background:#b05222;}
.nl-submit:disabled{opacity:.6;cursor:not-allowed;}
.nl-msg{margin-top:12px;font-size:13px;border-radius:8px;padding:10px 14px;display:none;}
.nl-msg.success{background:#ecfdf5;color:#065f46;display:block;}
.nl-msg.error{background:#fff1f2;color:#9f1239;display:block;}
.nl-note{font-size:11.5px;color:#94a3b8;margin-top:14px;text-align:center;}
@media(max-width:480px){.nl-modal{padding:32px 20px;}.nl-input-row{flex-direction:column;}.nl-submit{width:100%;}}
</style>

<div class="nl-overlay" id="nlOverlay" onclick="if(event.target===this)closeNL()">
  <div class="nl-modal" role="dialog" aria-modal="true" aria-labelledby="nlTitle">
    <button class="nl-close" onclick="closeNL()" aria-label="Close">×</button>
    <div class="nl-icon">
      <svg width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="#c8602a" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
      </svg>
    </div>
    <div class="nl-title" id="nlTitle">Stay Ahead in Research</div>
    <p class="nl-sub">Get tailored research, journal updates, and call-for-papers delivered straight to your inbox. No spam, unsubscribe anytime.</p>
    <div class="nl-input-row">
      <input type="email" class="nl-input" id="nlEmail" placeholder="your@email.com" autocomplete="email">
      <button class="nl-submit" id="nlBtn" onclick="submitNewsletter()">Subscribe</button>
    </div>
    <div class="nl-msg" id="nlMsg"></div>
    <p class="nl-note">🔒 We respect your privacy. Zero spam, ever.</p>
  </div>
</div>

<script>
function openNL(){ document.getElementById('nlOverlay').classList.add('open'); document.getElementById('nlEmail').focus(); }
function closeNL(){ document.getElementById('nlOverlay').classList.remove('open'); }
document.addEventListener('keydown', e => { if(e.key==='Escape') closeNL(); });

function submitNewsletter(){
  const email = document.getElementById('nlEmail').value.trim();
  const btn   = document.getElementById('nlBtn');
  const msg   = document.getElementById('nlMsg');
  msg.className = 'nl-msg'; msg.textContent = '';
  if(!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
    msg.className = 'nl-msg error'; msg.textContent = 'Please enter a valid email address.'; return;
  }
  btn.disabled = true; btn.textContent = 'Subscribing…';
  const fd = new FormData(); fd.append('email', email);
  fetch('subscribe-newsletter.php', { method:'POST', body:fd })
    .then(r => r.json())
    .then(data => {
      msg.className = 'nl-msg ' + (data.success ? 'success' : 'error');
      msg.textContent = data.message;
      if(data.success){ document.getElementById('nlEmail').value=''; btn.textContent='Subscribed ✓'; }
      else { btn.disabled=false; btn.textContent='Subscribe'; }
    })
    .catch(() => {
      msg.className='nl-msg error'; msg.textContent='Network error. Please try again.';
      btn.disabled=false; btn.textContent='Subscribe';
    });
}
</script>
<script>
// Intercept Free Newsletter card clicks
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.gallery-card').forEach(card => {
    const title = card.querySelector('.gallery-card-title');
    if(title && title.textContent.trim() === 'Free Newsletter'){
      card.addEventListener('click', e => { e.preventDefault(); openNL(); });
    }
  });
});
</script>
<div class="page-wrap">

<!-- ══ HERO ══ -->
<?php if ($hero): ?>
<section class="hero" <?= !empty($hero['bg_image_url']) ? 'style="background-image:url(/'.p(ltrim($hero['bg_image_url'],'/')).');"' : '' ?>>
  <div class="hero-bg-pattern"></div>
  <div class="hero-grid-lines"></div>
  <div class="hero-left">
    <?php if (!empty($hero['badge_text'])): ?>
    <div class="hero-badge"><svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><?= p($hero['badge_text']) ?></div>
    <?php endif; ?>
    <h1 class="hero-title">
      <?php if (!empty($hero['title_line1'])): ?><?= p($hero['title_line1']) ?><br><?php endif; ?>
      <?php if (!empty($hero['title_em1']) || !empty($hero['title_em2'])): ?><em><?= p($hero['title_em1'] ?? '') ?><?= (!empty($hero['title_em1']) && !empty($hero['title_em2'])) ? '<br>' : '' ?><?= p($hero['title_em2'] ?? '') ?></em><?php endif; ?>
    </h1>
    <?php if (!empty($hero['subtitle'])): ?><p class="hero-sub"><?= p($hero['subtitle']) ?></p><?php endif; ?>
    <div class="hero-buttons">
      <?php if (!empty($hero['btn1_text'])): ?><a href="<?= p($hero['btn1_url'] ?? '#') ?>" class="btn-primary"><svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><?= p($hero['btn1_text']) ?></a><?php endif; ?>
      <?php if (!empty($hero['btn2_text'])): ?><a href="<?= p($hero['btn2_url'] ?? '#') ?>" class="btn-outline"><svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9"/></svg><?= p($hero['btn2_text']) ?></a><?php endif; ?>
    </div>
    <div class="hero-trust">
      <?php if (!empty($hero['trust_pill1'])): ?><div class="trust-pill"><svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><?= p($hero['trust_pill1']) ?></div><?php endif; ?>
      <?php if (!empty($hero['trust_pill2'])): ?><div class="trust-pill"><svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/></svg><?= p($hero['trust_pill2']) ?></div><?php endif; ?>
    </div>
  </div>
  <?php if (!empty($heroStats)): ?>
  <div class="hero-right">
    <div class="hero-visual">
      <?php foreach ($heroStats as $stat): ?>
      <div class="hero-stat-card">
        <div class="hero-stat-number"><?= p($stat['number']) ?><?php if (!empty($stat['superscript'])): ?><sup><?= p($stat['superscript']) ?></sup><?php endif; ?></div>
        <div class="hero-stat-label"><?= p($stat['label']) ?></div>
        <?php if (!empty($stat['description'])): ?><div class="hero-stat-desc"><?= p($stat['description']) ?></div><?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endif; ?>
</section>
<?php endif; ?>

<!-- ══ AFFORDABILITY ══ -->
<?php if ($affordability): ?>
<div class="affordability">
  <div style="position:relative;z-index:1;">
    <?php if (!empty($affordability['eyebrow'])): ?><div class="affordability-eyebrow"><?= p($affordability['eyebrow']) ?></div><?php endif; ?>
    <?php if (!empty($affordability['title'])): ?><h2 class="affordability-title"><?= p($affordability['title']) ?></h2><?php endif; ?>
    <?php if (!empty($affordability['description'])): ?><p class="affordability-desc"><?= p($affordability['description']) ?></p><?php endif; ?>
  </div>
  <?php if (!empty($affordability['btn_text'])): ?><a href="<?= p($affordability['btn_url'] ?? '#') ?>" class="btn-gold"><?= p($affordability['btn_text']) ?></a><?php endif; ?>
</div>
<?php endif; ?>

<!-- ══ GALLERY / TABS ══ -->
<?php if (!empty($tabs)): ?>
<section class="gallery-section reveal">
  <?php if ($galleryHeader): ?>
  <div class="section-header">
    <?php if (!empty($galleryHeader['eyebrow'])): ?><div class="section-eyebrow"><?= p($galleryHeader['eyebrow']) ?></div><?php endif; ?>
    <?php if (!empty($galleryHeader['title'])): ?><h2 class="section-title"><?php $t=htmlspecialchars($galleryHeader['title'],ENT_QUOTES,'UTF-8');echo preg_replace('/\*(.*?)\*/','<em>$1</em>',$t); ?></h2><?php endif; ?>
    <?php if (!empty($galleryHeader['description'])): ?><p class="section-desc"><?= p($galleryHeader['description']) ?></p><?php endif; ?>
  </div>
  <?php endif; ?>
  <?php if (count($tabs) > 1): ?>
  <div class="tabs-bar">
    <?php foreach ($tabs as $i => $tab): ?><button class="tab-btn <?= $i===0?'active':'' ?>" onclick="switchTab(this,'<?= p($tab['tab_key']) ?>')"><?= p($tab['tab_label']) ?></button><?php endforeach; ?>
  </div>
  <?php endif; ?>
  <?php foreach ($tabs as $i => $tab): ?>
  <div id="tab-<?= p($tab['tab_key']) ?>" class="tab-panel <?= $i===0?'active':'' ?>">
    <?php $tabCards = $allCards[$tab['id']] ?? []; ?>
    <?php if (empty($tabCards)): ?><div style="text-align:center;padding:40px;color:#94a3b8;grid-column:1/-1;"><p>No cards in this tab yet.</p></div>
    <?php else: foreach ($tabCards as $card): ?>
    <a href="<?= p($card['link_url'] ?? '#') ?>" class="gallery-card">
      <div class="gallery-card-img"><?php if (!empty($card['image_url'])): ?><img src="<?= p($card['image_url']) ?>" alt="<?= p($card['title']) ?>" loading="lazy"><?php else: ?><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#cbd5e1;"><svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div><?php endif; ?></div>
      <div class="gallery-card-body"><div class="gallery-card-title"><?= p($card['title']) ?></div><?php if (!empty($card['description'])): ?><div class="gallery-card-desc"><?= p($card['description']) ?></div><?php endif; ?><?php if (!empty($card['link_text'])): ?><div class="gallery-card-arrow"><?= p($card['link_text']) ?></div><?php endif; ?></div>
    </a>
    <?php endforeach; endif; ?>
  </div>
  <?php endforeach; ?>
</section>
<?php endif; ?>

<!-- ══ JOURNAL STATS ══ -->
<?php if (!empty($journalStats)): ?>
<section class="sec sec-alt reveal">
  <div class="section-header">
    <div class="section-eyebrow">By The Numbers</div>
    <h2 class="section-title">Journal <em>Stats</em></h2>
  </div>
  <div class="jstats-grid">
    <?php foreach ($journalStats as $js): ?>
    <div class="jstat-item">
      <div class="jstat-number"><?= p($js['number']) ?></div>
      <div class="jstat-label"><?= p($js['label']) ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ AIMS & SCOPE ══ -->
<?php if (!empty($scopeTags)): ?>
<section class="sec reveal" style="display:none;">
  <div class="section-header">
    <?php if (!empty($scopeHeader['eyebrow'])): ?><div class="section-eyebrow"><?= p($scopeHeader['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Browse by Discipline</div><?php endif; ?>
    <h2 class="section-title"><?php if (!empty($scopeHeader['title'])): ?><?= p($scopeHeader['title']) ?><?php else: ?>Aims &amp; <em>Scope</em><?php endif; ?></h2>
    <?php if (!empty($scopeHeader['description'])): ?><p class="section-desc"><?= p($scopeHeader['description']) ?></p><?php endif; ?>
  </div>
  <div class="tags-wrap">
    <?php foreach ($scopeTags as $tag): ?>
    <a href="<?= p($tag['link_url'] ?? '#') ?>" class="scope-tag"><?= p($tag['label']) ?></a>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ SUBMISSION PROCESS ══ -->
<?php if (!empty($submissionSteps)): ?>
<section class="sec sec-alt reveal">
  <div class="section-header">
    <?php if (!empty($submissionHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($submissionHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">How It Works</div><?php endif; ?>
    <h2 class="section-title"><?php if (!empty($submissionHdr['title'])): ?><?= p($submissionHdr['title']) ?><?php else: ?>Submission <em>Process</em><?php endif; ?></h2>
    <?php if (!empty($submissionHdr['description'])): ?><p class="section-desc"><?= p($submissionHdr['description']) ?></p><?php endif; ?>
  </div>
  <div class="steps-row">
    <?php foreach ($submissionSteps as $step): ?>
    <div class="step-item">
      <div class="step-num"><?= p($step['step_number']) ?></div>
      <div class="step-title"><?= p($step['title']) ?></div>
      <div class="step-desc"><?= p($step['description'] ?? '') ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ EDITORIAL BOARD ══ -->
<?php if (!empty($boardMembers)): ?>
<section class="sec reveal">
  <div class="section-header">
    <?php if (!empty($boardHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($boardHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Our Experts</div><?php endif; ?>
    <h2 class="section-title"><?php if (!empty($boardHdr['title'])): ?><?= p($boardHdr['title']) ?><?php else: ?>Editorial <em>Board</em><?php endif; ?></h2>
    <?php if (!empty($boardHdr['description'])): ?><p class="section-desc"><?= p($boardHdr['description']) ?></p><?php endif; ?>
  </div>
  <div class="board-grid">
    <?php foreach ($boardMembers as $m): ?>
    <div class="board-card">
      <div class="board-avatar"><?= p($m['initials'] ?? strtoupper(substr($m['name'],0,2))) ?></div>
      <div>
        <div class="board-name"><?= p($m['name']) ?></div>
        <div class="board-role"><?= p($m['role']) ?><?php if (!empty($m['institution'])): ?> · <?= p($m['institution']) ?><?php endif; ?></div>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ INDEXING ══ -->
<?php if (!empty($indexingTags)): ?>
<section class="sec sec-alt reveal">
  <div class="section-header">
    <?php if (!empty($indexingHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($indexingHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Visibility</div><?php endif; ?>
    <h2 class="section-title"><?php if (!empty($indexingHdr['title'])): ?><?= p($indexingHdr['title']) ?><?php else: ?><em>Indexing</em> &amp; Databases<?php endif; ?></h2>
    <?php if (!empty($indexingHdr['description'])): ?><p class="section-desc"><?= p($indexingHdr['description']) ?></p><?php endif; ?>
  </div>
  <div class="index-tags-wrap">
    <?php foreach ($indexingTags as $tag): ?>
    <span class="index-tag"><?= p($tag['label']) ?><?php if (!empty($tag['badge'])): ?> <small style="color:var(--accent);font-size:11px;font-weight:700;">— <?= p($tag['badge']) ?></small><?php endif; ?></span>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ PUBLICATION ETHICS ══ -->
<?php if (!empty($ethicsCards)): ?>
<section class="sec reveal">
  <div class="section-header">
    <?php if (!empty($ethicsHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($ethicsHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Our Standards</div><?php endif; ?>
    <h2 class="section-title"><?php if (!empty($ethicsHdr['title'])): ?><?= p($ethicsHdr['title']) ?><?php else: ?>Publication <em>Ethics</em><?php endif; ?></h2>
    <?php if (!empty($ethicsHdr['description'])): ?><p class="section-desc"><?= p($ethicsHdr['description']) ?></p><?php endif; ?>
  </div>
  <div class="ethics-grid">
    <?php foreach ($ethicsCards as $ec): ?>
    <div class="ethics-card">
      <div class="ethics-title"><?= p($ec['title']) ?></div>
      <div class="ethics-desc"><?= p($ec['description'] ?? '') ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ WHY PUBLISH ══ -->
<?php if (!empty($whyCards)): ?>
<section class="sec sec-dark reveal">
  <div class="section-header">
    <?php if (!empty($whyHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($whyHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Benefits</div><?php endif; ?>
    <h2 class="section-title section-title-light"><?php if (!empty($whyHdr['title'])): ?><?= p($whyHdr['title']) ?><?php else: ?>Why <em>Publish With Us</em><?php endif; ?></h2>
    <?php if (!empty($whyHdr['description'])): ?><p class="section-desc section-desc-light"><?= p($whyHdr['description']) ?></p><?php endif; ?>
  </div>
  <div class="why-grid">
    <?php foreach ($whyCards as $wc): ?>
    <div class="why-card">
      <div class="why-title"><?= p($wc['title']) ?></div>
      <div class="why-desc"><?= p($wc['description'] ?? '') ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ CONTACT & QUICK LINKS ══ -->
<?php if (!empty($contactCards)): ?>
<section class="sec sec-dark reveal" style="padding-top:0;">
  <div class="section-header">
    <?php if (!empty($contactHdr['eyebrow'])): ?><div class="section-eyebrow"><?= p($contactHdr['eyebrow']) ?></div><?php else: ?><div class="section-eyebrow">Get Started</div><?php endif; ?>
    <h2 class="section-title section-title-light"><?php if (!empty($contactHdr['title'])): ?><?= p($contactHdr['title']) ?><?php else: ?>Contact &amp; <em>Quick Links</em><?php endif; ?></h2>
  </div>
  <div class="contact-grid">
    <?php foreach ($contactCards as $cc): ?>
    <div class="contact-card">
      <div class="contact-title"><?= p($cc['title']) ?></div>
      <div class="contact-desc"><?= p($cc['description'] ?? '') ?></div>
      <?php if (!empty($cc['link_text']) && !empty($cc['link_url'])): ?>
      <a href="<?= p($cc['link_url']) ?>" class="contact-link"><?= p($cc['link_text']) ?> →</a>
      <?php endif; ?>
    </div>
    <?php endforeach; ?>
  </div>
</section>
<?php endif; ?>

<!-- ══ INFO LINKS ══ -->
<section class="info-section">
  <div class="info-inner">
    <div class="info-label"><svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01"/></svg>Information</div>
    <div class="info-links-grid">
      <a href="https://communeglobal.com/journals/social-science/open-access-policy" class="info-link">Open Access Policy</a>
      <a href="https://communeglobal.com/journals/social-science/editorial-process" class="info-link">Editorial Process</a>
      <a href="https://communeglobal.com/journals/social-science/editorial-policies" class="info-link">Editorial Policies</a>
      <a href="https://communeglobal.com/journals/social-science/author-style-guidelines" class="info-link">Author &amp; Style Guidelines</a>
      <a href="https://communeglobal.com/journals/social-science/reviewer-guidelines" class="info-link">Reviewer Guidelines</a>
      <a href="https://communeglobal.com/journals/social-science/copyright-statement" class="info-link">Copyright Statement</a>
      <a href="https://communeglobal.com/journals/social-science/board-members" class="info-link">Our Expert Reviewers</a>
      <a href="https://communeglobal.com/conference-proceedings.php" class="info-link">Conference Proceedings</a>
      <a href="https://communeglobal.com/journals/social-science/call-for-papers" class="info-link">Call for Paper</a>
      <a href="https://communeglobal.com/journals/social-science/" class="info-link">Find a Journal</a>
      <a href="https://communeglobal.com/journals/social-science/board-members" class="info-link">Contact Editorial Office</a>
    </div>
  </div>
</section>

</div><!-- /page-wrap -->

<script>
function switchTab(btn,key){
  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
  btn.classList.add('active');
  const panel=document.getElementById('tab-'+key);
  if(panel) panel.classList.add('active');
}
const observer=new IntersectionObserver(entries=>{
  entries.forEach(e=>{if(e.isIntersecting) e.target.classList.add('visible');});
},{threshold:.08});
document.querySelectorAll('.reveal').forEach(r=>observer.observe(r));
</script>

<?php include 'include/footer.php'; ?>