/* Horion detail page: extends synology-neo.css's shared .syn-* patterns
   (hero, use-grid, why-grid, gallery, closing) with Horion-specific blocks.
   Uses two purpose-made hero renders (horion-hero.webp, horion-engage.webp
   — 1983x793) for the hero and "Engage. Collaborate. Inspire." ecosystem
   section; real Horion product photography fills the remaining sections. */

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

/* img/Horion logo.webp (like Netac's) has an opaque WHITE background, not
   transparent — see the identical fix and reasoning in netac-neo.css. */
.hor-page .syn-wordmark { filter: none; background: #fff; border-radius: 6px; padding: 10px 14px; width: auto; max-width: 220px; height: auto; }
.hor-page .net-partner-mark img { filter: none; background: #fff; border-radius: 6px; padding: 8px 12px; }

/* ---- "Engage. Collaborate. Inspire." — generated ecosystem render ---- */
.hor-engage-art { position: relative; min-width: 0; max-height: 360px; overflow: hidden; border-radius: 10px; }
.hor-engage-art > img { width: 100%; height: 360px; object-fit: cover; object-position: center 35%; }

/* ---- "Built for Every Space" — 3 real photo space cards. The real
   Horion photos are studio product shots / UI screenshots, several with
   their own baked-in text (model badges, marketing headlines) — a dark
   gradient + overlaid label (the original design here, and the Netac
   pattern it was copied from) collided with that existing text instead of
   reading as a caption. Label now sits in its own bar BELOW the photo,
   which never overlaps anything printed in the image itself. */
.hor-scale-grid { grid-template-columns: 1fr repeat(3, 1fr); }
.hor-space-card { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 10%, #0c3651, #04111b 65%); border: 1px solid #155474; }
.hor-space-card .hor-space-thumb { flex: 0 0 auto; aspect-ratio: 4/3; background: #04111b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hor-space-card img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.hor-space-card span { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: #fff; }
.hor-space-card span i { font-size: 11px; color: #00c8ff; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.hor-space-card:hover img { transform: scale(1.05); }
.hor-space-card:hover span i { opacity: 1; transform: translateX(0); }

/* ---- "Smarter Collaboration In Every Detail" — real close-up + icons.
   horion.php borrows the .net-performance/.net-perf-* class names from
   netac.php's markup pattern, but this page never loads netac-neo.css (the
   only file that actually defines them) — so .net-perf-reasons had no CSS
   at all here and fell back to being a plain block element, which is what
   collapsed its 4 icon+label items into one overlapping line. Defining the
   same rules locally instead of pulling in the whole unrelated stylesheet. */
.net-performance { padding: 34px 0; background: radial-gradient(ellipse at 70% 85%, #09426370, transparent 70%); }
.net-perf-grid { display: grid; align-items: center; gap: 0; }
.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: 110px; }
.net-perf-reasons i { font-size: 22px; color: #00c8ff; }

.hor-detail-grid { grid-template-columns: 38% 62%; }
.hor-detail-art img { width: 100%; height: 320px; object-fit: cover; display: block; }

/* ---- "Built for Every Environment" — one pre-labeled banner (Education /
   Business & Meetings / Digital Signage / Command & Control already
   captioned in the image itself) instead of 4 separate cards. */
.hor-envs-banner { border-radius: 10px; overflow: hidden; margin-top: 22px; }
.hor-envs-banner img { width: 100%; height: auto; display: block; }

/* ---- Ecosystem section: reuses Synology's .syn-eco-visual, swaps the
   generated cloud render for a real Horion display photo + relabeled
   AV-ecosystem callouts. ---- */
.hor-eco-visual > img { object-position: center 40%; }

/* ---- Partnership band: horion.php dropped the 3rd column
   (.net-partner-mark) since the new partner photo already has both
   wordmarks and the headline baked in — netac-neo.css's base
   .net-partner-grid still assumes 3 columns (26% / 1fr / 24%), which left
   this page's photo squeezed into a 26%-wide column and object-fit:cover
   cropped a 1983x793 wide render down to a tall sliver. 2 columns, wider
   photo, and a natural (not forced-square) aspect ratio instead. */
.hor-page .net-partner-grid { grid-template-columns: 46% minmax(0,1fr); }
.hor-page .net-partner-photo img { height: auto; object-fit: contain; }

@media (max-width: 1100px) {
  .hor-page .net-partner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .hor-scale-grid { grid-template-columns: repeat(3, 1fr); }
  .hor-scale-grid > .syn-copy { grid-column: 1/-1; }
  .hor-detail-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .hor-engage-art > img { height: auto; }
  .hor-engage-art { max-height: none; }
  .hor-scale-grid { grid-template-columns: 1fr; }
}