/* ==========================================================================
   DAYANA — Industries page layout
   Page-specific only: sector index in the hero, overview cards, and the
   two-column detail built on the shared tab-list component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overview cards — overlap the hero edge; slider below 1200px
   -------------------------------------------------------------------------- */
.sectors { position: relative; z-index: 2; padding-block-end: clamp(3rem, 6vw, 5rem); }
.sectors__grid { margin-block-start: calc(-1 * (var(--cut) + 1.5rem)); display: grid; gap: 1rem; }
.sector-card {
  display: flex; flex-direction: column; gap: 0.9rem; inline-size: 100%; padding: 1.5rem; text-align: center; align-items: center;
  color: var(--c-body); background: var(--c-card); border: 1px solid var(--c-border); border-block-start: 3px solid transparent; border-radius: 2px;
  transition: border-color 0.3s ease;
}
.sector-card:hover { color: var(--c-body); border-color: var(--c-border); border-block-start-color: var(--c-accent); }
.sector-card:hover .icon-tile { background: var(--c-accent); color: #fff; }
.sector-card__body { display: block; flex: 1; }
.sector-card__title { margin-block-end: 0.4rem; font-size: 1.0625rem; }
.sector-card p { font-size: 0.875rem; line-height: 1.55; }
.sector-card__arrow { display: inline-flex; inline-size: 32px; block-size: 32px; align-items: center; justify-content: center; color: var(--c-secondary); border: 1px solid var(--c-border); border-radius: 2px; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.sector-card__arrow svg { inline-size: 16px; block-size: 16px; transform: rotate(90deg); }
.sector-card:hover .sector-card__arrow { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sectors__grid.slick-slider { display: block; }
.sectors__grid.slick-slider .slick-list { margin-inline: -0.5rem; }
.sectors__grid.slick-slider .slick-slide { padding-inline: 0.5rem; }
@media (min-width: 1200px) {
  .sectors__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sector-card { text-align: start; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Sector detail — tab heads in column 1, active panel in column 2 (desktop)
   -------------------------------------------------------------------------- */
.detail { overflow: hidden; }
.detail__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%);
}
.detail .container { position: relative; }

.sector { display: grid; gap: 1.25rem; padding-block: 0.5rem 1.5rem; }
.sector__media { aspect-ratio: 16 / 10; border: 1px solid var(--c-border); }
.sector__sub { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.sector__matters { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.sector__matters li {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; font-weight: 500; color: var(--c-heading);
  background: var(--c-card); border: 1px solid var(--c-border); border-inline-start: 3px solid var(--c-accent); border-radius: 2px;
}
.sector__matters svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 0.15rem; color: var(--c-accent); }
.sector__products { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sector .btn { justify-self: start; }

@media (max-width: 1023.98px) {
  .sector { text-align: center; }
  .sector__matters { text-align: start; }
  .sector__products { justify-content: center; }
  .sector .btn { justify-self: center; }
}
@media (min-width: 640px) {
  .sector__matters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sector { padding-block: 0; }
}