/* assets/css/components/front-bento.css
 * @layer components — Bento grid layouts for homepage sections
 * ════════════════════════════════════════════════════════════════════
 *
 * Philosophy: Each bento section declares container-type on its
 * wrapper. Cards adapt their internal layout via @container.
 * The :has(> .component) pattern auto-opts parents into measurement.
 *
 * Radius: var(--radius-xs) (2px) — sharp/minimal throughout.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {


  /* ════════════════════════════════════════════════════════════════════
     BENTO: SECTORS — 3-col, card 1 spans 2 rows
     ┌──────────────┬──────────┬──────────┐
     │              │ Card 2   │ Card 3   │
     │   Card 1     │          │          │
     │  (2 rows)    ├──────────┼──────────┤
     │              │ Card 4   │ Card 5   │
     └──────────────┴──────────┴──────────┘
     ════════════════════════════════════════════════════════════════════ */

  .bento-sectors {
    container-type: inline-size;
    container-name: bento-sectors;
  }

  .bento-sectors__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 14rem 14rem;
    gap: var(--space-xs);
  }

  .bento-sectors__card:first-child {
    grid-row: 1 / 3;
  }

  .bento-sectors__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--neutral-semi-dark);
    text-decoration: none;
    color: var(--white);
  }

  /* Gradient overlay for text readability */
  .bento-sectors__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      oklch(0% 0 0 / 70%) 0%,
      oklch(0% 0 0 / 20%) 50%,
      transparent 100%
    );
    border-radius: var(--radius-xs);
    pointer-events: none;
  }

  .bento-sectors__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-default);
  }

  .bento-sectors__card:hover .bento-sectors__image {
    transform: scale(1.05);
  }

  .bento-sectors__title {
    position: relative;
    z-index: 1;
    padding: var(--space-m);
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .bento-sectors__card:first-child .bento-sectors__title {
    font-size: var(--text-xl);
  }

  /* Responsive: 2-col at tablet */
  @container bento-sectors (width < 56rem) {
    .bento-sectors__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 16rem 12rem 12rem;
    }
    .bento-sectors__card:first-child {
      grid-column: 1 / 3;
      grid-row: 1;
    }
  }

  /* Responsive: 1-col at phone */
  @container bento-sectors (width < 30rem) {
    .bento-sectors__grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, 10rem);
    }
    .bento-sectors__card:first-child {
      grid-column: auto;
      grid-row: auto;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     BENTO: SERVICES — 2-col, card 1 spans 2 rows (horizontal layout)
     ┌─────────────────────┬──────────────┐
     │                     │  R&D         │
     │    Testing          │              │
     │   (wide, 2 rows)    ├──────────────┤
     │                     │ Certification│
     └─────────────────────┴──────────────┘
     ════════════════════════════════════════════════════════════════════ */

  .bento-services {
    container-type: inline-size;
    container-name: bento-services;
  }

  .bento-services__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-xs);
  }

  .bento-services__card:first-child {
    grid-row: 1 / 3;
  }

  .bento-services__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-l);
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
  }

  /* Wide card (first) — horizontal layout */
  .bento-services__card:first-child {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-xl);
  }

  .bento-services__card:first-child .bento-services__body {
    flex: 1;
  }

  .bento-services__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xs);
    background: var(--surface-primary);
    color: var(--text-on-primary);
    flex-shrink: 0;
  }

  .bento-services__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .bento-services__title {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .bento-services__desc {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }

  .bento-services__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    text-decoration: none;
    margin-block-start: auto;
  }

  .bento-services__link:hover {
    color: var(--text-link-hover);
  }

  /* Responsive: stack all cards at tablet */
  @container bento-services (width < 48rem) {
    .bento-services__grid {
      grid-template-columns: 1fr;
    }
    .bento-services__card:first-child {
      grid-row: auto;
      flex-direction: column;
      padding: var(--space-l);
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     BENTO: CREDENTIALS — 4-col interleaved USP + Stats
     ┌──────────┬──────────┬─────────────────────┐
     │ USP 1    │ USP 2    │  STAT (2 cols)       │
     ├──────────┼──────────┼──────────┬──────────┤
     │ STAT     │ STAT     │ USP 3    │ USP 4    │
     └──────────┴──────────┴──────────┴──────────┘
     ════════════════════════════════════════════════════════════════════ */

  .bento-credentials {
    container-type: inline-size;
    container-name: bento-credentials;
  }

  .bento-credentials__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
  }

  /* Wide stat card spans 2 columns */
  .bento-credentials__card--wide {
    grid-column: span 2;
  }

  /* ── Shared card base ── */
  .bento-credentials__card {
    padding: var(--space-l);
    border-radius: var(--radius-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* ── USP card (light) ── */
  .bento-credentials__card--usp {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
  }

  .bento-credentials__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xs);
    background: color-mix(in oklch, var(--icon-color) 12%, transparent);
    color: var(--icon-color);
  }

  .bento-credentials__title {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .bento-credentials__desc {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }

  /* ── Stat card (teal) ── */
  .bento-credentials__card--stat {
    background: var(--surface-primary);
    color: var(--text-on-primary);
    justify-content: center;
    text-align: center;
  }

  .bento-credentials__number {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin: 0;
  }

  .bento-credentials__label {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    opacity: 0.8;
    margin: 0;
  }

  /* Wide stat card — horizontal layout */
  .bento-credentials__card--stat.bento-credentials__card--wide {
    flex-direction: row;
    align-items: center;
    gap: var(--space-m);
    text-align: left;
  }

  .bento-credentials__card--stat.bento-credentials__card--wide .bento-credentials__number {
    font-size: var(--heading-l);
  }

  /* Responsive: 2-col at tablet */
  @container bento-credentials (width < 56rem) {
    .bento-credentials__grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .bento-credentials__card--wide {
      grid-column: span 2;
    }
  }

  /* Responsive: 1-col at phone */
  @container bento-credentials (width < 30rem) {
    .bento-credentials__grid {
      grid-template-columns: 1fr;
    }
    .bento-credentials__card--wide {
      grid-column: auto;
    }
    .bento-credentials__card--stat.bento-credentials__card--wide {
      flex-direction: column;
      text-align: center;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     BENTO: FAQ + CONTACT — Side-by-side golden ratio
     ┌─────────────────────────┬──────────────────┐
     │   FAQ Accordion         │  Contact Form    │
     │   (wider, scrolls)      │  (sticky)        │
     └─────────────────────────┴──────────────────┘
     ════════════════════════════════════════════════════════════════════ */

  .bento-faq-contact {
    container-type: inline-size;
    container-name: bento-faq-contact;
  }

  .bento-faq-contact__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    max-inline-size: var(--content-width-narrow, 56.25rem);
    margin-inline: auto;
  }

  /* FAQ block — separator line below */
  .bento-faq-contact__faq {
    padding-block-end: var(--space-2xl);
    border-block-end: 1px solid var(--border-subtle);
  }

  /* Contact form — card-like appearance */
  .bento-faq-contact__form .contact-form {
    border-radius: var(--radius-m);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-s);
    padding: var(--space-xl);
    background: var(--white);
  }

  /* When FAQ is embedded, remove its section wrapper */
  .bento-faq-contact .faq-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

}