/* ==============================================
   Page-specific Styles
   ============================================== */

/* ---- Category LP: Strength ---- */

.cat-strength {
  background: var(--color-bg);
  padding: var(--space-section) 0;
}

.cat-strength__list {
  list-style: none;
}

.cat-strength__list li {
  padding: var(--space-sm) 0;
  padding-left: var(--space-lg);
  border-bottom: 1px solid var(--color-line);
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.cat-strength__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: var(--color-main);
  border-radius: 50%;
}

.cat-strength__list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 10px;
  border-bottom: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}

/* ---- Category LP: Items Grid ---- */

.cat-items {
  background: var(--color-bg-warm);
  padding: var(--space-section) 0;
}

.cat-items__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.cat-item {
  background: var(--color-bg);
  padding: var(--space-md);
  border-radius: 8px;
  text-align: center;
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-line);
}

@media (max-width: 768px) {
  .cat-items__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Flow Detail (page-flow.php) ---- */

.flow-detail {
  padding: var(--space-section) 0;
}

.flow-detail__step {
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
}

.flow-detail__step:last-child {
  border-bottom: none;
}

.flow-detail__step h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-sm);
}

.flow-detail__step p {
  line-height: var(--lh-base);
  margin-bottom: var(--space-sm);
}

.flow-detail__step ul {
  list-style: disc;
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}

.flow-detail__step li {
  line-height: var(--lh-base);
  margin-bottom: var(--space-xs);
}

/* ---- Area Detail (page-area.php) ---- */

.area-detail {
  padding: var(--space-section) 0;
}

.area-detail__intro {
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  margin-bottom: var(--space-xxl);
}

.area-detail__group {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-warm);
  border-radius: 8px;
  border-left: 4px solid var(--color-main);
}

.area-detail__group h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-xs);
}

.area-detail__group p {
  color: var(--color-text-sub);
  line-height: var(--lh-base);
}

/* ---- Company Detail (page-company.php) ---- */

.company-detail {
  padding: var(--space-section) 0;
}

.company-detail__greeting {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.company-detail__greeting p {
  line-height: var(--lh-base);
  margin-bottom: var(--space-sm);
}

/* ---- Page Content (generic) ---- */

.page-content {
  padding: var(--space-section) 0;
}

.page-content__title {
  text-align: center;
  margin-bottom: var(--space-xxl);
}

.page-content__body {
  line-height: var(--lh-base);
}

.page-content__body p {
  margin-bottom: var(--space-md);
}

.page-content__body h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.page-content__body h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.page-content__body ul,
.page-content__body ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.page-content__body li {
  line-height: var(--lh-base);
  margin-bottom: var(--space-xs);
}

/* ---- FAQ Page variant ---- */

.faq--page {
  padding-top: 0;
}

/* ---- Privacy Policy ---- */

.privacy-body h2 {
  font-size: var(--fs-h3);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-main);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.privacy-body ul {
  list-style: disc;
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.privacy-body li {
  line-height: var(--lh-base);
  margin-bottom: var(--space-xs);
}