/* Slice stack (design language v2). Rows are hairline boxes that share their rules; the open one carries the corner-fading
   blue edge and wash from ix-skin.css. 1024px and wider: vertical strips that grow horizontally (flex). Below: an accordion
   whose panel animates grid-template-rows 0fr to 1fr. Everything is scoped to [data-slices].is-sliced, a class the script
   adds, so without JS (or with reduced motion, where the script stands down) the hub keeps its plain open list. */

[data-slices].is-sliced > .rail__line { display: none; }
[data-slices].is-sliced .offer > .offer__num { display: none; }

.slice__tab {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.slice__tab:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: -4px; }
.slice__tab[aria-disabled='true'] { cursor: default; }
.slice__num { color: var(--text-3); }
.is-open > .slice__tab .slice__num { color: var(--ix-blue); }
.slice__label { color: var(--text-2); }
.is-open > .slice__tab .slice__label { color: var(--text-1); }
.offer__body[inert], .slice__panel[inert] { visibility: hidden; }

/* The open row's outcome line is the link to the service page, set as a serif italic outcome. */
[data-slices].is-sliced .offer h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.12;
  max-width: 20ch;
}
[data-slices].is-sliced .offer h3 a { text-decoration: underline; text-decoration-color: var(--ix-hair); text-underline-offset: 0.2em; }
[data-slices].is-sliced .offer h3 a:hover { text-decoration-color: var(--ix-blue); }
[data-slices].is-sliced .offer h3 a:focus-visible { box-shadow: none; border-radius: 0; outline: 2px solid var(--ix-blue); outline-offset: 3px; }
[data-slices].is-sliced .offer__visual {
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--ix-hair);
  border-radius: 0;
}

@media (prefers-reduced-motion: no-preference) {
  [data-slices].is-sliced .offer.is-open > .offer__body > *,
  [data-slices].is-sliced .offer.is-open > .slice__panel > * { animation: slice-in var(--ix-t-swap) var(--ix-ease) backwards; }
  @keyframes slice-in { from { opacity: 0; } }
}

/* Below 1024px: accordion, one panel open, the header row is the full-width button. */
@media (max-width: 1023px) {
  [data-slices].is-sliced { border-top: 1px solid var(--ix-rule); }
  [data-slices].is-sliced .offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 0fr;
    padding: 0;
    margin-top: -1px;
  }
  [data-slices].is-sliced .offer.is-open { grid-template-rows: auto 1fr; }
  .slice__tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--ix-pad);
    width: 100%;
    min-height: 3.5rem;
    padding: var(--s-4) calc(var(--ix-pad) * 2 + 0.75rem) var(--s-4) var(--ix-pad);
  }
  .slice__tab::after,
  .slice__tab::before {
    content: '';
    position: absolute;
    right: var(--ix-pad);
    top: 50%;
    background: var(--text-2);
    transition: opacity var(--ix-t-fast) var(--ix-ease);
  }
  .slice__tab::after { width: 0.75rem; height: 1px; }
  .slice__tab::before { width: 1px; height: 0.75rem; margin-top: -0.375rem; right: calc(var(--ix-pad) + 0.375rem); }
  .is-open > .slice__tab::before { opacity: 0; }
  .slice__num { min-width: 1.5rem; }
  [data-slices].is-sliced .offer__body,
  [data-slices].is-sliced .slice__panel {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--ix-pad);
    gap: var(--s-4);
  }
  [data-slices].is-sliced .offer__body > :first-child,
  [data-slices].is-sliced .slice__panel > :first-child { margin-top: var(--s-2); }
  [data-slices].is-sliced .offer__body > :last-child,
  [data-slices].is-sliced .slice__panel > :last-child { margin-bottom: var(--ix-pad); }
  [data-slices].is-sliced .offer__visual { max-width: 36rem; }
  @media (prefers-reduced-motion: no-preference) {
    [data-slices].is-sliced .offer { transition: grid-template-rows 300ms var(--ix-ease), background var(--ix-t-fast) var(--ix-ease), border-color var(--ix-t-fast) var(--ix-ease); }
    [data-slices].is-sliced .offer__body[inert],
    [data-slices].is-sliced .slice__panel[inert] { transition: visibility 0s linear 300ms; }
  }
}

/* 1024px and wider: six vertical strips side by side; the open one takes the free width (flex-grow). */
@media (min-width: 1024px) {
  .hub-offers__grid:has(.is-sliced) { grid-template-columns: minmax(0, 1fr); }
  .hub-offers__grid:has(.is-sliced) .hub-index { display: none; }
  [data-slices].is-sliced::before,
  [data-slices].is-sliced::after { display: none; }

  [data-slices].is-sliced {
    --slice-strip: 4.25rem;
    --slice-min-h: 27rem;
    display: flex;
    align-items: stretch;
  }
  [data-slices].is-sliced .offer {
    display: block;
    flex: 0 0 var(--slice-strip);
    min-width: 0;
    min-height: var(--slice-min-h);
    margin-left: -1px;
    padding: 0;
    overflow: clip;
    overflow-clip-margin: border-box;
  }
  [data-slices].is-sliced .offer:first-of-type { margin-left: 0; }
  [data-slices].is-sliced .offer.is-open { flex: 1 1 0; }
  @media (prefers-reduced-motion: no-preference) {
    [data-slices].is-sliced .offer { transition: flex 400ms var(--ix-ease), background var(--ix-t-fast) var(--ix-ease), border-color var(--ix-t-fast) var(--ix-ease); }
  }

  .slice__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--s-5) 0 0;
  }
  .slice__tab::after { content: ''; position: absolute; inset: 0; }
  .slice__label {
    writing-mode: vertical-rl;
    font-size: var(--fs-small);
    white-space: nowrap;
    max-block-size: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .is-open > .slice__tab {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-5) var(--ix-pad) 0;
  }
  .is-open > .slice__tab::after { display: none; }
  .is-open > .slice__tab .slice__label { writing-mode: horizontal-tb; font-size: var(--fs-body); max-block-size: none; }

  [data-slices].is-sliced .offer__body,
  [data-slices].is-sliced .slice__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-content: start;
    align-items: start;
    gap: var(--s-4) var(--s-6);
    min-width: 36rem;
    padding: var(--s-6) var(--ix-pad) var(--ix-pad);
  }
  [data-slices].is-sliced .offer:not(.is-open) > .offer__body,
  [data-slices].is-sliced .offer:not(.is-open) > .slice__panel { position: absolute; top: 0; left: 0; }
  [data-slices].is-sliced .offer__body > h3,
  [data-slices].is-sliced .offer__body > p { grid-column: 1; }
  [data-slices].is-sliced .offer__body > .offer__visual { grid-column: 2; grid-row: 1 / span 2; }
}