/*
 * Koimoi Diary: the Movie / TV card, plus the home page blocks
 * (diary/includes/home-blocks.php).
 *
 * The card rules here are the only copy. diary.css depends on this file, so
 * every page that shows a card (home rows, Browse, Browse TV, Search, title
 * pages, Dashboard) gets the same card; the home page loads this file alone.
 * The row, Previous/Next and call-out rules are scoped to .kd-home-row /
 * .kd-home-callout so nothing else on the home page is touched.
 */

.kd-home-row,
.kd-home-callout {
    --kd-serif: 'Open Sans', arial, sans-serif;
    --kd-mono:  'Open Sans', arial, sans-serif;
    --kd-red:   #d6242b;
    font-family: 'Open Sans', arial, sans-serif;
}

/* -- row ------------------------------------------------------------------ */

/* A single grid track of minmax(0, 1fr) keeps the scrolling row from
   widening the page column: without it the cards' combined width becomes
   the column's minimum width, and on a phone the View all link and the
   call-out's button end up off screen. */
.kd-home-row {
    --kd-home-card-w: 132px;
    display: grid; grid-template-columns: minmax(0, 1fr);
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0 0 24px;
}

.kd-home-row-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0 0 10px;
}
.kd-home-row .kd-home-row-title {
    margin: 0; padding: 0;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 13px; font-weight: 700; line-height: 1.3;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--kd-red);
}
.kd-home-row .kd-home-row-all {
    font-size: 12px; font-weight: 600; white-space: nowrap;
    color: var(--kd-red); text-decoration: none;
}
.kd-home-row .kd-home-row-all:hover { text-decoration: underline; }

.kd-home-row .kd-similar-row {
    display: flex; gap: 12px;
    overflow-x: auto; padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    cursor: grab;
}
.kd-home-row .kd-similar-row::-webkit-scrollbar { display: none; }
.kd-home-row .kd-similar-row.kd-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.kd-home-row .kd-similar-row img { -webkit-user-drag: none; }

/* -- previous / next ------------------------------------------------------ */

/* Small half-white tabs (client feedback, 12 Oct 2026: smaller, background
   rgba(255, 255, 255, .5)), flush with the row's edge and rounded on the
   inside, so the poster shows through. No shadow, which would darken the
   see-through white. Centred on the posters rather than the whole card,
   since titles run to one or two lines: the row's 4px top padding plus half
   of a 2:3 poster. The row script unhides each one only while the row can
   still scroll that way. */
.kd-home-row .kd-home-row-track { position: relative; min-width: 0; }
.kd-home-row .kd-home-row-nav {
    position: absolute; z-index: 2;
    top: calc(4px + var(--kd-home-card-w) * 3 / 4);
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 36px; margin: 0; padding: 0;
    border: 0; background: rgba(255, 255, 255, .5); color: #111;
    line-height: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.kd-home-row .kd-home-row-prev { left: 0;  border-radius: 0 6px 6px 0; }
.kd-home-row .kd-home-row-next { right: 0; border-radius: 6px 0 0 6px; }
.kd-home-row .kd-home-row-nav[hidden] { display: none; }
.kd-home-row .kd-home-row-nav:hover { color: var(--kd-red); }
.kd-home-row .kd-home-row-nav:focus-visible { outline: 2px solid var(--kd-red); outline-offset: -2px; }
.kd-home-row .kd-home-row-nav svg { display: block; width: 16px; height: 16px; }

/* -- card ----------------------------------------------------------------- */

/* The one Movie / TV card look (part-movie-card.php). diary.css loads after
   this file, so its page-level rules (onboarding's vote tiles, the title
   pages' row width) still override it. Selectors start at .kd-card or
   .kd-card-stats so the theme's own h4 and link rules on ordinary pages
   cannot reach the card (19 Oct 2026). */
.kd-card {
    display: flex; flex-direction: column;
    border: 0; background: none; border-radius: 0; overflow: visible;
}
.kd-card .kd-card-poster {
    display: block; position: relative;
    aspect-ratio: 2 / 3; background: #f2f2f2;
    border-radius: 6px; overflow: hidden;
}
.kd-card .kd-card-poster img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.kd-card .kd-card-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 7px 0 0; gap: 4px;
}
.kd-card .kd-card-title {
    margin: 0; padding: 0;
    font-family: var(--kd-serif, 'Open Sans', arial, sans-serif);
    font-size: 14px; font-weight: 700; line-height: 1.2;
}
.kd-card .kd-card-title a { color: #111; text-decoration: none; }
.kd-card .kd-card-title a:hover { color: var(--kd-red, #d6242b); }
/* The stats line is also the Dashboard suggestions' Watch %, outside a card. */
.kd-card-stats {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    font-family: var(--kd-mono, 'Open Sans', arial, sans-serif);
    font-size: 13px; line-height: 1; color: #9a9a9a;
}
/* Thumb and star are one size (16 px) and centred on the 13 px numbers
   (client, 19 Oct 2026). The thumb's drawing sits 1 unit above the middle
   of its 24-unit box, so the rotated thumbs-down sat 2 units lower than the
   thumbs-up; both are nudged to the middle. The star is an SVG on the same
   grid, nudged half a unit. */
.kd-card-stats .kd-card-verdict { display: inline-flex; align-items: center; gap: 4px; }
.kd-card-stats .kd-card-verdict svg,
.kd-card-stats .kd-card-rating .kd-star svg { display: block; width: 16px; height: 16px; }
.kd-card-stats .kd-card-thumb { display: inline-flex; }
.kd-card-stats .kd-card-thumb-watch svg { transform: translateY(4.17%); }
.kd-card-stats .kd-card-thumb-skip svg { transform: rotate(180deg) translateY(4.17%) !important; }
.kd-card-stats .kd-lead-watch .kd-card-thumb-skip,
.kd-card-stats .kd-lead-skip  .kd-card-thumb-watch { display: none; }
.kd-card-stats .kd-card-verdict b { color: #1e8a3c; font-size: 13px; font-weight: 700; line-height: 1; }
.kd-card-stats .kd-card-verdict.kd-lead-skip b { color: #e30613; }
.kd-card-stats .kd-card-rating { display: inline-flex; align-items: center; gap: 3px; color: #f5a623; }
.kd-card-stats .kd-card-rating .kd-star { display: inline-flex; color: #f5a623; }
.kd-card-stats .kd-card-rating .kd-star svg { transform: translateY(2.08%); }
.kd-card-stats .kd-card-rating b { color: #f5a623; font-size: 13px; font-weight: 700; line-height: 1; }

/* The home row's card width. */
.kd-home-row .kd-card { flex: 0 0 var(--kd-home-card-w); scroll-snap-align: start; }

/* -- sign-in call-out ----------------------------------------------------- */

.kd-home-callout {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    max-width: 100%; box-sizing: border-box;
    margin: 0 0 24px; padding: 14px 16px;
    background: #fff; border: 1px solid #ececec; border-radius: 10px;
}
.kd-home-callout .kd-home-callout-text {
    margin: 0; padding: 0;
    font-size: 14px; font-weight: 700; line-height: 1.35; color: #1a1a1a;
}
.kd-home-callout .kd-home-callout-btn {
    flex: 0 0 auto;
    padding: 9px 18px; border-radius: 20px;
    background: var(--kd-red); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
    text-decoration: none;
}
.kd-home-callout .kd-home-callout-btn:hover { background: #b51d23; color: #fff; }

/* Laptop and desktop: a card, not a bar. Stretched across the full content
   width the text and the button sat a whole screen apart (21 Oct 2026). */
@media (min-width: 768px) {
    .kd-home-callout { max-width: 720px; margin: 0 auto 24px; }
}

@media (max-width: 480px) {
    .kd-home-row { --kd-home-card-w: 116px; }
    .kd-home-callout .kd-home-callout-text { font-size: 13px; }
}