/* Netac detail page: extends synology-neo.css's shared .syn-* patterns
   (hero, use-grid, why-grid, gallery, closing) with Netac-specific blocks.
   Uses two purpose-made hero renders (netac-hero.webp, netac-cloud.webp —
   1983x793, a wider ratio than Synology's 1672x941 pair) for the hero and
   "Store More. Do More." ecosystem section, same as Synology's pattern;
   real Netac product photography fills the remaining sections. */

.net-page .hero-art { background-image: url('../images/hero/netac-hero.webp'); background-position: center 38%; background-size: cover; }
.net-page .net-closing-art { background-image: url('../images/hero/netac-cloud.webp'); background-position: center 55%; background-size: cover; }

/* img/Netac.webp (unlike Synology's logo) has an opaque WHITE background,
   not a transparent one — synology-neo.css's shared .syn-wordmark rule
   applies filter:brightness(0) invert(1) to turn a dark-on-transparent
   mark white for the dark hero, but run on a white background that just
   inverts to white-on-white: an invisible blank box, which is what showed
   up here. Netac's wordmark keeps its real blue-on-white and instead gets
   a light chip behind it so it reads clearly against the dark hero. */
.net-page .syn-wordmark { filter: none; background: #fff; border-radius: 6px; padding: 10px 14px; width: auto; max-width: 220px; height: auto; }
.net-page .net-partner-mark img { filter: none; background: #fff; border-radius: 6px; padding: 8px 12px; }

/* ---- "Store More. Do More." — generated storage/ecosystem render ---- */
.net-lineup-art { position: relative; min-width: 0; max-height: 360px; overflow: hidden; border-radius: 10px; }
.net-lineup-art > img { width: 100%; height: 360px; object-fit: cover; object-position: center 30%; }

/* ---- "Performance in Every Detail" — real RAM close-up + icon strip ---- */
.net-performance { padding: 34px 0; background: radial-gradient(ellipse at 70% 85%, #09426370, transparent 70%); }
.net-perf-grid { display: grid; grid-template-columns: 34% 66%; align-items: center; gap: 0; }
.net-perf-art { position: relative; border-radius: 10px; overflow: hidden; }
.net-perf-art > img { width: 100%; height: 320px; object-fit: cover; display: block; }
.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: 110px; }
.net-perf-reasons i { font-size: 22px; color: #00c8ff; }

/* ---- "Ideal for Every Use" — 4 real photo cards ---- */
.net-cases { padding: 30px 0; }
.net-cases > .wrap > .syn-copy { max-width: 640px; margin-bottom: 24px; }
.net-case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.net-case-card { position: relative; display: block; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 1px solid #155474; }
.net-case-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.net-case-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #030a12ee 10%, transparent 55%); }
.net-case-card span { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: 13px; font-weight: 600; color: #fff; }
.net-case-card:hover img { transform: scale(1.06); }

/* ---- Partnership band: 3 columns (office photo / copy / mark+tagline) ---- */
.net-partner-grid { grid-template-columns: 26% minmax(0,1fr) 24%; gap: 28px; }
.net-partner-photo { border-radius: 8px; overflow: hidden; border: 1px solid #15445a; }
.net-partner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.net-partner-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border: 1px solid #15445a; border-radius: 8px; background: radial-gradient(ellipse, #09334b, #040c14); }
.net-partner-mark img { height: 44px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.net-partner-mark p { font-size: 12px; line-height: 1.55; color: #9fbccc; margin: 0; }

@media (max-width: 1100px) {
  .net-perf-grid { grid-template-columns: 1fr; gap: 20px; }
  .net-case-grid { grid-template-columns: repeat(2, 1fr); }
  .net-partner-grid { grid-template-columns: 1fr; }
  .net-partner-photo { max-height: 220px; }
}
@media (max-width: 760px) {
  .net-lineup-art > img { height: auto; }
  .net-lineup-art { max-height: none; }
  .net-perf-reasons { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .net-case-grid { grid-template-columns: 1fr; }
}