/* ══════════════════════════════════════════════════════
   VISUALAURA — Graphic Design page
   Layers on website-design.css (sections + motion), inquiry-flow.css
   (flow), and branding.css (burgundy theme + FAQ + picker). Adds the
   floating-asset hero, category cards, and design-mockup portfolio.
   ══════════════════════════════════════════════════════ */

/* ══ HERO — floating design-asset composition ══ */
.gd-showcase {
  position: relative; margin: 66px auto 0; max-width: 980px;
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.6vw, 30px);
}
.gd-asset {
  flex: 0 0 auto; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); opacity: 0;
  animation: brMarkIn 1s var(--ease) forwards;
}
.gd-asset.a1 { animation-delay: .15s, 1.4s; animation-name: brMarkIn, brFloatA; animation-duration: 1s, 7s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.gd-asset.a2 { animation-delay: .3s, 1.6s;  animation-name: brMarkIn, brFloatB; animation-duration: 1s, 6s;   animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.gd-asset.a3 { animation-delay: .45s, 1.5s; animation-name: brMarkIn, brFloatC; animation-duration: 1s, 6.6s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; z-index: 2; }
.gd-asset.a4 { animation-delay: .6s, 1.7s;  animation-name: brMarkIn, brFloatB; animation-duration: 1s, 7.4s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }
.gd-asset.a5 { animation-delay: .75s, 1.55s;animation-name: brMarkIn, brFloatA; animation-duration: 1s, 6.8s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; }

.gd-poster { width: clamp(118px,15vw,168px); aspect-ratio: 3/4; }
.gd-menu   { width: clamp(108px,13vw,150px); aspect-ratio: 3/4.2; }
.gd-slide  { width: clamp(184px,24vw,272px); aspect-ratio: 16/10; }
.gd-social { width: clamp(120px,15vw,162px); aspect-ratio: 1/1; }
.gd-board  { width: clamp(118px,15vw,166px); aspect-ratio: 3/4; }

/* poster: gradient canvas + serif title */
.gd-poster { background: linear-gradient(150deg, #6E1423, #2b1116); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.gd-poster b { font-family: var(--font-head); font-style: italic; color: #fff; font-size: 1.4rem; line-height: 1; }
.gd-poster span { font-family: var(--font-body); font-size: .5rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-l); margin-top: 6px; }
/* menu: cream, listing lines */
.gd-menu { background: linear-gradient(160deg, #FBF6EF, #efe3d2); padding: 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.gd-menu .mh { font-family: var(--font-head); font-style: italic; color: var(--primary); font-size: 1rem; text-align: center; margin-bottom: 4px; }
.gd-menu i { display: block; height: 4px; border-radius: 3px; background: rgba(110,20,35,.16); }
.gd-menu i:nth-child(even) { width: 78%; }
/* slide: deck preview */
.gd-slide { background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.gd-slide .st { height: 9px; width: 60%; border-radius: 3px; background: var(--primary); }
.gd-slide .ss { height: 5px; width: 82%; border-radius: 3px; background: rgba(110,20,35,.16); }
.gd-slide .bars { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.gd-slide .bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), rgba(110,20,35,.4)); }
.gd-slide .bars span:nth-child(2) { background: linear-gradient(180deg, var(--primary), rgba(201,169,110,.4)); }
/* social: 2x2 grid */
.gd-social { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-social div { border-radius: 8px; }
.gd-social div:nth-child(1) { background: linear-gradient(135deg, #6E1423, #8a2433); }
.gd-social div:nth-child(2) { background: linear-gradient(135deg, #C9A96E, #e0c898); }
.gd-social div:nth-child(3) { background: linear-gradient(135deg, #2b3a4a, #46606f); }
.gd-social div:nth-child(4) { background: linear-gradient(135deg, #2b1116, #6E1423); }
/* board: welcome board */
.gd-board { background: linear-gradient(160deg, #2b1116, #6E1423); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; }
.gd-board .crn { width: 70%; height: 1px; background: rgba(201,169,110,.6); }
.gd-board b { font-family: var(--font-head); font-style: italic; color: #fff; font-size: 1.15rem; text-align: center; line-height: 1.1; }
.gd-board span { font-family: var(--font-body); font-size: .46rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-l); }

@media (max-width: 760px) {
  .gd-showcase { flex-wrap: wrap; gap: 14px; }
  .gd-menu, .gd-board { display: none; }
}

/* ══ Category cards (reuse .wd-types-grid / .wd-type) ══ */
.wd-type .gd-cat-num { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; color: var(--accent); letter-spacing: .08em; margin-bottom: 14px; }
.gd-sublist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.gd-sublist li { font-family: var(--font-body); font-size: .72rem; font-weight: 400; color: var(--primary); background: rgba(110,20,35,.06); border: 1px solid rgba(110,20,35,.16); padding: 5px 12px; border-radius: 50px; }

/* ══ Portfolio design mockups (inside .wd-hpanel) ══ */
.gd-mock { border-radius: 14px; overflow: hidden; height: clamp(280px, 38vw, 360px); border: 1px solid var(--border); box-shadow: var(--shadow-md); position: relative; display: flex; }
.gd-mock-poster { background: linear-gradient(155deg, #6E1423, #2b1116); flex-direction: column; justify-content: flex-end; padding: 30px; }
.gd-mock-poster b { font-family: var(--font-head); font-style: italic; color: #fff; font-size: 2.4rem; line-height: 1.05; }
.gd-mock-poster span { font-family: var(--font-body); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-l); margin-top: 10px; }
.gd-mock-social { background: #fff; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; padding: 14px; }
.gd-mock-social div { border-radius: 9px; }
.gd-mock-social div:nth-child(3n+1) { background: linear-gradient(135deg, #6E1423, #8a2433); }
.gd-mock-social div:nth-child(3n+2) { background: linear-gradient(135deg, #C9A96E, #e0c898); }
.gd-mock-social div:nth-child(3n+3) { background: linear-gradient(135deg, #2b3a4a, #46606f); }
.gd-mock-slide { background: #fff; flex-direction: column; gap: 14px; padding: 30px; justify-content: center; }
.gd-mock-slide .t { height: 14px; width: 55%; border-radius: 4px; background: var(--primary); }
.gd-mock-slide .s { height: 8px; width: 80%; border-radius: 4px; background: rgba(110,20,35,.15); }
.gd-mock-slide .bars { margin-top: 14px; display: flex; align-items: flex-end; gap: 12px; height: 90px; }
.gd-mock-slide .bars span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), rgba(110,20,35,.35)); }
.gd-mock-slide .bars span:nth-child(2) { background: linear-gradient(180deg, var(--primary), rgba(201,169,110,.35)); }
.gd-mock-slide .bars span:nth-child(3) { height: 70%; }
.gd-mock-board { background: linear-gradient(160deg, #2b1116, #6E1423); flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; }
.gd-mock-board .crn { width: 64%; height: 1px; background: rgba(201,169,110,.55); }
.gd-mock-board b { font-family: var(--font-head); font-style: italic; color: #fff; font-size: 2rem; line-height: 1.1; }
.gd-mock-board span { font-family: var(--font-body); font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-l); }
.gd-mock-menu { background: linear-gradient(160deg, #FBF6EF, #efe3d2); flex-direction: column; gap: 11px; padding: 30px; }
.gd-mock-menu .mh { font-family: var(--font-head); font-style: italic; color: var(--primary); font-size: 1.7rem; text-align: center; margin-bottom: 6px; }
.gd-mock-menu i { display: block; height: 6px; border-radius: 4px; background: rgba(110,20,35,.14); }
.gd-mock-menu i:nth-child(even) { width: 76%; }