/*
  Intro page: the three Future One group companies.

  .intro-panels / __list
  .intro-panel (--trading / --design / --tech)
    __media / __body / __meta / __index / __tag / __title / __description
    __details / __details-inner / __services-title / __services
    __footer / __domain / __cta / __arrow
  .intro-cta

  Layout modes (mobile-first):
    < 48rem   stacked cards, image on top, everything visible
    48–64rem  full-bleed stacked panels, image behind text, everything visible
    >= 64rem  full-bleed three-column panels filling the viewport; on hover
              devices the active panel widens and reveals its service list

  Each card is one link target: the "Visit website" anchor is stretched over
  the whole panel with ::after, so no interactive element is nested in another.
*/

@layer pages {
  .intro-panels {
    --intro-accent: var(--color-gold);
    --intro-title-size: clamp(1.5rem, 1.1rem + 1.6vw, 3rem);
    --intro-text-size: clamp(1rem, 0.94rem + 0.25vw, 1.25rem);
    --intro-panel-padding: clamp(1.5rem, 1rem + 2.5vw, 4.5rem);

    background-color: var(--color-background-dark);
    color: var(--color-text-inverse);
  }

  .intro-panel--trading {
    --intro-accent: var(--color-company-trading);
  }

  .intro-panel--design {
    --intro-accent: var(--color-company-design);
  }

  .intro-panel--tech {
    --intro-accent: var(--color-company-tech);
  }

  /* ---------- Mobile: stacked cards ---------- */
  .intro-panels__list {
    display: grid;
    gap: var(--space-6);
    padding-inline: var(--container-padding);
    padding-block: var(--section-spacing-sm);
  }

  .intro-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-background-secondary);
    border: var(--border-width-hairline) solid var(--color-border-dark);
    border-radius: var(--radius-lg);
  }

  /* Company accent bar */
  .intro-panel::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-base);
    block-size: var(--border-width-thick);
    background-color: var(--intro-accent);
  }

  .intro-panel__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-background-dark);
  }

  .intro-panel__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard);
  }

  .intro-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--card-padding);
    flex: 1;
  }

  .intro-panel__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .intro-panel__index {
    font-family: var(--font-family-en-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--intro-accent);
  }

  .intro-panel__tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-inverse-muted);
  }

  html[lang="ar"] .intro-panel__tag {
    font-size: var(--font-size-sm);
    letter-spacing: 0;
  }

  .intro-panel__index + .intro-panel__tag {
    padding-inline-start: var(--space-3);
    border-inline-start: var(--border-width-hairline) solid var(--color-border-dark);
  }

  .intro-panel__title {
    font-size: var(--intro-title-size);
    line-height: var(--line-height-tight);
    color: var(--color-text-inverse);
  }

  .intro-panel__description {
    font-size: var(--intro-text-size);
    color: var(--color-text-inverse-muted);
    max-inline-size: 60ch;
  }

  .intro-panel__services-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-block-end: var(--space-3);
  }

  html[lang="ar"] .intro-panel__services-title {
    font-size: var(--font-size-sm);
    letter-spacing: 0;
  }

  .intro-panel__services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .intro-panel__services li {
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);
    border: var(--border-width-hairline) solid var(--color-border-dark);
    border-radius: var(--radius-pill);
    background-color: var(--color-tint-light);
  }

  .intro-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width-hairline) solid var(--color-border-dark);
  }

  .intro-panel__domain {
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse-muted);
    overflow-wrap: anywhere;
  }

  .intro-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target-min);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
  }

  /* Stretch the link over the whole panel */
  .intro-panel__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-decorative);
    border-radius: inherit;
  }

  .intro-panel__cta:focus-visible {
    outline: none;
  }

  .intro-panel__cta:focus-visible::after {
    outline: var(--border-width-thick) solid var(--color-focus);
    outline-offset: -4px;
    border-radius: var(--radius-lg);
  }

  .intro-panel__arrow {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--intro-accent);
    transition: transform var(--duration-base) var(--ease-standard);
  }

  html[dir="rtl"] .intro-panel__arrow {
    transform: scaleX(-1);
  }

  .intro-panel:hover .intro-panel__arrow,
  .intro-panel:focus-within .intro-panel__arrow {
    transform: translateX(var(--space-1));
  }

  html[dir="rtl"] .intro-panel:hover .intro-panel__arrow,
  html[dir="rtl"] .intro-panel:focus-within .intro-panel__arrow {
    transform: scaleX(-1) translateX(var(--space-1));
  }

  .intro-panel:hover .intro-panel__media img,
  .intro-panel:focus-within .intro-panel__media img {
    transform: scale(1.04);
  }

  /* ---------- Tablet and up: full-bleed panels, image behind text ---------- */
  @media (min-width: 48rem) {
    .intro-panels__list {
      gap: 0;
      padding: 0;
    }

    .intro-panel {
      justify-content: flex-end;
      min-block-size: 64svh;
      background-color: var(--color-background-dark);
      border: 0;
      border-block-end: var(--border-width-hairline) solid var(--color-border-dark);
      border-radius: var(--radius-none);
    }

    .intro-panel__media {
      position: absolute;
      inset: 0;
      z-index: -1;
      aspect-ratio: auto;
    }

    .intro-panel__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--gradient-panel-scrim);
    }

    .intro-panel__body {
      flex: 0 0 auto;
      gap: var(--space-5);
      padding: var(--intro-panel-padding);
      max-inline-size: 48rem;
    }

    .intro-panel__footer {
      margin-block-start: var(--space-2);
    }

    .intro-panel__cta:focus-visible::after {
      border-radius: var(--radius-none);
    }
  }

  /* ---------- Desktop: three full-height columns across the viewport ---------- */
  @media (min-width: 64rem) {
    .intro-panels__list {
      display: flex;
      min-block-size: max(40rem, calc(100svh - var(--site-header-height)));
    }

    .intro-panel {
      flex: 1 1 0;
      min-inline-size: 0;
      min-block-size: auto;
      border-block-end: 0;
      transition: flex-grow var(--duration-slow) var(--ease-standard);
    }

    .intro-panel + .intro-panel {
      border-inline-start: var(--border-width-hairline) solid var(--color-border-dark);
    }

    /* Equal-height text zones keep the index/tag rows aligned across panels
       regardless of title wrapping or description length. */
    .intro-panel__body {
      max-inline-size: none;
      min-block-size: max(60%, 31rem);
    }

    .intro-panel__footer {
      margin-block-start: auto;
    }

    .intro-panel__description,
    .intro-panel__details-inner {
      max-inline-size: 60ch;
    }

    /* Siblings recede while one panel is active */
    .intro-panels__list:hover .intro-panel:not(:hover) .intro-panel__media img,
    .intro-panels__list:focus-within .intro-panel:not(:focus-within) .intro-panel__media img {
      opacity: 0.55;
    }
  }

  /*
    Expanding behaviour only where hover is available and motion is welcome.
    Touch devices and reduced-motion users get every panel fully expanded.
  */
  @media (min-width: 64rem) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .intro-panel:hover,
    .intro-panel:focus-within {
      flex-grow: 1.6;
    }

    .intro-panel__description {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }

    .intro-panel:hover .intro-panel__description,
    .intro-panel:focus-within .intro-panel__description {
      -webkit-line-clamp: unset;
      line-clamp: none;
    }

    .intro-panel__details {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard);
    }

    .intro-panel__details-inner {
      overflow: hidden;
    }

    .intro-panel:hover .intro-panel__details,
    .intro-panel:focus-within .intro-panel__details {
      grid-template-rows: 1fr;
      opacity: 1;
    }
  }

  /* ---------- Closing call to action ---------- */
  .intro-cta {
    text-align: center;
    max-inline-size: 44rem;
  }

  .intro-cta h2 {
    margin-block-end: var(--space-4);
  }

  .intro-cta .hero__actions {
    justify-content: center;
    margin-block-start: var(--space-6);
  }
}