/* ==========================================================================
   onesta/grid — BEM style sheet
   ========================================================================== */

.onesta-grid {
  container-type: inline-size;
  container-name: onesta-grid;
  box-sizing: border-box;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--wp--style--global--wide-size, 75rem);
  padding-block: clamp(1.25rem, 4vi, var(--wp--preset--spacing--60, 2rem));

  --onesta-grid-gap: var(--grid-gap, 1rem);
}

.onesta-grid .onesta-grid__items {
    --onesta-grid-item-min: max(15rem, var(--onesta-grid-small-target, 100%));

    display: grid;
    gap: var(--onesta-grid-gap, 1rem);
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--onesta-grid-item-min)), 1fr)
    );
    padding-inline: clamp(0.75rem, 2vi, var(--wp--preset--spacing--40, 1rem));
  }

.onesta-grid.onesta-grid--cols-1 {
    --onesta-grid-wide-target: 100%;
  }

.onesta-grid.onesta-grid--cols-2 {
    --onesta-grid-wide-target: calc((100% - var(--onesta-grid-gap)) / 2);
  }

.onesta-grid.onesta-grid--cols-3 {
    --onesta-grid-wide-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 3
    );
  }

.onesta-grid.onesta-grid--cols-4 {
    --onesta-grid-wide-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 4
    );
  }

.onesta-grid.onesta-grid--cols-5 {
    --onesta-grid-wide-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap)
        ) / 5
    );
  }

.onesta-grid.onesta-grid--cols-6 {
    --onesta-grid-wide-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap) - var(--onesta-grid-gap)
        ) / 6
    );
  }

.onesta-grid.onesta-grid--cols-md-1 {
    --onesta-grid-medium-target: 100%;
  }

.onesta-grid.onesta-grid--cols-md-2 {
    --onesta-grid-medium-target: calc((100% - var(--onesta-grid-gap)) / 2);
  }

.onesta-grid.onesta-grid--cols-md-3 {
    --onesta-grid-medium-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 3
    );
  }

.onesta-grid.onesta-grid--cols-md-4 {
    --onesta-grid-medium-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 4
    );
  }

.onesta-grid.onesta-grid--cols-md-5 {
    --onesta-grid-medium-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap)
        ) / 5
    );
  }

.onesta-grid.onesta-grid--cols-md-6 {
    --onesta-grid-medium-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap) - var(--onesta-grid-gap)
        ) / 6
    );
  }

.onesta-grid.onesta-grid--cols-sm-1 {
    --onesta-grid-small-target: 100%;
  }

.onesta-grid.onesta-grid--cols-sm-2 {
    --onesta-grid-small-target: calc((100% - var(--onesta-grid-gap)) / 2);
  }

.onesta-grid.onesta-grid--cols-sm-3 {
    --onesta-grid-small-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 3
    );
  }

.onesta-grid.onesta-grid--cols-sm-4 {
    --onesta-grid-small-target: calc(
      (100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap)) / 4
    );
  }

.onesta-grid.onesta-grid--cols-sm-5 {
    --onesta-grid-small-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap)
        ) / 5
    );
  }

.onesta-grid.onesta-grid--cols-sm-6 {
    --onesta-grid-small-target: calc(
      (
          100% - var(--onesta-grid-gap) - var(--onesta-grid-gap) - var(--onesta-grid-gap) -
            var(--onesta-grid-gap) - var(--onesta-grid-gap)
        ) / 6
    );
  }

.onesta-grid.onesta-grid--gap-none {
    --onesta-grid-gap: 0;
  }

.onesta-grid.onesta-grid--gap-sm {
    --onesta-grid-gap: 1rem;
  }

.onesta-grid.onesta-grid--gap-md {
    --onesta-grid-gap: 1.5rem;
  }

.onesta-grid.onesta-grid--gap-lg {
    --onesta-grid-gap: 2rem;
  }

/* ── Grid item: 高さ整列（flex コンテナ化） ── */

.onesta-grid .onesta-grid__item {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

.onesta-grid .onesta-grid__item > * {
    flex: 1;
    min-inline-size: 0;
  }

/* ── Link item: カード型リンクのパディング + マージン調整 ── */

.onesta-grid a.onesta-grid__item {
    padding: var(--wp--preset--spacing--40, 1rem);
    text-decoration: none;
    color: inherit;
  }

.onesta-grid a.onesta-grid__item > *:first-child {
    margin-top: 0;
  }

.onesta-grid a.onesta-grid__item > *:last-child {
    margin-bottom: 0;
  }

/* ── Shadow variants ── */

.onesta-grid.onesta-grid--shadow-sm .onesta-grid__item {
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  }

.onesta-grid.onesta-grid--shadow-md .onesta-grid__item {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  }

.onesta-grid.onesta-grid--shadow-lg .onesta-grid__item {
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
  }

/* ── Radius variants ── */

.onesta-grid.onesta-grid--radius-sm .onesta-grid__item {
    border-radius: 6px;
  }

.onesta-grid.onesta-grid--radius-md .onesta-grid__item {
    border-radius: 10px;
  }

.onesta-grid.onesta-grid--radius-lg .onesta-grid__item {
    border-radius: 16px;
  }

/* ── Hover effect (Apple流: scale で浮き上がり) ── */

.onesta-grid.onesta-grid--hover .onesta-grid__item {
    transition:
      transform var(--onesta-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow var(--onesta-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

.onesta-grid.onesta-grid--hover .onesta-grid__item:hover {
    transform: scale(1.02);
    box-shadow:
      0 8px 24px rgb(0 0 0 / 0.1),
      0 2px 8px rgb(0 0 0 / 0.06);
  }

@supports (padding: 1cqi) {

.onesta-grid {
    padding-block: clamp(
      1.25rem,
      4cqi,
      var(--wp--preset--spacing--60, 2rem)
    );
}

    .onesta-grid .onesta-grid__items {
      padding-inline: clamp(
        0.75rem,
        2cqi,
        var(--wp--preset--spacing--40, 1rem)
      );
    }
  }

/* ── Container-responsive enhancement ── */

@container onesta-grid (inline-size >= 600px) {
    .onesta-grid .onesta-grid__items {
      --onesta-grid-item-min: max(
        10rem,
        var(--onesta-grid-medium-target, 100%)
      );
    }
  }

@container onesta-grid (inline-size >= 900px) {
    .onesta-grid .onesta-grid__items {
      --onesta-grid-item-min: max(7rem, var(--onesta-grid-wide-target, 100%));
    }
  }

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    .onesta-grid.onesta-grid--hover .onesta-grid__item {
      transition: none;
    }
    .onesta-grid.onesta-grid--hover .onesta-grid__item:hover {
      transform: none;
    }
  }