/* ==========================================================================
   PORTFOLIO GLIMPSES + SHARED PORTFOLIO COMPONENTS (includes/v2/glimpse.php)
   Case study cards, browser frames, phone reels, the social media content
   calendar. Works on every section tone: light by default, dark variants
   inside .v2-sec--teal / .v2-sec--dark. Prefix: gl-
   ========================================================================== */

/* ----- tone-aware tokens ----- */
.gl, .gl-case, .gl-browser, .gl-ticks, .gl-reels, .gl-cases {
  --gl-card: #fff; --gl-line: var(--line); --gl-tx: var(--tx); --gl-mut: var(--muted); --gl-soft: var(--bg-soft); --gl-acc: var(--accent);
}
:is(.v2-sec--teal, .v2-sec--dark, .v2-sec--ink) :is(.gl-case, .gl-browser, .gl-ticks, .gl-reels, .gl-cases, .gl-head, .gl-site, .gl-ads, .gl-brand) {
  --gl-card: rgba(255,255,255,.05); --gl-line: rgba(255,255,255,.13); --gl-tx: #fff; --gl-mut: rgba(233,238,239,.72); --gl-soft: rgba(255,255,255,.06); --gl-acc: var(--mint);
}

/* ----- section head ----- */
.gl-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.gl-head .v2-eyebrow { margin-bottom: 18px; }
.gl-head .v2-lead { margin-bottom: 22px; }
.gl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.gl-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--accent); }
:is(.v2-sec--teal, .v2-sec--dark) .gl-link { color: var(--mint); }
.gl-link:hover .v2-ic { transform: translate(2px, -2px); }
.gl-link .v2-ic { transition: transform .2s var(--ease); }
@media (max-width: 860px) { .gl-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ----- small shared bits ----- */
.gl-tag { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font: 600 12px/1.2 var(--f-body); }
:is(.v2-sec--teal, .v2-sec--dark) .gl-tag { background: rgba(159,210,217,.16); color: var(--mint); }
.gl-ticks { display: grid; gap: 10px; }
.gl-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.gl-ticks.gl-ticks li, .gl .gl-ticks li { color: var(--gl-mut); }
.gl-ticks .v2-ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
:is(.v2-sec--teal, .v2-sec--dark) .gl-ticks .v2-ic { background: rgba(159,210,217,.16); color: var(--mint); }

/* ==========================================================================
   PHONE REELS (social glimpse)
   ========================================================================== */
.gl-reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.gl-reel {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate; color: #fff;
  border: 5px solid #05090A; border-radius: 30px; background: var(--panel);
  box-shadow: 0 28px 50px -30px rgba(0,0,0,.65); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gl-reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); }
.gl-reel:hover { transform: translateY(-4px); color: #fff; }
.gl-reel:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.gl-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-reel__top { position: absolute; z-index: 2; top: 14px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.gl-reel__av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; font: 700 10px/1 var(--f-body); }
.gl-reel__av img { width: 100%; height: 100%; object-fit: cover; }
.gl-reel__foot { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 14px; display: grid; gap: 8px; justify-items: start; }
.gl-reel__cat { max-width: 100%; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0F1416; font: 600 11px/1.3 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-reel .gl-reel__foot strong { color: #fff; font: 700 16px/1.1 var(--f-head); letter-spacing: -.02em; }
@media (max-width: 1100px) { .gl-reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gl-reels li:nth-child(5) { display: none; } }
@media (max-width: 760px) {
  .gl-reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 16px; scroll-padding-inline: var(--gut); }
  .gl-reels li { flex: none; width: min(56vw, 220px); scroll-snap-align: start; }
  .gl-reels li:nth-child(5) { display: block; }
}

/* ==========================================================================
   BROWSER FRAMES (seo / web glimpses)
   ========================================================================== */
.gl-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.gl-sites--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-site { display: grid; gap: 16px; align-content: start; }
.gl-browser { overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--gl-line); box-shadow: 0 24px 44px -30px rgba(0,0,0,.45); transition: transform .3s var(--ease); }
.gl-site:hover .gl-browser { transform: translateY(-4px); }
.gl-browser__bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #F3F3EF; border-bottom: 1px solid #E7E7E1; }
.gl-browser__dots { display: flex; gap: 6px; }
.gl-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #D6D6CE; }
.gl-browser__dots i:first-child { background: #EE8B7A; } .gl-browser__dots i:nth-child(2) { background: #F4D35E; } .gl-browser__dots i:nth-child(3) { background: #9FD2D9; }
.gl-browser__url { flex: 1; min-width: 0; padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid #E7E7E1; font-size: 12px; color: #5C6467; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.gl-browser__view { overflow: hidden; aspect-ratio: 16 / 10; background: #F3F3EF; }
.gl-browser__view img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.gl-site:hover .gl-browser__view img { transform: scale(1.03); }
.gl-site__meta { display: grid; gap: 10px; justify-items: start; padding-inline: 4px; }
.gl-site__meta--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gl-site .gl-site__meta h3 { margin-top: 2px; font: 700 19px/1.2 var(--f-head); letter-spacing: -.02em; color: var(--gl-tx); }
.gl-site__meta--row h3 { margin-top: 8px !important; }
.gl-visit { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; color: var(--gl-tx); transition: background-color .2s, color .2s; }
.gl-visit:hover { background: var(--gl-tx); color: var(--panel); }
:is(.v2-sec--teal, .v2-sec--dark) .gl-visit:hover { color: #0F1416; }
@media (max-width: 1100px) { .gl-sites, .gl-sites--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gl-sites, .gl-sites--4 { grid-template-columns: minmax(0, 1fr); } .gl-sites--4 li:nth-child(n+3) { display: none; } }

/* ==========================================================================
   ADS (ppc / google glimpses)
   ========================================================================== */
.gl-ads { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .95fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: 16px; align-items: center; }
.gl-ads__phone { grid-column: 2; grid-row: 1; aspect-ratio: 9 / 16; overflow: hidden; border: 5px solid #05090A; border-radius: 30px; background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.gl-ads__phone video { width: 100%; height: 100%; object-fit: cover; }
.gl-ads__ph { position: relative; grid-row: 1; margin: 0; overflow: hidden; border-radius: 20px; }
.gl-ads__ph--0 { grid-column: 1; translate: 0 -22px; }
.gl-ads__ph--1 { grid-column: 3; translate: 0 22px; }
.gl-ads__ph img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.gl-ads__ph figcaption, .gl-brand__item figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 10px; width: fit-content; max-width: calc(100% - 20px);
  padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.94); color: #0F1416; font: 600 12px/1.3 var(--f-body);
}
.gl-ads__card { grid-column: 4; grid-row: 1; display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--gl-card); border: 1px solid var(--gl-line); }
.gl-ads .gl-ads__card h3 { font: 700 clamp(20px, 1.8vw, 24px)/1.15 var(--f-head); letter-spacing: -.02em; color: var(--gl-tx); }
@media (max-width: 1000px) {
  .gl-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-ads__card { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) { .gl-ads { gap: 8px; } .gl-ads__ph figcaption { display: none; } .gl-ads__phone { border-width: 4px; border-radius: 22px; } }

/* ==========================================================================
   BRAND BENTO (creative glimpse)
   ========================================================================== */
.gl-brand { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); grid-template-rows: repeat(2, minmax(220px, auto)); gap: 16px; }
.gl-brand__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--gl-soft); }
.gl-brand__item > img, .gl-brand__item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-brand__item--video { grid-row: span 2; min-height: 460px; }
.gl-brand__item--2 { grid-column: 2 / span 2; }
@media (max-width: 760px) {
  .gl-brand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .gl-brand__item { aspect-ratio: 4 / 3; }
  .gl-brand__item--video { grid-row: auto; grid-column: 1 / -1; min-height: 0; aspect-ratio: 9 / 12; }
  .gl-brand__item--2 { grid-column: 1 / -1; }
}

/* ==========================================================================
   CASE STUDY CARDS
   ========================================================================== */
.gl-cases { margin-top: clamp(40px, 5vw, 64px); }
.gl-cases__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 600 14px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.gl-cases .gl-cases__label { color: var(--gl-mut); }
.gl-cases__label .v2-ic { color: var(--gl-acc); }
.gl-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .gl-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gl-cases__grid { grid-template-columns: minmax(0, 1fr); } }

.gl-case {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-lg);
  background: var(--gl-card); border: 1px solid var(--gl-line); color: var(--gl-tx);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.gl-case:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--gl-tx); }
:is(.v2-sec--teal, .v2-sec--dark) .gl-case:hover { box-shadow: none; border-color: rgba(159,210,217,.45); }
.gl-case:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.gl-case__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gl-soft); }
.gl-case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gl-case:hover .gl-case__media img { transform: scale(1.04); }
.gl-case__cat { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: #0F1416; font: 600 12px/1.2 var(--f-body); }
.gl-case__body { display: grid; gap: 14px; align-content: start; flex: 1; padding: 20px 22px 24px; }
.gl-case__who { display: flex; align-items: center; gap: 12px; margin-top: -42px; }
.gl-case__av { display: grid; place-items: center; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 50%; border: 3px solid #fff; background: var(--accent); color: #fff; font: 700 15px/1 var(--f-head); box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.gl-case__av img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gl-case__who > span:last-child { display: grid; gap: 2px; padding-top: 22px; min-width: 0; }
.gl-case .gl-case__who strong { font: 700 19px/1.15 var(--f-head); letter-spacing: -.02em; color: var(--gl-tx); }
.gl-case .gl-case__who small { font-size: 13px; color: var(--gl-mut); }
.gl-case .gl-case__sum { font-size: 15px; line-height: 1.5; color: var(--gl-mut); }
.gl-case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-case .gl-case__tags li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gl-line); font-size: 12px; font-weight: 600; color: var(--gl-tx); }
.gl-case__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-weight: 600; color: var(--gl-acc); }
.gl-case__more .v2-ic { transition: transform .2s var(--ease); }
.gl-case:hover .gl-case__more .v2-ic { transform: translateX(3px); }

/* ==========================================================================
   SOCIAL MEDIA CONTENT CALENDAR
   Always a light "planner" card (reads as a product screenshot on any tone).
   ========================================================================== */
.gl-cal {
  --p0: #2E6E76; --p1: #4FA6B1; --p2: #E0B12E; --p3: #E2765E; --p4: #8C7BD6;
  position: relative; padding: clamp(16px, 2vw, 26px); border-radius: var(--r-lg); background: #fff; color: var(--tx);
  border: 1px solid #E7E7E1; box-shadow: 0 34px 70px -40px rgba(0,0,0,.45);
}
.gl-pil--0 { --pc: var(--p0, #2E6E76); } .gl-pil--1 { --pc: var(--p1, #4FA6B1); } .gl-pil--2 { --pc: var(--p2, #E0B12E); } .gl-pil--3 { --pc: var(--p3, #E2765E); } .gl-pil--4 { --pc: var(--p4, #8C7BD6); }
.gl-cal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ECECE6; }
.gl-cal__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gl-cal__av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/1 var(--f-head); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E1306C; }
.gl-cal__av img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gl-cal .gl-cal__who strong { display: block; font: 700 17px/1.2 var(--f-head); letter-spacing: -.02em; color: #0F1416; }
.gl-cal .gl-cal__who small { display: block; font-size: 13px; color: #6B7376; }
.gl-cal__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-fmt { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; font: 700 11px/1.2 var(--f-body); letter-spacing: .02em; background: #F1F1EC; color: #33393B; }
.gl-fmt.gl-fmt--reel { background: #0F1416; color: #fff; }
.gl-fmt.gl-fmt--carousel { background: #DCEFF1; color: #1F555C; }
.gl-fmt.gl-fmt--story { background: linear-gradient(135deg, #FCE3D3, #F7D3E4); color: #8A2B57; }
.gl-fmt.gl-fmt--post { background: #FBF0C8; color: #6D5A12; }
.gl-fmt.gl-fmt--live { background: #E2765E; color: #fff; }
.gl-cal .gl-cal__stats li { font-size: 11px; }
.gl-cal .gl-fmt:not([class*="gl-fmt--"]) { color: #33393B; }
.gl-cal .gl-fmt span { color: inherit; font-size: 11px; }

.gl-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.gl-cal__day {
  position: relative; display: grid; gap: 8px; align-content: start; padding: 10px 10px 12px; border-radius: 16px;
  background: #FAFAF7; border: 1px solid #ECECE6; border-top: 4px solid var(--pc); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gl-cal__day:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(0,0,0,.4); }
.gl-cal__date { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.gl-cal .gl-cal__date strong { font: 700 13px/1 var(--f-head); color: #0F1416; text-transform: uppercase; letter-spacing: .04em; }
.gl-cal .gl-cal__date small { font-size: 11px; color: #7B8285; }
.gl-cal__post { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; background: #E9E9E3; }
.gl-cal__post--reel, .gl-cal__post--story { aspect-ratio: 9 / 14; }
.gl-cal__post--story { box-shadow: inset 0 0 0 2px #E1306C; }
.gl-cal__img { width: 100%; height: 100%; object-fit: cover; }
.gl-cal__post .gl-fmt { position: absolute; left: 6px; bottom: 6px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.gl-cal__post--carousel::after { content: ""; position: absolute; right: 7px; top: 7px; width: 22px; height: 6px; border-radius: 999px; background: radial-gradient(circle at 3px 3px, #fff 2.4px, transparent 3px) 0 0 / 8px 6px repeat-x; opacity: .95; }
.gl-cal .gl-cal__pillar { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1.25 var(--f-body); color: #0F1416; letter-spacing: .02em; }
.gl-cal__pillar::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pc); }
.gl-cal .gl-cal__cap { font-size: 12.5px; line-height: 1.4; color: #4A5255; }
.gl-cal__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ECECE6; }
.gl-cal .gl-cal__legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #33393B; }
.gl-cal__legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--pc); }

.gl-cal--compact .gl-cal__cap { display: none; }
@media (max-width: 1100px) {
  .gl-cal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gl-cal__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(clamp(16px, 2vw, 26px) * -1); padding: 2px clamp(16px, 2vw, 26px) 10px; }
  .gl-cal__day { flex: none; width: 46vw; max-width: 200px; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-reel, .gl-browser, .gl-browser__view img, .gl-case, .gl-case__media img, .gl-cal__day { transition: none; }
  .gl-case:hover .gl-case__media img, .gl-site:hover .gl-browser__view img { transform: none; }
}

/* Case card avatar overlaps the cover photo: the cover is position:relative,
   so the avatar row needs its own stacking level or the photo paints over it. */
.gl-case__who { position: relative; z-index: 2; }
.gl-case__av { background: #fff; }
.gl-case__av img { object-fit: contain; padding: 3px; }