/* =========================================================
   Florica Column — article content added with the article maker
   (tools/記事メーカー.html).

   styles.css only styles what the design board shows: headings, paragraphs
   and one hand-cropped figure. Real manuscripts also contain lists, bold
   text, links and arbitrary photographs. These rules cover those elements
   only, so index.html and article.html render exactly as before.
   ========================================================= */

/* ---------- lists ---------- */
.article-body > ul,
.article-body > ol {
  margin-top: 24px;
  padding-left: 1.6em;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.article-body > ul { list-style: disc; }
.article-body > ol { list-style: decimal; }
.article-body > ul > li + li,
.article-body > ol > li + li { margin-top: 8px; }
.article-body > ul > li::marker,
.article-body > ol > li::marker { color: var(--blue-gray); }

/* ---------- inline ----------
   Text links only: the product block's "商品ページへ" sits in a <p> inside
   .article-body too, and must keep its button look. */
.article-body strong { font-weight: 700; }
.article-body p a:not(.button),
.article-body li a:not(.button) {
  color: var(--dark-blue-gray);
  text-decoration: underline;
  text-decoration-color: var(--grad-blue);
  text-underline-offset: 3px;
}
.article-body p a:not(.button):hover,
.article-body li a:not(.button):hover { color: var(--grad-peach); }

/* ---------- category strip with more tabs than the design ----------
   The design fits five tabs on one desktop row; the column has six
   (デリケートゾーンケア). Tighter tabs keep them all visible, and on phones the
   strip leaves room at its end for the SCROLL hint. */
@media (min-width: 1024px) {
  .chip-list:has(.chip:nth-child(6)) .chip { padding-inline: 18px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .chip-list:has(.chip:nth-child(6)) .chip { padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 1023px) {
  .chip-list { padding-right: 64px; }
  /* The SCROLL hint covers the tab under it instead of overlapping its letters. */
  .category-box__hint { width: 96px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 38%); }
}
/* Between 1024 and about 1180 px six tabs still overflow: keep the hint there too. */
@media (min-width: 1024px) {
  .category-box__hint { display: block; top: 1px; bottom: 1px; height: auto; width: 96px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 38%); }
}

/* ---------- line breaks ----------
   Avoid a single character alone on the last line of titles and headings. */
.article-hero__title,
.card__title,
.article-body > h2,
.article-body > h3,
.product-rec__label,
.product-rec__name,
.rank-item__title { text-wrap: pretty; }

/* ---------- long words ----------
   A pasted URL or a long run of letters must wrap instead of pushing the
   page sideways on a phone. */
.article-body,
.toc,
.article-hero__title,
.card__title { overflow-wrap: anywhere; }

/* ---------- photographs placed with [画像: ...] ----------
   styles.css crops the design board's single figure with fixed offsets at
   desktop width; that figure is marked data-crop in article.html. Every other
   photo, written by the tool or by hand, keeps its own proportions. */
.article-body figure:not([data-crop]) {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}
.article-body figure:not([data-crop]) img {
  position: static;
  width: 100%;
  max-width: 830px;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .article-body > ul,
  .article-body > ol {
    max-width: 830px;
    margin-top: 30px;
    margin-left: 51.5px;
    line-height: 30px;
    letter-spacing: 0.05em;
  }
  .article-body > h3 + ul,
  .article-body > h3 + ol { margin-top: 20px; }
  .article-body figure:not([data-crop]) { margin-left: 51.5px; max-width: 830px; }
}

/* ---------- eyecatch photographs ----------
   At desktop width styles.css places the board's sample photographs with
   measured offsets: the article hero shifts article-06.png 104 px left, and
   the list crops the sample card photos named by data-crop="figma-…". A real
   eyecatch would inherit the hero offset meant for the sample picture. Images
   written by the article maker carry data-fit="cover" and simply fill their
   frame (a card without data-crop already does; the rule below keeps cards
   made before that change the same). */
.card-grid .card[data-category] .card__media img[data-fit="cover"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* Below 1024 px the hero photo sits in the flow and sets its own height. */
@media (min-width: 1024px) {
  .article-hero__media img[data-fit="cover"] {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- a list that has no articles yet ----------
   The public list (public-index.html) starts with no cards and an empty
   "よく見られている記事". Until the first card is added, the list shows
   .empty-state--none instead of the category tabs, and an empty ranking is
   not shown on the list or on the articles that copy it. Plain CSS, so it
   also holds without JavaScript and in the article maker's preview. */
.empty-state--none { display: none; }
.card-grid:not(:has(.card)) ~ .empty-state--none { display: block; }
.column-main:not(:has(.card-grid .card)) .category-box { display: none; }
.sidebar__section:has(.rank-list):not(:has(.rank-list li)) { display: none; }
.sidebar__section:has(.rank-list):not(:has(.rank-list li)) + .sidebar__section { margin-top: 0; }