/* ============================================================================================
 * The BDeBooks house cover and its book shell (Claude Design 5-3 Brand - Missing cover, final
 * package 2026-10-03). Markup: resources/views/partials/f2/house-cover.blade.php; the numbers:
 * App\Modules\Catalog\Presentation\HouseCoverLayout.
 *
 * The design's cover is a 600 x 900 grid. One unit (--u) is 1/600 of the cover box's width, read
 * through container units, so the same markup draws a 52 px row, a 120 px card and the 210 px
 * book page cover. Per-cover values arrive as --hc-* custom properties on the element: the band
 * colour and its ink, the big letter's size and top, the title box, the title's size, width step
 * and line height, the subtitle's size and gap, the series gap and the author's size and y.
 *
 * The shell (owner 2026-10-03: house covers only, never a real cover): 120 px and up the cover is
 * a book in 3D, tilted rotateY(-18deg) with a page edge on the right, a back board with its
 * shadow, and a sheen; it turns to -32deg on hover (the book page's 210 px cover: -22 and -36).
 * Under 120 px it lies flat with the spine crease and a stack of pages behind, exactly as the
 * "In use" section of 5-3 draws each one.
 * ========================================================================================== */

/* ------------------------------------------------------------------ the host box
 * Wherever a house cover is the one showing, the cover box gives up its own corner radius,
 * shadow and clipping (the shell draws its own) and becomes the perspective and the container.
 * A real cover beside a hidden house cover keeps the box exactly as before. */
:is([data-cover], .cover, .reader-library-cover, .account-cover-card__cover, .fh-fan__cover, .rt-hit__cover, .rd-end__cover, .lsn-cover, .adm-cover__house):has(> .f2-house:not([hidden])) {
  position: relative; overflow: visible; container-type: inline-size;
  background: transparent; border-radius: 0; box-shadow: none; perspective: 1200px;
}
.book-card.f2-card:hover .f2-card__cover:has(> .f2-house:not([hidden])),
.bkp .bkp-rel:hover .bkp-rel__cover:has(> .f2-house:not([hidden])) { transform: none; box-shadow: none; }
.bkp-rel__cover:has(> .f2-house:not([hidden]))::after { content: none; }

/* ------------------------------------------------------------------ the book */
.f2-house {
  --u: calc(100cqi / 600);
  --z: 4.3cqi;
  position: absolute; inset: 0; display: block; margin: 0; padding: 0; box-sizing: border-box;
  transform-style: preserve-3d; transform: rotateY(-18deg); transition: transform .35s ease;
  font-family: 'Anek Latin', 'Anek Bangla', 'DM Sans', Arial, sans-serif; font-kerning: normal; line-height: 1;
  color: #221A17; text-align: left; -webkit-font-smoothing: antialiased;
}
.f2-house[hidden] { display: none; }
.f2-house--page { transform: rotateY(-22deg); }
.f2-house:hover, .book-card:hover .f2-house, .bkp-rel:hover .f2-house, .account-cover-card:hover .f2-house, .f2-house:focus-visible { transform: rotateY(-32deg); }
.f2-house--page:hover { transform: rotateY(-36deg); }
.hc-edge {
  position: absolute; top: 1.5%; bottom: 1.5%; right: calc(-1 * var(--z)); width: calc(2.1 * var(--z));
  transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #FFFDF9 0 2px, #EFE6DE 2px 3px);
}
.hc-board {
  position: absolute; inset: 0; background: #EFE6DE; transform: translateZ(calc(-1 * var(--z)));
  border-radius: 2px 5px 5px 2px; box-shadow: -6px 14px 28px rgba(34, 26, 23, .28);
}
.hc-face {
  position: absolute; inset: 0; overflow: hidden; transform: translateZ(var(--z));
  border-radius: 2px 5px 5px 2px; background: #FFF9F6;
}
/* The spine shading and the diagonal sheen over the whole face. */
.hc-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(255, 255, 255, .18) 2.2%, rgba(0, 0, 0, .14) 4%, rgba(0, 0, 0, 0) 8%),
    linear-gradient(115deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%);
}

/* ------------------------------------------------------------------ the bands
 * The band colour under a diagonal light (8% white to 14% black, corner to corner) and a fine
 * grain. A: one band 0 to 470. C: 0 to 400 and 768 to 900. */
.hc-band { position: absolute; left: 0; right: 0; overflow: hidden; background-color: var(--hc-c); }
.hc-band--top { top: 0; height: calc(var(--u) * var(--hc-band)); background-image: linear-gradient(var(--hc-angle), rgba(255, 255, 255, .08), rgba(0, 0, 0, .14)); }
.f2-house--a .hc-band--top { --hc-band: 470; --hc-angle: 128.07deg; }
.f2-house--c .hc-band--top { --hc-band: 400; --hc-angle: 123.69deg; }
.hc-band--foot { top: calc(var(--u) * 768); bottom: 0; background-image: linear-gradient(102.41deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .14)); }
.hc-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / calc(var(--u) * 160) calc(var(--u) * 160) repeat;
}

/* ------------------------------------------------------------------ the marks
 * The big first letter: Source Serif 4 600 (Tiro Bangla for Bengali), 15% white, right-aligned
 * 26 units past the edge and clipped by the band. The current BDeBooks mark in white, 82 units
 * at (44, 42). The headphones badge, 60 units top right, only when the book has audio. */
.hc-letter {
  position: absolute; right: calc(var(--u) * -26); top: calc(var(--u) * var(--hc-letter-top));
  font: 600 calc(var(--u) * var(--hc-letter)) / 1 'BDe Serif', 'Source Serif 4', Georgia, serif;
  color: rgba(255, 255, 255, .15); white-space: nowrap; letter-spacing: 0;
}
.f2-house--bn .hc-letter { font-family: 'Tiro Bangla', 'Noto Serif Bengali', serif; font-weight: 400; }
.hc-mark {
  position: absolute; left: calc(var(--u) * 44); top: calc(var(--u) * 42); width: calc(var(--u) * 82); height: calc(var(--u) * 82);
  background: url(/assets/branding/bdebooks-mark-white.svg) center / contain no-repeat;
}
.hc-audio {
  position: absolute; left: calc(var(--u) * 492); top: calc(var(--u) * 56); width: calc(var(--u) * 60); height: calc(var(--u) * 60); border-radius: 50%;
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Cpath d='M4 15h3v5H5.5A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M20 15h-3v5h1.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* ------------------------------------------------------------------ the words
 * The title box (500 wide, centred on y 626 for A and 584 for C, 236 or 300 tall, less 44 on top
 * for a series line) centres the title and subtitle; --hc-shift moves the CSS line boxes to where
 * the canvas put the glyphs. The box is drawn 10 units wider than the width the server fitted
 * against, so its small estimate never wraps a line the design would not. */
.hc-text {
  position: absolute; left: calc(var(--u) * 45); width: calc(var(--u) * 510);
  top: calc(var(--u) * var(--hc-text-top)); height: calc(var(--u) * var(--hc-text-h));
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  transform: translateY(calc(var(--u) * -1 * var(--hc-shift)));
}
.hc-main { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.hc-series {
  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--u) * var(--hc-ser-gap));
  font: 700 calc(var(--u) * 17) / 1 'Anek Latin', 'Anek Bangla', 'DM Sans', sans-serif; font-stretch: 100%;
  letter-spacing: calc(var(--u) * 3); padding-left: calc(var(--u) * 3); text-transform: uppercase; color: var(--hc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hc-lines); overflow: hidden; width: 100%;
  font-size: calc(var(--u) * var(--hc-size)); font-weight: 700; font-stretch: var(--hc-stretch); line-height: var(--hc-lh);
  color: #221A17; overflow-wrap: anywhere; hyphens: none; letter-spacing: 0;
}
.hc-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: calc(var(--u) * 480);
  margin-top: calc(var(--u) * var(--hc-sub-m)); font-size: calc(var(--u) * var(--hc-sub)); font-weight: 500; font-stretch: 100%;
  line-height: 1.3; color: #5C4F4A; overflow-wrap: anywhere; hyphens: none;
}

/* ------------------------------------------------------------------ the author
 * A: in the band colour, centred on y 816 over a 300 x 3 hairline at 768. C: white, centred on
 * 834 in the bottom band. Capitals with .2em tracking (the left padding balances the tracking
 * after the last letter, as the canvas nudged it); Bengali keeps its letters, 6 larger. */
.hc-rule { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 768); width: calc(var(--u) * 300); height: calc(var(--u) * 3); background: var(--hc-ink); }
.hc-author {
  position: absolute; left: calc(var(--u) * 80); right: calc(var(--u) * 80);
  top: calc(var(--u) * (var(--hc-au-y) - var(--hc-au) / 2));
  font-size: calc(var(--u) * var(--hc-au)); font-weight: 700; font-stretch: 100%; line-height: 1;
  letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
  color: var(--hc-ink);
}
.f2-house--c .hc-author { color: #FFFFFF; }
.f2-house--bn .hc-author { font-weight: 600; letter-spacing: 0; padding-left: 0; text-transform: none; }
/* A Bengali cover draws from Anek Bangla first (its subset carries the space), so a title with
   no Latin letter never fetches the Latin file; a Latin letter or digit still falls through. */
.f2-house--bn, .f2-house--bn .hc-series { font-family: 'Anek Bangla', 'Anek Latin', 'Hind Siliguri', 'DM Sans', Arial, sans-serif; }

/* ------------------------------------------------------------------ under 120 px: flat
 * The spine crease and a stack of pages behind, no tilt, no grain. */
@container (max-width: 119.5px) {
  .f2-house, .f2-house:hover, .f2-house--page, .f2-house--page:hover, .book-card:hover .f2-house { transform: none; transform-style: flat; }
  .hc-edge, .hc-board, .hc-band::after { display: none; }
  .hc-face {
    transform: none; border-radius: 2px 4px 4px 2px;
    box-shadow: 1px 1px 0 #FFFDF9, 2px 2px 0 #E6DAD1, 3px 3px 0 #FFFDF9, 4px 4px 0 #E6DAD1, 0 8px 14px -6px rgba(34, 26, 23, .45);
  }
  .hc-face::after { background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .2) 4%, rgba(0, 0, 0, .12) 7%, rgba(0, 0, 0, 0) 12%); }
}

/* ------------------------------------------------------------------ the admin preview
 * 3-03: the house cover beside the uploaded cover, at the card's 96 px (flat) so the owner sees
 * what the lists show. */
.adm-cover__house { position: relative; display: block; width: 96px; aspect-ratio: 2 / 3; flex: 0 0 auto; }
.adm-cover__house .f2-house { transform: none; }
/* The uploaded cover fades back while the house cover stands in for it. */
.adm-cover__img[data-house-dim] { opacity: .45; }

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