/* ==========================================================================
   DAYANA — Product family page layout (all ten families share this file)
   Sub-category list beside a sticky family image, featured product,
   technical-documents band, related families slider.
   ========================================================================== */

/* Sub-categories */
.subs { position: relative; overflow: hidden; }
.subs__stripes { position: absolute; inset-inline-start: -10%; inset-block: 0; inline-size: 40%; pointer-events: none; background: repeating-linear-gradient(-32deg, transparent 0 22px, rgba(43, 58, 152, 0.06) 22px 23px); mask-image: linear-gradient(to left, transparent, rgba(0,0,0,1) 70%); }
.subs__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.subs__frame { aspect-ratio: 16 / 10; border: 1px solid var(--c-border); }
.subs__list { display: grid; gap: 1rem; }
.sub-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 1rem; align-items: start; padding: 1.25rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 2px; transition: border-color 0.3s ease; scroll-margin-block-start: 110px; }
.sub-card:hover { border-color: var(--c-accent); }
.sub-card:hover .icon-tile { background: var(--c-accent); color: #fff; }
.sub-card .icon-tile { grid-row: 1 / span 3; inline-size: 48px; block-size: 48px; }
.sub-card .icon-tile svg { inline-size: 24px; block-size: 24px; }
.sub-card__index { position: absolute; inset-inline-end: 1rem; inset-block-start: 0.75rem; font-size: 1.25rem; color: var(--c-border); }
.sub-card__title { font-size: 1.0625rem; padding-inline-end: 2.5rem; }
.sub-card p { font-size: 0.9rem; line-height: 1.55; }
.sub-card .link-arrow { font-size: 0.75rem; margin-block-start: 0.25rem; }
@media (min-width: 640px) { .subs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .subs__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .subs__media { position: sticky; inset-block-start: 110px; }
  .subs__frame { aspect-ratio: 4 / 5; }
}

/* Featured product (fuses family) */
.featured { padding-block-start: 0; }
.featured__card { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--c-body); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 2px; overflow: hidden; transition: border-color 0.3s ease; }
.featured__card:hover { color: var(--c-body); border-color: var(--c-accent); }
.featured__media { display: block; aspect-ratio: 16 / 10; }
.featured__body { display: grid; gap: 0.75rem; align-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center; justify-items: center; }
.featured__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.featured__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
@media (min-width: 768px) {
  .featured__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .featured__media { aspect-ratio: auto; block-size: 100%; }
  .featured__body { text-align: start; justify-items: start; }
}