/* ===========================================================================
   Corporate blue theme for a showcase gallery (config "theme": "blue";
   used by /projects/showcase/manufacturing/). Loaded after showcase.css and
   scoped to body.showcase-theme-blue.

   Hero: deep navy → royal blue → sky blue → white, with a soft neon glow.
   Cards: photo-led and airy, with a serif title, all the same size;
   deep-blue Preview buttons that glow on hover.
   =========================================================================== */

.showcase-theme-blue {
  --sx-navy: #06142e;
  --sx-deep: #0b2a6f;
  --sx-blue: #1d4ed8;
  --sx-sky: #38bdf8;
  --sx-ice: #e0f2fe;
  --sx-ink: #0b1b3a;
  --sx-muted: #5b6b85;
  --sx-line: #dbe7f7;
  --sx-glow: rgba(56, 189, 248, .55);
  --sx-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------- hero */
.showcase-theme-blue .showcase-hero--themed {
  background:
    radial-gradient(760px 440px at 94% 6%, rgba(255, 255, 255, .78), rgba(224, 242, 254, .35) 38%, transparent 68%),
    radial-gradient(620px 380px at 6% 100%, rgba(56, 189, 248, .32), transparent 66%),
    radial-gradient(420px 260px at 50% 0%, rgba(29, 78, 216, .45), transparent 70%),
    linear-gradient(118deg, var(--sx-navy) 0%, var(--sx-deep) 30%, var(--sx-blue) 58%, var(--sx-sky) 84%, var(--sx-ice) 100%);
}
/* The base circles, recoloured as faint neon rings. */
.showcase-theme-blue .showcase-hero--themed::before {
  background: transparent;
  border: 1px solid rgba(125, 211, 252, .28);
  box-shadow: 0 0 60px rgba(56, 189, 248, .18), inset 0 0 60px rgba(56, 189, 248, .12);
}
.showcase-theme-blue .showcase-hero--themed::after {
  background: rgba(56, 189, 248, .08);
  filter: blur(8px);
}

.showcase-theme-blue .showcase-hero-title {
  text-shadow: 0 0 28px rgba(56, 189, 248, .55), 0 2px 14px rgba(6, 20, 46, .45);
}
.showcase-hero-line { display: block; }
.showcase-theme-blue .showcase-hero-line + .showcase-hero-line {
  margin-top: .1em;
  background: linear-gradient(90deg, #ffffff 0%, #bae6fd 55%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, .65));
}

.showcase-theme-blue .showcase-stat {
  background: rgba(6, 20, 46, .28);
  border: 1px solid rgba(125, 211, 252, .45);
  box-shadow: 0 0 18px rgba(56, 189, 248, .22), inset 0 0 12px rgba(125, 211, 252, .12);
}

.showcase-theme-blue .showcase-pkg-btn {
  color: var(--sx-deep);
  box-shadow: 0 0 22px rgba(56, 189, 248, .45);
}
.showcase-theme-blue .showcase-pkg-btn:hover,
.showcase-theme-blue .showcase-pkg-btn:focus-visible {
  color: var(--sx-blue);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .8), 0 0 30px rgba(56, 189, 248, .7);
}
.showcase-theme-blue .showcase-pkg-btn--ghost {
  border-color: rgba(186, 230, 253, .9);
  color: #fff;
  background: rgba(6, 20, 46, .18);
  box-shadow: 0 0 16px rgba(56, 189, 248, .3), inset 0 0 12px rgba(125, 211, 252, .15);
}
.showcase-theme-blue .showcase-pkg-btn--ghost:hover,
.showcase-theme-blue .showcase-pkg-btn--ghost:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* ----------------------------------------------------------- documents */
.showcase-theme-blue .showcase-docs {
  position: relative;
  padding-bottom: 5rem !important;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(56, 189, 248, .10), transparent 70%),
    radial-gradient(600px 320px at 0% 40%, rgba(29, 78, 216, .07), transparent 70%),
    linear-gradient(180deg, #f4f8ff 0%, #ffffff 45%);
}
.showcase-theme-blue .showcase-docs-title {
  font-family: var(--sx-serif);
  font-weight: 400 !important;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  letter-spacing: -.01em;
  color: var(--sx-ink);
}

.showcase-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: var(--sx-deep, #0b2a6f);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(56, 189, 248, .18);
}

/* ------------------------------------------------------------------ cards */
.showcase-theme-blue .showcase-card {
  border-radius: 24px !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: 0 1px 2px rgba(6, 20, 46, .05), 0 22px 44px -26px rgba(11, 42, 111, .38) !important;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.showcase-theme-blue .showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, .55) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .35), 0 0 32px rgba(56, 189, 248, .32),
    0 26px 52px -24px rgba(11, 42, 111, .5) !important;
}

/* Photo header, like the editorial image tiles it is modelled on. */
.showcase-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2a6f, #38bdf8);
}
.showcase-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.showcase-card:hover .showcase-card-photo img { transform: scale(1.05); }
.showcase-card-photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(6, 20, 46, .55));
  pointer-events: none;
}
.showcase-card-photo-icon {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(135deg, #0b2a6f, #1d4ed8);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 22px rgba(56, 189, 248, .75);
}
.showcase-card-photo-pages {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  color: #0b1b3a;
  font-size: 11px;
  font-weight: 700;
}

.showcase-theme-blue .showcase-card-title {
  font-family: var(--sx-serif);
  font-weight: 400 !important;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--sx-ink);
}
.showcase-theme-blue .showcase-tag {
  background: #eff6ff !important;
  color: #1e3a8a !important;
  border-color: #bfdbfe !important;
}
.showcase-theme-blue .showcase-equip-title { color: var(--sx-blue); }
.showcase-theme-blue .showcase-equip-list li { border-bottom-color: #e3ecfa; }
.showcase-theme-blue .showcase-equip-list li i { color: var(--sx-blue); }
.showcase-theme-blue .showcase-equip-includes li { background: #eff6ff; color: #1e40af; }

.showcase-theme-blue .showcase-preview-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sx-deep) 0%, var(--sx-blue) 100%);
  box-shadow: 0 10px 22px -10px rgba(29, 78, 216, .8), 0 0 14px rgba(56, 189, 248, .25);
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.showcase-theme-blue .showcase-preview-btn:hover,
.showcase-theme-blue .showcase-preview-btn:focus-visible {
  background: linear-gradient(135deg, var(--sx-deep) 0%, var(--sx-blue) 100%);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .7), 0 0 26px rgba(56, 189, 248, .75);
}

/* Every card the same size: equal-height rows (not just equal within a row),
   so photos, titles and Preview buttons line up across the whole grid. */
@media (min-width: 768px) {
  .showcase-theme-blue .showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .showcase-theme-blue .showcase-grid > * { width: auto; max-width: none; }
}
@media (min-width: 992px) {
  .showcase-theme-blue .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------- CTA */
.showcase-cta--themed {
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(56, 189, 248, .35), transparent 70%),
    linear-gradient(120deg, #06142e 0%, #0b2a6f 55%, #1d4ed8 100%);
}
.showcase-cta--themed h2 { text-shadow: 0 0 24px rgba(56, 189, 248, .5); }

@media (prefers-reduced-motion: reduce) {
  .showcase-theme-blue .showcase-card,
  .showcase-card-photo img,
  .showcase-theme-blue .showcase-preview-btn { transition: none; }
}