/* Studio Hana — Skin Concerns page, built against the approved mockup. */

.concerns-hero {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: var(--hana-max);
  margin-inline: auto;
  padding: clamp(12px, 2vw, 24px) var(--hana-gutter) clamp(40px, 5vw, 72px);
}

.concerns-hero__title {
  margin: 10px 0 14px;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.concerns-hero__sub {
  margin: 0 0 26px;
  max-width: 44ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--hana-ink-soft);
}

.concerns-hero__media {
  aspect-ratio: 1585 / 992;
  background: var(--hana-card);
}

.concerns-head {
  max-width: var(--hana-max);
  margin-inline: auto;
  padding: 0 var(--hana-gutter) clamp(20px, 2.4vw, 32px);
}

.concerns-head .section-title { margin-top: 8px; }
.concerns-head p { margin: 8px 0 0; font-size: clamp(15px, 1.15vw, 17px); color: var(--hana-ink-soft); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.concerns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: var(--hana-max);
  margin-inline: auto;
  padding: 0 var(--hana-gutter) clamp(24px, 3vw, 40px);
}

.concern {
  display: block;
  border: 1px solid var(--hana-line-soft);
  border-radius: var(--hana-radius-card);
  background: #fffefa;
  overflow: hidden;
  color: var(--hana-ink);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-enter), box-shadow var(--dur-base) var(--ease-enter);
}

.concern:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(24, 32, 20, 0.08);
}

.concern__media {
  position: relative;
  display: block;
  overflow: hidden;
}

.concern__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1620 / 971;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-enter);
}

.concern:hover .concern__media img { transform: scale(1.04); }

.concern__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fffefa;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(24, 32, 20, 0.12);
}

.concern__body {
  display: block;
  padding: 18px 20px 22px;
}

.concern__title {
  display: block;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.concern__text {
  display: block;
  margin: 6px 0 12px;
  max-width: 52ch;
  color: var(--hana-ink-soft);
  line-height: 1.5;
}

.concern__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* ── Band ─────────────────────────────────────────────────────────────────── */

.concerns-band-wrap {
  max-width: var(--hana-max);
  margin-inline: auto;
  padding: 0 var(--hana-gutter) clamp(16px, 2vw, 28px);
}

.concerns-band {
  position: relative;
  width: 100%;
  aspect-ratio: 2128 / 739;
  overflow: hidden;
  border-radius: var(--hana-radius-panel);
  background: #BAE3FD;
}

.concerns-band__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concerns-band__copy {
  position: absolute;
  left: 4.5%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
}

.concerns-band__title {
  margin: 10px 0 8px;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.concerns-band__copy p { margin: 0 0 22px; font-size: clamp(15px, 1.2vw, 18px); }

.concerns-band .pill-button { background: var(--hana-olive); }

/* ── Help row ─────────────────────────────────────────────────────────────── */

.concerns-help {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--hana-max);
  margin-inline: auto;
  padding: clamp(18px, 2.2vw, 28px) var(--hana-gutter) clamp(40px, 5vw, 64px);
}

.concerns-help__title { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; }
.concerns-help__text { flex: 1; min-width: 240px; font-size: 14px; color: var(--hana-ink-soft); }

@media (max-width: 860px) {
  .concerns-hero { grid-template-columns: 1fr; }
  .concerns-grid { grid-template-columns: 1fr; }
  /* Copy drops below the artwork on phones, like the homepage band. */
  .concerns-band { aspect-ratio: auto; }
  .concerns-band__art { height: auto; aspect-ratio: 2128 / 739; object-position: right center; }
  .concerns-band__copy { position: static; width: auto; transform: none; padding: 22px 24px 26px; }
}