/* ==========================================================================
   QwikGlam — social profiles (SOCIAL-1, 19 Oct 2026)
   Markup: inc/qg-social.php. Footer row, Google review chip, founder link,
   and the community band (.qg-sc) on Home, About and Contact.
   ========================================================================== */

.qg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ── Footer: label, icon row, review chip ─────────────────────────────── */
.qg-footer__follow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.qg-footer__follow-label {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--qg-gold, #C9A86C);
}
ul.qg-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  max-width: 250px; /* two even rows of five on every footer theme */
}
ul.qg-footer__social li { margin: 0; padding: 0; }
.qg-footer__social .qg-social:focus-visible {
  outline: 2px solid var(--qg-gold, #C9A86C);
  outline-offset: 2px;
}
/* The page themes recolour the icon by setting `stroke` on the svg; the
   filled details (Instagram's dot, Reddit's eyes) follow the text colour. */
.qg-footer__social .qg-sicon path[fill="currentColor"] { stroke: none !important; }

/* A light chip on every footer theme (dark or cream): Google's own colours
   need a light ground, and a badge on dark reads as a badge. */
.qg-greview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: #FFFDFB;
  border: 1px solid rgba(201,168,108,.38);
  box-shadow: 0 2px 10px rgba(42,17,40,.08);
  color: #3B1F3A;
  text-decoration: none;
  font-family: "DM Sans", system-ui, sans-serif;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.qg-greview:hover {
  border-color: #C9A86C;
  box-shadow: 0 6px 18px rgba(42,17,40,.12);
  transform: translateY(-1px);
}
.qg-greview:focus-visible { outline: 2px solid #C9A86C; outline-offset: 2px; }
.qg-greview__g {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(60,64,67,.12);
  flex-shrink: 0;
}
.qg-greview__txt { display: flex; flex-direction: column; line-height: 1.2; }
.qg-greview__txt b { font-size: .8rem; font-weight: 700; color: #3B1F3A; -webkit-text-fill-color: #3B1F3A; }
.qg-greview__txt small { font-size: .68rem; color: #8A6E7E; -webkit-text-fill-color: #8A6E7E; }
.qg-greview__arrow { color: #A8863F; flex-shrink: 0; }

/* ── Founder's LinkedIn (home leaders rail, About team card) ───────────── */
.qg-leader__connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 14px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,108,.45);
  background: rgba(255,255,255,.7);
  color: #3B1F3A;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}
.qg-leader__connect .qg-sicon { color: #0A66C2; }
.qg-leader__connect:hover { background: #fff; border-color: #C9A86C; }
.qg-leader__connect:focus-visible { outline: 2px solid #C9A86C; outline-offset: 2px; }

/* ── Community band ────────────────────────────────────────────────────── */
.qg-sc {
  --sc-ink:   #2A1128;
  --sc-plum:  #3B1F3A;
  --sc-soft:  #6A4060;
  --sc-mute:  #8A6E7E;
  --sc-gold:  #C9A86C;
  --sc-gold-hi: #ECD7A6;
  --sc-gold-deep: #A8863F;
  --sc-rose:  #C2547B;
  --sc-line:  rgba(201,168,108,.28);
  position: relative;
  padding: clamp(56px, 8vw, 96px) 20px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(212,114,140,.08), transparent 70%),
    linear-gradient(180deg, #FFF9F5 0%, #FBF0EA 100%);
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--sc-ink);
  overflow: hidden;
}
.qg-sc *, .qg-sc *::before, .qg-sc *::after { box-sizing: border-box; }
.qg-sc__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "head  lead"
    "cards cards"
    "foot  foot";
  gap: 28px 48px;
  align-items: center;
}

.qg-sc__head { grid-area: head; }
.qg-sc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sc-gold-deep);
}
.qg-sc__eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-gold));
}
.qg-sc__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--sc-ink);
  margin: 14px 0 14px;
}
.qg-sc__title em { font-style: italic; color: var(--sc-rose); }
.qg-sc__lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sc-soft);
  max-width: 34rem;
  margin: 0;
}

/* Lead card — Instagram */
.qg-sc__lead {
  grid-area: lead;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon body" "cta cta";
  gap: 18px 18px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(201,168,108,.22), transparent 55%),
    linear-gradient(150deg, #2A1128 0%, #3B1F3A 55%, #4A2346 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(42,17,40,.22), inset 0 0 0 1px rgba(236,215,166,.16);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.qg-sc__lead::after {
  /* a slow sheen on hover — the only motion in the band */
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(236,215,166,.14), transparent);
  transform: skewX(-18deg);
  transition: left .9s cubic-bezier(.22,1,.36,1);
  z-index: -1;
}
.qg-sc__lead:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(42,17,40,.28), inset 0 0 0 1px rgba(236,215,166,.28); }
.qg-sc__lead:hover::after { left: 130%; }
.qg-sc__lead:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 4px; }
.qg-sc__lead-icon {
  grid-area: icon;
  width: 64px; height: 64px;
  border-radius: 20px;
  display: grid; place-items: center;
  color: var(--sc-ink);
  background: linear-gradient(135deg, var(--sc-gold-hi), var(--sc-gold) 55%, var(--sc-gold-deep));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.qg-sc__lead-body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qg-sc__lead-k {
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sc-gold-hi);
}
.qg-sc__lead-h {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.qg-sc__lead-p { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.qg-sc__lead-cta {
  grid-area: cta;
  justify-self: start;
  display: inline-flex; align-items: center;
  gap: 6px; /* a flex item's leading space collapses — this is the gap before the arrow */
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sc-gold-hi), var(--sc-gold));
  color: var(--sc-ink);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Discovery cards */
.qg-sc__cards {
  grid-area: cards;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.qg-sc__cards li { margin: 0; padding: 0; display: flex; }
.qg-sc__card {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "pitch pitch" "cta cta";
  align-items: center;
  gap: 12px 14px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--sc-line);
  box-shadow: 0 8px 26px rgba(42,17,40,.06);
  color: var(--sc-ink);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.qg-sc__card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,108,.6);
  box-shadow: 0 16px 36px rgba(42,17,40,.10);
}
.qg-sc__card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.qg-sc__card-icon {
  grid-area: icon;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(201,168,108,.16), rgba(212,114,140,.10));
  color: var(--sc-plum);
}
.qg-sc__card-name {
  grid-area: name;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
}
.qg-sc__card-pitch { grid-area: pitch; font-size: .88rem; line-height: 1.55; color: var(--sc-soft); }
.qg-sc__card-cta {
  grid-area: cta;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sc-rose);
}

/* Footer of the band: the other channels + Google */
.qg-sc__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--sc-line);
}
.qg-sc__chips {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qg-sc__chips li { margin: 0; padding: 0; }
.qg-sc__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  background: rgba(255,255,255,.6);
  color: var(--sc-soft);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.qg-sc__chip .qg-sicon { color: var(--sc-gold-deep); }
.qg-sc__chip:hover { color: var(--sc-ink); border-color: rgba(201,168,108,.6); background: #fff; }
.qg-sc__chip:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }

/* ── Tablet ── */
@media (max-width: 900px) {
  .qg-sc__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "lead" "cards" "foot";
    gap: 24px;
  }
  .qg-sc__cards { grid-template-columns: 1fr; gap: 12px; }
  /* Cards become rows: icon · name + pitch · arrow */
  .qg-sc__card {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon name cta" "icon pitch cta";
    gap: 2px 14px;
    padding: 16px 18px;
  }
  .qg-sc__card-cta { align-self: center; }
}

/* ── Phone ── */
@media (max-width: 560px) {
  .qg-sc { padding: 52px 16px; }
  .qg-sc__title { font-size: 1.75rem; }
  .qg-sc__lede { font-size: .94rem; }
  .qg-sc__lead { padding: 22px; border-radius: 24px; gap: 14px; }
  .qg-sc__lead-icon { width: 54px; height: 54px; border-radius: 17px; }
  .qg-sc__lead-cta { justify-self: stretch; justify-content: center; }
  .qg-sc__card-pitch { font-size: .82rem; }
  .qg-sc__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .qg-sc__lead, .qg-sc__card, .qg-greview, .qg-sc__lead::after { transition: none; }
  .qg-sc__lead:hover, .qg-sc__card:hover, .qg-greview:hover { transform: none; }
}