/**
 * B-type daily: lunch + scenery (SNS one-frame).
 */

.cl-daily-empty {
  margin: 0.75rem 0 0;
  color: var(--color-neutral-solid-gray-600, #666);
  font-size: 0.95rem;
}

/*
 * Keep scroll inside the feed. Do NOT set section overflow-x: visible —
 * html/body/.cl-main use overflow-x: clip, which would hard-cut the cards
 * and kill horizontal swipe.
 */
.cl-main > .cl-sec.cl-sec--lunch,
.cl-main > section.cl-sec--lunch,
.cl-main > .cl-sec.cl-sec--scenery,
.cl-main > section.cl-sec--scenery {
  min-width: 0;
  max-width: 100%;
}

.cl-sec--lunch .cl-sec__inner,
.cl-sec--scenery .cl-sec__inner,
.cl-sec--lunch > *:not(.cl-sec__inner),
.cl-sec--scenery > *:not(.cl-sec__inner) {
  min-width: 0;
  max-width: 100%;
}

/* —— 今日の昼食 / 風景：等幅カードの横スクロール —— */
.cl-lunch-feed,
.cl-frame-feed {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
  margin-top: 1rem;
  margin-inline: 0;
  padding-bottom: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.cl-lunch-feed__item,
.cl-frame-feed__item {
  flex: 0 0 16.5rem;
  width: 16.5rem;
  max-width: none;
  min-width: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.cl-lunch-tile {
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cl-lunch-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-decoration: none !important;
  color: inherit;
}

.cl-lunch-tile__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--cl-brand-soft, #eaf6ef);
  aspect-ratio: 4 / 3;
  max-width: 100%;
  min-width: 0;
}

.cl-lunch-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  object-fit: cover;
  pointer-events: none;
}

.cl-lunch-tile__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  padding: 0.2rem 0.55rem;
  border-radius: 0.25rem;
  background: var(--cl-brand, #2f8f5b);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.cl-lunch-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.15rem 0;
  min-width: 0;
}

.cl-lunch-tile__date {
  color: var(--color-neutral-solid-gray-600, #666);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cl-lunch-tile__caption {
  color: var(--cl-text-strong, #1a1a1a);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cl-lunch-tile.is-today .cl-lunch-tile__media {
  box-shadow: 0 0 0 2px var(--cl-brand, #2f8f5b);
}

.cl-lunch-card--single {
  max-width: min(28rem, 100%);
  margin-inline: auto;
  min-width: 0;
}

.cl-lunch-card--single .cl-lunch-tile__media {
  aspect-ratio: 4 / 3;
}

.cl-lunch-card--single .cl-lunch-tile__caption {
  font-size: 1.125rem;
  -webkit-line-clamp: 3;
}

/* Archive: wrap grid of same tiles */
.cl-daily-archive .cl-lunch-feed,
.cl-daily-archive .cl-frame-feed {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
  width: 100%;
}

.cl-daily-archive .cl-lunch-feed__item,
.cl-daily-archive .cl-frame-feed__item {
  flex: 1 1 14rem;
  width: auto;
  max-width: 18rem;
}

/* Legacy archive list class (patterns) */
.cl-lunch-recent {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 100%;
}

.cl-lunch-recent--archive {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cl-lunch-recent--archive > .cl-lunch-feed__item,
.cl-lunch-recent--archive .cl-lunch-tile {
  flex: 1 1 14rem;
  max-width: 18rem;
}

/* —— 風景（SNS一コマ） —— */
.cl-frame {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-neutral-solid-gray-200, #ccc);
  border-radius: 0.85rem;
  overflow: hidden;
}

.cl-frame__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  min-width: 0;
}

.cl-frame__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%),
    linear-gradient(145deg, var(--cl-brand, #2f8f5b), var(--cl-brand-mid, #5fad82));
}

.cl-frame__meta {
  min-width: 0;
}

.cl-frame__name {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-text-strong, #1a1a1a);
  overflow-wrap: anywhere;
}

.cl-frame__date {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--color-neutral-solid-gray-600, #666);
}

.cl-frame__media {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--color-neutral-solid-gray-100, #e6e6e6);
  aspect-ratio: 1;
  overflow: hidden;
}

.cl-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  object-fit: cover;
  pointer-events: none;
}

.cl-frame__caption {
  display: block;
  margin: 0;
  padding: 0.75rem 0.85rem 0.95rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cl-text-strong, #1a1a1a);
  overflow-wrap: anywhere;
  text-align: left;
}

/* Single / archive */
.cl-daily-archive {
  box-sizing: border-box;
  max-width: var(--cl-grid-max, 64rem);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--cl-grid-pad, 1rem);
  min-width: 0;
}

.cl-daily-single {
  max-width: min(36rem, 100%);
  margin-inline: auto;
  min-width: 0;
}

.cl-daily-single .cl-lunch-card,
.cl-daily-single .cl-frame {
  max-width: none;
}

/*
 * SP: フォーカスリングが clip 端で欠けて文字に重ならないよう、端に余白を残す。
 * 次カードをはっきり覗かせる（約 2.5rem）。100vw は使わない。
 */
@media (max-width: 40rem) {
  .cl-lunch-feed,
  .cl-frame-feed {
    --cl-feed-inset: 0.4rem;
    margin-inline: calc(-1 * var(--cl-grid-pad, 1rem) + var(--cl-feed-inset));
    padding-inline: var(--cl-feed-inset);
    scroll-padding-inline: var(--cl-feed-inset);
    width: auto;
    max-width: none;
  }

  .cl-lunch-feed__item,
  .cl-frame-feed__item {
    flex: 0 0 calc(100% - 2.5rem);
    width: calc(100% - 2.5rem);
    max-width: calc(100% - 2.5rem);
    padding: 0.35rem;
    box-sizing: border-box;
  }

  .cl-lunch-tile__body {
    padding: 0.65rem 0.35rem 0.1rem;
  }

  .cl-daily-archive .cl-lunch-feed,
  .cl-daily-archive .cl-frame-feed {
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
    max-width: 100%;
  }

  .cl-daily-archive .cl-lunch-feed__item,
  .cl-daily-archive .cl-frame-feed__item {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}