/**
 * Examples Section
 * 導入例セクションのスタイル
 */

/* ========================================
   Section Wrapper
======================================== */
.lp01-examples {
  padding: var(--wp--preset--spacing--4-xl) 0;
  background-color: var(--wp--preset--color--gray-lightest);
}

.lp01-examples__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--3-xl);
}

/* ========================================
   Examples Grid
======================================== */
.lp01-examples__grid {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  grid-template-columns: 1fr;
}

.lp01-example-card {
  display: flex;
  flex-direction: column;
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border-radius--xl);
  border: 1px solid var(--wp--custom--overlay--primary--2);
  overflow: hidden;
  isolation: isolate;
}

.lp01-example-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.lp01-example-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp01-example-card__icon {
  position: absolute;
  inset: var(--wp--preset--spacing--sm) auto auto var(--wp--preset--spacing--sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--wp--custom--border-radius--full);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--lg);
}

.lp01-example-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--base);
}

.lp01-example-card__title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--text);
}

.lp01-example-card__price {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  letter-spacing: var(--wp--custom--letter-spacing--sm);
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
}

.lp01-example-card__amount {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--text);
}

.lp01-example-card__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray);
  line-height: var(--wp--custom--line-height--lg);
}

/* ========================================
   Highlight Card
======================================== */
.lp01-examples__highlight {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  padding: var(--wp--preset--spacing--lg);
  background: linear-gradient(
    135deg,
    rgba(200, 131, 159, 0.16),
    rgba(200, 131, 159, 0.04)
  );
  border-radius: var(--wp--custom--border-radius--2-xl);
  border: 1px solid var(--wp--custom--overlay--primary--2);
}

.lp01-examples__highlight-media {
  position: relative;
  border-radius: var(--wp--custom--border-radius--xl);
  overflow: hidden;
  aspect-ratio: 2 / 1;
}

.lp01-examples__highlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp01-examples__highlight-icon {
  position: absolute;
  inset: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm) auto auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wp--custom--border-radius--full);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--lg);
}

.lp01-examples__highlight-content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}

.lp01-examples__highlight-title {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--text);
}

.lp01-examples__highlight-text {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--gray-dark);
  line-height: var(--wp--custom--line-height--lg);
}

/* ========================================
   Responsive
======================================== */
@media (min-width: 640px) {
  .lp01-examples__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp01-example-card__content {
    padding: var(--wp--preset--spacing--base);
  }
}

@media (min-width: 1024px) {
  .lp01-examples__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp01-examples__highlight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    padding: var(--wp--preset--spacing--2-xl);
  }

  .lp01-examples__highlight-media {
    aspect-ratio: 5 / 3;
  }
}

@media (max-width: 639px) {
  .lp01-example-card__icon,
  .lp01-examples__highlight-icon {
    width: 48px;
    height: 48px;
    font-size: var(--wp--preset--font-size--base);
  }
}