/* ============================================================
   Bhai Sahib Singh — Social links page
   social-v2/style.css
   Palette read from site styles.css. Self-contained, no framework.
   ============================================================ */

:root{
  --blue:#0A2A5E;      /* Nishan blue   */
  --saffron:#FF8000;   /* Saffron       */
  --gold:#B8862C;      /* Gold          */
  --ivory:#FAF6EC;     /* Warm ivory    */
  --paper:#F2EBD9;     /* Paper         */
  --ink:#2C2418;       /* Body text     */
  --muted:#6B5E47;     /* Secondary     */
  --white:#ffffff;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(10,42,94,.06), 0 2px 8px rgba(10,42,94,.05);
  --maxw:980px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* Gurmukhi gets the Noto face wherever it appears */
.pa,.gur{font-family:"Noto Sans Gurmukhi","DM Sans",sans-serif;}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px 40px;
}

/* ---------- Top bar ---------- */
.topbar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar .brand{
  display:flex;align-items:center;gap:8px;
  font-weight:700;color:var(--blue);font-size:15px;
}
.topbar .brand img{width:22px;height:22px;}
.topbar .tagline{
  font-family:"Noto Sans Gurmukhi",sans-serif;
  color:var(--muted);font-size:13px;white-space:nowrap;
}
.rule{height:1px;background:rgba(184,134,44,.28);max-width:var(--maxw);margin:0 auto;}

/* ---------- Identity header (compact, horizontal) ---------- */
.identity{
  display:flex;align-items:center;gap:16px;
  padding:22px 0 6px;
}
.identity .photo{
  width:72px;height:72px;border-radius:50%;
  object-fit:cover;flex:0 0 auto;
  border:2px solid var(--gold);
  background:var(--paper);
}
.identity h1{
  margin:0;font-size:26px;line-height:1.15;color:var(--blue);
  font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;
}
.identity .sub-pa{
  font-family:"Noto Sans Gurmukhi",sans-serif;
  color:var(--ink);font-size:15px;margin-top:2px;
}
.identity .sub-en{color:var(--muted);font-size:13px;margin-top:1px;}

/* ---------- Section headers ---------- */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:26px 0 12px;gap:10px;
}
.sec-head h2{
  margin:0;font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;
  font-size:20px;color:var(--blue);
}
.sec-head .s-eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.sec-head .more{
  font-size:13px;color:var(--blue);font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.sec-head .more svg{width:13px;height:13px;}

/* ---------- YouTube panel ---------- */
.yt{
  display:block;
  background:var(--blue);color:var(--white);
  border-radius:var(--radius);padding:18px 18px 20px;
  position:relative;box-shadow:var(--shadow);
}
.yt .yt-top{display:flex;align-items:center;gap:10px;padding-right:28px;}
.yt .yt-badge{
  background:#fff;border-radius:6px;padding:4px 6px;display:inline-flex;flex:0 0 auto;
}
.yt .yt-badge svg{width:26px;height:18px;display:block;}
.yt .yt-label{font-weight:700;letter-spacing:.06em;font-size:14px;color:#fff;}
.yt .yt-handle{color:#cdd8ee;font-size:13px;}
.yt .corner{position:absolute;top:16px;right:16px;opacity:.9;color:#fff;}
.yt .corner svg{width:18px;height:18px;}
.yt .yt-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:14px;flex-wrap:wrap;
}
.yt .yt-cta-text{
  font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;
  font-size:28px;line-height:1.15;color:#fff;flex:1 1 auto;min-width:0;
}
.yt .subscribe{
  background:var(--saffron);color:var(--blue);
  border-radius:10px;padding:12px 18px;text-align:center;
  font-weight:700;min-height:44px;display:flex;flex-direction:column;
  justify-content:center;flex:0 0 auto;
}
.yt .subscribe .pa{font-family:"Noto Sans Gurmukhi",sans-serif;font-size:17px;}
.yt .subscribe .en{font-size:12px;font-weight:600;margin-top:1px;}

/* ---------- Quick links grid ---------- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{
  border-radius:var(--radius);padding:16px;min-height:88px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
  box-shadow:var(--shadow);border:1px solid transparent;
}
.tile .ico{width:26px;height:26px;}
.tile .txt{display:flex;flex-direction:column;}
.tile .t-pa{font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;font-size:17px;color:var(--blue);line-height:1.2;}
.tile .t-en{color:var(--muted);font-size:13px;margin-top:2px;}
.tile.row{flex-direction:row;align-items:center;gap:12px;}
.tile.row .t-pa{font-size:16px;}
.tile .t-brand{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;}

.tile.sehaj{background:#E8EEF8;border-color:#D4E0F2;}   /* soft blue  */
.tile.nitnem{background:var(--paper);border-color:#E6DCC2;} /* soft gold  */
.tile.audio{background:var(--white);border:1px solid #ECE4D2;}

.tile .ico.spotify{color:#1DB954;}
.tile .ico.apple{color:#FA243C;}

/* ---------- Books ---------- */
.books{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.book{
  background:var(--paper);border:1px solid #E6DCC2;border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.book .cover{
  height:200px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.book .cover img{max-height:200px;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(10,42,94,.18));}
.book .b-pa{font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;font-size:22px;color:var(--blue);}
.book .b-en{color:var(--muted);font-size:13px;margin-top:2px;}
.book .b-desc{font-family:"Noto Sans Gurmukhi",sans-serif;font-size:14px;color:var(--ink);margin-top:8px;flex:1 1 auto;}
.book .b-cta{
  margin-top:14px;background:var(--blue);color:var(--white);
  border-radius:10px;padding:12px 14px;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:700;font-size:15px;
}
.book .b-cta svg{width:15px;height:15px;opacity:.9;}

/* ---------- Wide bars (WhatsApp / Support) ---------- */
.bar{
  display:flex;align-items:center;gap:14px;
  border-radius:var(--radius);padding:16px;margin-top:12px;
  box-shadow:var(--shadow);
}
.bar .ico{width:26px;height:26px;flex:0 0 auto;}
.bar .txt{flex:1 1 auto;display:flex;flex-direction:column;}
.bar .b-pa{font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:800;font-size:17px;color:var(--blue);}
.bar .b-en{color:var(--muted);font-size:13px;margin-top:1px;}
.bar .arrow svg{width:17px;height:17px;color:var(--muted);}
.bar.whatsapp{background:#EAF5EE;border:1px solid #D4E9DC;}
.bar.whatsapp .ico{color:#25D366;}
.bar.support{background:var(--ivory);border:1px solid #E6DCC2;}
.bar.support .ico{color:var(--gold);}

/* ---------- Footer social ---------- */
.foot{margin-top:30px;padding-top:20px;border-top:1px solid rgba(184,134,44,.28);}
.foot .social{
  display:flex;align-items:center;justify-content:space-around;
  flex-wrap:wrap;gap:14px;
}
.foot .social a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);font-size:15px;font-weight:600;min-height:44px;padding:0 6px;
}
.foot .social a svg{width:22px;height:22px;}
.foot .official{
  text-align:center;margin-top:18px;
}
.foot .official a{
  display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;
}
.foot .official .pa{font-family:"Noto Sans Gurmukhi",sans-serif;color:var(--ink);font-weight:600;}
.foot .official svg{width:14px;height:14px;}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:6px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Desktop: watch/listen on left, books on right */
@media (min-width:900px){
  .main-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;
  }
  .yt .yt-cta-text{font-size:34px;}
}

/* Tablet & down: single column, books side by side still */
@media (max-width:899px){
  .main-grid{display:block;}
}

/* Phone */
@media (max-width:560px){
  .identity h1{font-size:22px;}
  .identity .photo{width:60px;height:60px;}
  .yt .yt-cta-text{font-size:24px;}
  .yt .yt-row{gap:12px;}
  .yt .subscribe{width:100%;}
  .book .cover{height:170px;}
  .book .cover img{max-height:170px;}
  .book .b-pa{font-size:19px;}
  .book{padding:13px;}
}

/* Very narrow: keep two-column book + quick grids but tighten */
@media (max-width:360px){
  .quick{gap:9px;}
  .books{gap:10px;}
  .tile{padding:12px;}
  .book{padding:11px;}
  .book .cover{height:150px;}
  .book .cover img{max-height:150px;}
}