/* Pick Up Section — HPP HP
 * Figma node: 102:91 (sec_pick-up), file: hTk2UtIZPusbWScukKNgMV
 * Section: 1441×795px, pt-96px pb-120px, gap-40px, white background
 */

/* =====================
 * Section container
 * ===================== */

.pickup {
  background-color: #ffffff;
  padding: 96px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* =====================
 * Section Title (reusable "title" component)
 * Figma node: 102:92
 * Container: 649×103px, centered
 * ===================== */

.pickup__title {
  position: relative;
  width: 649px;
  height: 103px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Large English text: "Pick Up"
 * Figma: Cormorant Garamond Medium, 96px, opacity 60%, color #dfedff
 * letter-spacing: 1.92px
 */
.pickup__title-en {
  position: absolute;
  inset: 0 0 6.8% 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;             /* Medium */
  font-size: 96px;
  line-height: 1;
  letter-spacing: 1.92px;
  color: #dfedff;
  opacity: 0.6;
  margin: 0;
}

/* Japanese subtitle: "ピックアップ"
 * Figma: Shippori Mincho SemiBold, 40px, color #1e4d8b
 * letter-spacing: 8px, font-feature-settings: palt
 * inset: 41.75% 35.75% 0 35.9%
 */
.pickup__title-ja {
  position: absolute;
  inset: 41.75% 35.75% 0 35.9%;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;             /* SemiBold */
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 8px;
  color: #1e4d8b;
  font-feature-settings: 'palt' 1;
  margin: 0;
}

/* =====================
 * Card container
 * Figma node: 102:93
 * x:155.5, y:239, width:1130 — 3 cards × 350px + 2 gaps × 40px = 1130px
 * ===================== */

.pickup__cards {
  display: flex;
  gap: 40px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: var(--layout-content-width); /* 1024px */
}

/* =====================
 * Card/media component
 * Figma nodes: 102:94, 102:95, 102:96
 * 350×340px, rounded-8px, gap-16px
 * ===================== */

.pickup__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 350px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-base);
}

.pickup__card:hover {
  opacity: 0.85;
}

/* Thumbnail image area
 * Figma: bg #d0d1d5, h-197px, rounded-8px
 */
.pickup__card-image {
  background-color: #d0d1d5;
  width: 100%;
  aspect-ratio: 350 / 197;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 白地のサムネイル（例: リニューアルのお知らせ）が白背景に溶けないよう
   * 内側に薄い輪郭を引く */
  box-shadow: inset 0 0 0 1px rgba(26, 35, 50, 0.16);
}

.pickup__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder label (shown when no image) */
.pickup__card-image-placeholder {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);   /* 12px */
  line-height: var(--line-height-base);
  letter-spacing: 0.6px;
  color: #1e3a8a;
}

/* Card body: date + title + excerpt */
.pickup__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

/* Date meta group: gap-4px */
.pickup__card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Date text
 * Figma: Inter Medium 12px, color #929296, letter-spacing 0.6px, lh 1.75
 */
.pickup__card-date {
  font-family: 'Inter', var(--font-jp-sans);
  font-weight: 500;             /* Medium */
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.6px;
  color: #929296;
  width: 100%;
  margin: 0;
}

/* Card title
 * Figma: Noto Sans JP Bold 16px, color #1e4d8b, letter-spacing 0.48px
 * lh 1.5, h-48px (2 lines), overflow hidden + ellipsis
 */
.pickup__card-title {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.48px;
  color: #1e4d8b;
  width: 100%;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}

/* Card excerpt
 * Figma: Noto Sans JP Regular 13px, color #717983, letter-spacing 0.65px
 * lh 1.75, h-46px (~2 lines), overflow hidden + ellipsis
 */
.pickup__card-excerpt {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.65px;
  color: #717983;
  width: 100%;
  height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}

/* =====================
 * CTA Button
 * Figma node: 102:97
 * 256×56px, border #1e4d8b 1px solid, rounded-[40px]
 * Text: "もっと見る", Noto Sans JP Bold 16px, color #1e4d8b
 * ===================== */

.pickup__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  height: 56px;
  border: 1px solid #1e4d8b;
  border-radius: 40px;
  flex-shrink: 0;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.pickup__cta:hover {
  background-color: #1e4d8b;
}

.pickup__cta:hover .pickup__cta-label {
  color: #ffffff;
}

.pickup__cta-label {
  font-family: var(--font-jp-sans);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 1.75;
  color: #1e4d8b;
  white-space: nowrap;
  text-align: center;
  transition: color var(--transition-base);
}