@charset "UTF-8";

/*
 * Common work card (1.0.23): the single source of truth for the card
 * body's DOM styling (.work-card and everything inside it), used by every
 * page that renders inc/work-view.php's hdchild_work_card() output --
 * either directly (episode/single/omnibus pages, series master page) or
 * through inc/sale-index.php's hdtheme_work_card()/hdtheme_sale_card()/
 * inc/entity-pages.php's hdtheme_entity_work_card() wrappers (front page,
 * sale index, search results, circle/creator pages).
 *
 * Why this file exists: 1.0.22 unified the card's HTML renderer
 * (hdchild_work_card()) but left the card's CSS duplicated across five
 * separate page-scoped stylesheets (work-pages.css, home.css,
 * sale-index.css, entity-pages.css, series-master-v42.css), each an
 * independently-maintained copy. Production QA on 1.0.22 found real
 * consequences of that duplication:
 *
 * - The front page's .work-card never received position:relative in
 *   practice (a duplication/omission specific to that page's copy), so
 *   .card-link's position:absolute;inset:0 resolved against the
 *   viewport (the nearest positioned ancestor, i.e. none) instead of the
 *   card -- a full-viewport transparent overlay sitting on top of the
 *   header, search, intro text, carousel arrows, and every other card.
 * - The circle/creator pages' copy of .work-body never matched the
 *   canonical flex-column/padding values (display:block;padding:0
 *   instead of display:flex;flex-direction:column;padding:8px 6px 9px),
 *   so content stretched edge-to-edge instead of matching the approved
 *   card.
 * - The series master page's related-work rails never adopted the fixed
 *   230px/163px card width from the 1.0.16 density redesign at all --
 *   they were intentionally deferred at the time (see
 *   release-records/theme-independent-1.0.16-common-work-card-density.md's
 *   "スコープの判断" section) and still used the pre-redesign 3-column
 *   percentage layout (flex:0 0 calc((100% - 20px) / 3)).
 * - Even where a page-scoped copy visually looked right, tracing the
 *   actual cascade winner in work-pages.css turned up two properties
 *   whose *declared* .hscroll-track-scoped value is not what actually
 *   renders: .work-circle + .work-price (an equal-specificity, later-
 *   declared sibling-combinator rule) wins over .hscroll-track .work-price
 *   for margin-top (6px, not the 5px .hscroll-track itself declares), and
 *   .hscroll-track .work-title's margin:0 (higher specificity) overrides
 *   the base rule's margin-bottom:2px entirely. The five page-scoped
 *   copies these values were built from did not all inherit this
 *   distinction consistently.
 *
 * This file is the fix for the underlying structure, not a one-off patch:
 * every page enqueues it (functions.php's hdtheme_enqueue_assets(), with
 * this file declared as a dependency of each page-specific stylesheet
 * below, guaranteeing WordPress always outputs it first), and each page's
 * own stylesheet keeps only genuinely layout-specific rules -- carousel
 * vs. wrapping grid, gap, container width, headings/nav/pagination,
 * current-card highlight state, and the circle/creator pages'
 * entity_link data wiring (which term is linked, not how the link is
 * styled -- .work-entity-link's own appearance lives here, shared with
 * .work-circle, since it occupies the exact same DOM slot).
 *
 * Values below are the actual production-computed values traced through
 * work-pages.css's real cascade (not simply its .hscroll-track-scoped
 * declarations), confirmed against every page's real DOM (hdchild_work_card()
 * is now the only renderer). Color tokens use the --hd-c-* custom
 * properties style.css's :root already defines globally (loaded on every
 * page as the very first enqueued stylesheet), so this file needs no
 * token block of its own. --fanza is not a global token (only declared
 * locally inside each page-scoped file's own :root-equivalent selector,
 * per work-pages.css's/sale-index.css's own established pattern), so its
 * resolved value (#f97316) is hardcoded here too, matching that pattern
 * rather than introducing a new global token.
 */

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--hd-c-border-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(44, 94, 71, .08);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Hover/focus: border + shadow only, no movement (no translateY) --
   position-stationary hover policy for every vertical work card on this
   theme. :focus-within matches mouse hover when tabbing to the card link
   or the FANZA button inside it. */
.work-card:hover,
.work-card:focus-within {
  border-color: var(--hd-c-main);
  box-shadow: 0 6px 20px rgba(44, 94, 71, .14);
}

.work-card:hover .work-title,
.work-card:focus-within .work-title {
  color: var(--hd-c-dark);
}

@media (prefers-reduced-motion: reduce) {
  .work-card {
    transition: none;
  }
}

/* Card-wide clickable link. Its containing block is .work-card's own
   position:relative above -- this rule alone can never expand past the
   card itself, in any page's layout (carousel or grid), as long as
   .work-card keeps that position:relative. */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.work-cov {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 700;
}

/* 1.0.41: サムネイル画像が存在するカードでは、object-fit:contain の
   レターボックス/ピラーボックス部分から旧来の緑グラデーション（プレー
   スホルダー用の .work-cov--empty 背景）が透けて見えていた
   (release-records/theme-independent-1.0.41-work-cover-background-fix.md)。
   画像の有無は inc/work-view.php の hdchild_work_card() が明示的な
   modifier class として出し分ける -- ここでは画像ありは transparent
   （カード背景色や将来のUI変更に自然に追従させるため）、画像なしのみ
   従来の緑グラデーションを維持する。 */
.work-cov--has-image {
  background: transparent;
}

.work-cov--empty {
  background: linear-gradient(135deg, var(--hd-c-main), color-mix(in srgb, var(--hd-c-main) 58%, #000));
}

.work-cov img,
.work-cov-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 6px 9px;
}

.work-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.35em;
  margin: 0;
  color: #333;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

.work-title .ep-inline {
  color: var(--hd-c-main);
  font-weight: 700;
}

.work-title .ep-sep {
  margin: 0 1px;
  color: var(--hd-c-border);
  font-weight: 400;
}

/* .work-circle (plain circle-name text) and .work-entity-link (the
   circle/creator pages' linked cross-reference that replaces it -- never
   both at once, see hdchild_work_card()'s own docblock) occupy the exact
   same DOM slot and share the exact same spacing/sizing here; only
   .work-entity-link additionally needs an underline, its own link color,
   and to sit above .card-link (z-index) so it stays independently
   clickable. */
.work-circle,
.work-entity-link {
  display: block;
  min-height: 1.3em;
  margin-top: 4px;
  overflow: hidden;
  color: #555555;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

.work-entity-link {
  position: relative;
  z-index: 2;
  color: var(--hd-c-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* margin-top:6px (not work-pages.css's .hscroll-track-scoped 5px): the
   real, actually-rendered value on every existing card with a circle or
   entity-link -- work-pages.css's own .work-circle + .work-price sibling-
   combinator rule (equal specificity to .hscroll-track .work-price,
   declared later in that file) already wins there today. Declared
   unconditionally here (not only after .work-circle/.work-entity-link)
   so a card with neither (no circle term) still gets the same spacing
   above its price -- matching work-pages.css's own plain .work-price
   base rule, which also declares margin-top:6px. */
.work-price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.rrp-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 17px;
}

.rrp-main .now {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.rrp-main .now.sale {
  color: var(--hd-c-sale);
}

.rrp-main .off-rate {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--hd-c-sale);
  color: #fff;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.work-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
}

.work-fanza {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s;
}

.work-fanza:hover {
  background: color-mix(in srgb, #f97316 80%, #000);
}

.work-fanza svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * 1.0.24: this file no longer sets .work-card's own width. Through 1.0.23
 * it set a single fixed width (163px SP / 230px PC) unconditionally for
 * every .work-card everywhere, correct for the horizontal carousels
 * (episode/single/omnibus/series-master rails, the front page's two
 * carousels) but wrong once the wrapping-grid pages (sale index, search,
 * circle, creator) needed a *responsive* max-width instead -- a fixed
 * width cannot shrink to fit a narrower row of 4/2 columns without
 * causing horizontal overflow. Width is now each layout's own concern:
 * - Carousel pages set flex:0 0 230px/163px on .work-card themselves
 *   (work-pages.css's .hscroll-track, series-master-v42.css's
 *   .hd-master-related .hscroll-track, home.css's .hd-home-hscroll) --
 *   flex-basis alone fixes the width in a flex row, so this file adding
 *   its own width would be redundant, not required.
 * - Grid pages (sale-index.css's .sale-grid, entity-pages.css's
 *   .entity-grid) size each column via grid-template-columns:
 *   repeat(4, minmax(0,240px)) PC / repeat(2, minmax(0,170px)) SP -- the
 *   grid's default stretch alignment then sizes .work-card to fill that
 *   track automatically, with minmax(0,...)'s 0 floor letting it shrink
 *   below the max when the available row width is narrower, instead of
 *   forcing a fixed width that would overflow.
 * Every other property below (typography, FANZA button dimensions) is
 * still shared unconditionally -- only the numeric width itself moved
 * out.
 */
@media (max-width: 900px) {
  .work-title {
    font-size: 11.5px;
    letter-spacing: -0.01em;
  }

  .work-circle,
  .work-entity-link {
    font-size: 10px;
  }

  .rrp-main .now {
    font-size: 13px;
  }

  .rrp-main .off-rate {
    font-size: 9.5px;
  }

  .work-fanza {
    padding: 7px 13px;
    min-height: 34px;
    min-width: auto;
    width: auto;
    flex: none;
    font-size: 12.5px;
  }

  .work-fanza svg {
    width: 12px;
    height: 12px;
  }
}