/* j5create detail page: extends synology-neo.css's shared .syn-* patterns
   with j5create-specific blocks, built from 4 generated renders (hero,
   oneport, connectivity, everything — 1983x793). Only synology-neo.css is
   loaded alongside this file (not netac-neo.css), so the shared
   net-performance, net-perf-(grid|art|reasons) and net-case-card rules
   borrowed from that markup pattern are defined here in full — see the
   identical note in horion-neo.css and zai-neo.css for why that matters
   (without them, things silently fall back to unstyled block elements). */

.j5-page .hero-art { background-image: url('../images/hero/j5create-hero.webp'); background-position: center 40%; background-size: cover; }
.j5-page .j5-closing-art { background-image: url('../images/hero/j5create-hero.webp'); background-position: center 58%; background-size: cover; }

/* Brand accent: orange (matches the reference's j5create orange) instead
   of Synology/Netac/Horion's cyan. */
.j5-page em, .j5-page .eyebrow, .j5-page .step-no,
.j5-page .syn-arrow, .j5-page .text-link { color: #ff7a1a; }
.j5-page .button.primary { color: #1a0900; background: linear-gradient(170deg, #ffa04d, #ff7a1a 60%, #cc5c00); border-color: #ffab66; box-shadow: inset 0 1px 0 #ffe0b070, 0 0 20px #ff7a1a22; }
.j5-page .button.primary:hover { box-shadow: 0 0 28px #ff7a1a70; }
.j5-page .button { border-color: #ff7a1a; }
.j5-page .syn-trust i { color: #ff7a1a; }
.j5-page .net-perf-reasons i { color: #ff7a1a; }
.j5-page .syn-use-art i { color: #ff7a1a; background: none; -webkit-text-fill-color: #ff7a1a; }

/* No wide wordmark asset exists (the real logo file is a low-contrast
   black/gray wordmark on an opaque white background, and the only
   transparent variant is a 100x31px menu-icon crop, too small for a hero
   headline) — set as real styled text instead, matching the reference's
   own clean "j5create" text lockup. */
.j5-wordmark { font-size: 28px; font-weight: 300; letter-spacing: -0.01em; color: #fff; margin: 0 0 18px; }
.j5-wordmark span { font-weight: 800; }
.j5-wordmark sup { font-size: 11px; }
.j5-wordmark-inline { font-weight: 300; }
.j5-wordmark-inline::before { content: ''; }
.j5-trust-top { margin-top: 26px; }

.j5-lead { max-width: 640px; margin: -8px 0 24px; font-size: 14px; color: #b7cbd9; }

/* ---- "One Port. Endless Possibilities." photo panel ---- */
.j5-photo-art { position: relative; min-width: 0; max-height: 360px; overflow: hidden; border-radius: 10px; }
.j5-photo-art > img { width: 100%; height: 360px; object-fit: cover; object-position: center 35%; }

/* ---- "Connectivity for Every Workflow" — 6 icon cards ---- */
.j5-cat-grid { grid-template-columns: repeat(6, 1fr); }
.j5-cat-card .syn-use-art { height: auto; padding: 6px 0 10px; }
.j5-cat-card h3 { font-size: 14px; }
.j5-cat-card p { font-size: 11.5px; }

/* ---- "Build Your Complete Workspace" — full-bleed cinematic band ---- */
.j5-workspace { position: relative; isolation: isolate; overflow: hidden; min-height: 320px; display: flex; align-items: center; }
.j5-workspace-art { background-image: url('../images/hero/j5create-connectivity.webp'); background-position: center 32%; background-size: cover; }
.j5-workspace:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #03070bf5 5%, #03070b90 45%, #03070b40); }
.j5-workspace-inner { text-align: center; padding: 60px 0; }
.j5-workspace-inner h2 { font-size: clamp(23px, 2.6vw, 32px); }
.j5-workspace-inner p { max-width: 480px; margin: 12px auto 0; font-size: 14px; color: #cfe0eb; }

/* ---- "From One Device to Everything You Need" ---- */
.net-performance { padding: 34px 0; background: radial-gradient(ellipse at 70% 85%, #09426350, transparent 70%); }
.net-perf-art { position: relative; border-radius: 10px; overflow: hidden; }
.net-perf-reasons { display: flex; justify-content: space-around; gap: 10px; padding: 16px 10px; background: #030b13d9; font-size: 11px; text-align: center; color: #cfe0eb; }
.net-perf-reasons span { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 90px; }
.net-perf-reasons i { font-size: 20px; }
.j5-chain-copy { max-width: 640px; margin: 0 auto 24px; text-align: center; }
.j5-chain-art img { width: 100%; height: 340px; object-fit: cover; display: block; }
.j5-chain-reasons { flex-wrap: wrap; }

/* ---- "Built for Every Setup" — 4 photo cards, label BELOW the photo
   (not overlaid) — several j5create source photos carry their own baked-in
   marketing text/specs, so a label overlaid on top would collide with it,
   same lesson already learned on horion.php.
   .net-case-grid's base display:grid rule (like .net-performance/.net-perf-*
   above) only exists in netac-neo.css, which this page doesn't load — my
   .j5-setup-grid override only redefined grid-template-columns, assuming
   display:grid already applied; without it the grid fell back to block
   layout and every "column" rendered full-width and stacked, which is what
   inflated this section to 4500+px tall. */
.net-case-grid { display: grid; gap: 16px; }
.j5-setup-grid { grid-template-columns: repeat(4, 1fr); }
.j5-setup-grid .net-case-card { display: flex; flex-direction: column; aspect-ratio: auto; background: radial-gradient(ellipse at 50% 10%, #0c3651, #04111b 65%); border: 1px solid #155474; }
.j5-setup-grid .net-case-card::after { content: none; }
.j5-setup-thumb { display: block; flex: 0 0 auto; aspect-ratio: 4/3; overflow: hidden; }
.j5-setup-grid .net-case-card img { width: 100%; height: 100%; object-fit: cover; position: static; }
.j5-setup-grid .net-case-card span:last-child { flex: 0 0 auto; position: static; display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: #fff; font-size: 13px; font-weight: 600; }
.j5-setup-grid .net-case-card span:last-child i { color: #ff7a1a; font-size: 13px; }

/* ---- "Explore j5create Products" — 6 real product photos, label below
   the photo (product photos carry names/specs baked in). ---- */
.j5-product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 22px; }
.j5-product-card { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid #155474; background: #04111b; text-decoration: none; transition: translate .3s, border-color .3s; }
.j5-product-card:hover { translate: 0 -4px; border-color: #ff7a1a; }
.j5-product-thumb { aspect-ratio: 1; background: #0c1622; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.j5-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.j5-product-card > span:last-child { padding: 10px 12px; font-size: 12px; font-weight: 600; color: #fff; text-align: center; }

/* ---- Partnership band: 2 columns (photo / copy) — no dedicated third
   wordmark-card slot needed since the wordmark is set as text in the
   heading itself.
   netac-neo.css's .net-partner-photo img is height:100%, which needs an
   explicit height on the parent to resolve against — synology-neo.css's
   3-column grid gave it one implicitly via row height matching the copy
   column, but this page's 40%/60% override has no such height anywhere,
   so the image had nothing concrete to size against and rendered as a
   tall, badly-cropped sliver instead of the wide banner it actually is. */
.j5-partner-grid { grid-template-columns: 45% minmax(0,1fr); align-items: center; }
.j5-partner-grid .net-partner-photo { aspect-ratio: 1983/793; }
.j5-partner-grid .net-partner-photo img { height: auto; aspect-ratio: 1983/793; object-fit: cover; }

@media (max-width: 1100px) {
  .j5-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .j5-setup-grid { grid-template-columns: repeat(2, 1fr); }
  .j5-product-grid { grid-template-columns: repeat(3, 1fr); }
  .j5-partner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .j5-photo-art > img { height: auto; }
  .j5-photo-art { max-height: none; }
  .j5-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .j5-chain-art img { height: auto; }
}
@media (max-width: 480px) {
  .j5-cat-grid { grid-template-columns: 1fr; }
  .j5-setup-grid { grid-template-columns: 1fr; }
  .j5-product-grid { grid-template-columns: repeat(2, 1fr); }
}