/* -----------------------------------------------
   PATTERN: valencia/note-card — .valencia-note-card
   One Notes entry. Used inside the Notes feed's Query Loop and by
   templates/single-stream.html. The bar's text colour and the meta row's size and
   colour are block attributes in the pattern; this sheet carries layout,
   the thumb rotation, the typewriter and the empty-bar rule, none of which
   a block support can express.
   ----------------------------------------------- */

/* .wp-block-group doubles the specificity so core's layout classes do not
   win on source order. */
.wp-block-group.valencia-note-card { position: relative; background: var(--wp--preset--color--surface); border: 1px solid rgba(47, 47, 47, 0.1); border-radius: 8px; box-shadow: var(--wp--preset--shadow--soft); }

/* Avatar column + content column. minmax(0, 1fr) lets the one-line source
   link ellipsis instead of widening the card. */
.wp-block-group.valencia-note-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding: 28px 36px 30px 24px; }
/* No flow-layout gaps inside the card. Without the first selector, a note
   with a thumbnail gets 24px more top space: the absolutely positioned
   thumb is still the first child, so core's `* + *` gap lands on .main. */
.wp-block-group.valencia-note-card > *, .wp-block-group.valencia-note-main > *, .wp-block-group.valencia-note-content > * { margin-block: 0; }
.valencia-note-avatar img { display: block; width: 44px; height: 44px; }

/* Handle · date */
.valencia-note-meta { line-height: 1.4; padding-top: 2px; }
.valencia-note-meta > * { margin: 0; }
.valencia-note-handle { font-family: var(--wp--preset--font-family--soehne); font-weight: 500; }
.valencia-note-handle::after { content: "·"; margin-left: 6px; color: var(--wp--preset--color--muted-strong); }
.valencia-note-card .wp-block-post-date { display: inline-block; }

/* Typewriter reveal on the date — armed only when note-card.js adds
   .valencia-note-js, so no-JS visitors always see the dates */
.valencia-note-js .valencia-note-card .wp-block-post-date { clip-path: inset(0 100% 0 0); }
.valencia-note-js .valencia-note-card.is-in-view .wp-block-post-date { animation: valencia-note-type 0.6s steps(12, end) forwards; }
@keyframes valencia-note-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
	.valencia-note-js .valencia-note-card .wp-block-post-date { clip-path: none; animation: none; }
}

/* Title — core heading bound to valencia/note-link (links to external_url) */
.valencia-note-card .valencia-note-title { line-height: 1.25; color: var(--wp--preset--color--contrast); text-transform: none; margin: 10px 0 12px; }
.valencia-note-card .valencia-note-title a { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: none; }
.valencia-note-card .valencia-note-title a:hover { color: var(--wp--preset--color--ink-deep); }

/* Body */
/* Notes are a few sentences: tighter than the long-form reading rhythm. */
.valencia-note-body { color: var(--wp--preset--color--contrast); }
.valencia-note-body p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; }
.valencia-note-body p:last-child, .valencia-note-body p:has(+ p:empty) { margin-bottom: 0; }
.valencia-note-body p:empty { display: none; }
.valencia-note-body a { color: var(--wp--preset--color--ink-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-bottom: none; }
.valencia-note-body .wp-block-embed { margin: var(--wp--preset--spacing--sm) 0 0; max-width: 100%; }
.valencia-note-body iframe { max-width: 100%; }
.valencia-note-body img { max-width: 100%; height: auto; }

/* Source link — the note's external_url as one underlined line. Reset
   the button chrome; it is a link, not a button. */
.wp-block-group.valencia-note-content > .valencia-note-source { margin-top: 16px; }
.valencia-note-link { max-width: 100%; }
.valencia-note-link .wp-block-button__link { display: block; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wp--preset--color--ink-deep); font: inherit; font-size: 16px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Bar: network icons are white
   coins centred on the line where the card meets the bar, so they belong
   to both; the permalink sits inside the bar on the right. Text colour is
   a block attribute (ink-deep); the tint is custom.skyTint, shared with
   the Likes pill. Network buttons with no URL are dropped by the render
   filter. */
.wp-block-group.valencia-note-bar { position: relative; min-height: 38px; background: var(--wp--custom--sky-tint); margin: 0; padding: 0 24px 0 84px; border-top: 1px solid rgba(2, 88, 126, 0.12); border-radius: 0 0 8px 8px; }
.wp-block-buttons.valencia-note-networks { position: absolute; left: 84px; top: 0; transform: translateY(-50%); width: auto; margin: 0; gap: 8px; }
.wp-block-buttons.valencia-note-permalink-wrap { flex: 0 0 auto; width: auto; margin: 0 0 0 auto; }

/* The coins need room above the bar; when a note has none, the card keeps
   its normal bottom padding. */
.valencia-note-card:has(.valencia-note-net) .wp-block-group.valencia-note-main { padding-bottom: 46px; }

/* Icon-only coins. The word stays in the markup at font-size 0, so screen
   readers still announce "Bluesky" / "Threads". */
.valencia-note-net .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 2px solid rgba(2, 88, 126, 0.38); border-radius: 50%; background: var(--wp--preset--color--surface); box-shadow: 0 1px 4px rgba(2, 88, 126, 0.14); color: var(--wp--preset--color--ink-deep); font-size: 0; line-height: 1; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.valencia-note-net .wp-block-button__link::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--valencia-net-icon) center / contain no-repeat; mask: var(--valencia-net-icon) center / contain no-repeat; }
.valencia-note-net .wp-block-button__link:hover, .valencia-note-net .wp-block-button__link:focus-visible { background: var(--wp--preset--color--ink-deep); border-color: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--surface); }

/* Permalink: chain mark (WordPress core's Social Icons path) + word. */
.valencia-note-permalink .wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: 1; text-decoration: none; }
.valencia-note-permalink .wp-block-button__link::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.valencia-note-permalink .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* On the note's own page the permalink points at itself: drop it, and drop
   the bar entirely when the note has no network links either. */
.valencia-note-single .valencia-note-permalink-wrap { display: none; }
.valencia-note-single .valencia-note-bar:not(:has(.valencia-note-net)) { display: none; }
/* Bluesky and Threads marks: the paths WordPress core ships in the
   Social Icons block (wp-includes/blocks/social-link.php). */
.is-network-bluesky { --valencia-net-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z'/%3E%3C/svg%3E"); }
.is-network-mastodon { --valencia-net-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E"); }
.is-network-threads { --valencia-net-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.3 11.3c-.1 0-.2-.1-.2-.1-.1-2.6-1.5-4-3.9-4-1.4 0-2.6.6-3.3 1.7l1.3.9c.5-.8 1.4-1 2-1 .8 0 1.4.2 1.7.7.3.3.5.8.5 1.3-.7-.1-1.4-.2-2.2-.1-2.2.1-3.7 1.4-3.6 3.2 0 .9.5 1.7 1.3 2.2.7.4 1.5.6 2.4.6 1.2-.1 2.1-.5 2.7-1.3.5-.6.8-1.4.9-2.4.6.3 1 .8 1.2 1.3.4.9.4 2.4-.8 3.6-1.1 1.1-2.3 1.5-4.3 1.5-2.1 0-3.8-.7-4.8-2S5.7 14.3 5.7 12c0-2.3.5-4.1 1.5-5.4 1.1-1.3 2.7-2 4.8-2 2.2 0 3.8.7 4.9 2 .5.7.9 1.5 1.2 2.5l1.5-.4c-.3-1.2-.8-2.2-1.5-3.1-1.3-1.7-3.3-2.6-6-2.6-2.6 0-4.7.9-6 2.6C4.9 7.2 4.3 9.3 4.3 12s.6 4.8 1.9 6.4c1.4 1.7 3.4 2.6 6 2.6 2.3 0 4-.6 5.3-2 1.8-1.8 1.7-4 1.1-5.4-.4-.9-1.2-1.7-2.3-2.3zm-4 3.8c-1 .1-2-.4-2-1.3 0-.7.5-1.5 2.1-1.6h.5c.6 0 1.1.1 1.6.2-.2 2.3-1.3 2.7-2.2 2.7z'/%3E%3C/svg%3E"); }

/* Thumbnail badge — corner-pinned, no added card height; core
   post-featured-image renders nothing when no image is set. Rotation is
   file CSS on purpose: transform is not a block support. */
.valencia-note-card .valencia-note-thumb { position: absolute; top: -16px; right: -16px; width: 64px; height: 64px; margin: 0; z-index: 2; border-radius: 6px; overflow: hidden; border: 3px solid var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--soft); transform: rotate(4deg); transition: transform 0.15s ease; cursor: zoom-in; }
.valencia-note-card .valencia-note-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.valencia-note-card .valencia-note-thumb:hover, .valencia-note-card .valencia-note-thumb:focus-visible { transform: rotate(4deg) scale(1.06); }
.valencia-note-card .valencia-note-thumb:focus-visible { outline: 2px solid var(--wp--preset--color--ink-deep); outline-offset: 2px; }

/* Lightbox (dialog built by note-card.js) */
.valencia-note-lightbox { border: none; border-radius: 6px; padding: 0; max-width: min(90vw, 640px); background: var(--wp--preset--color--base); box-shadow: 0 20px 60px rgba(0, 0, 4, 0.3); }
.valencia-note-lightbox::backdrop { background: rgba(18, 18, 18, 0.6); }
.valencia-note-lightbox-inner { position: relative; }
/* Cap the height so a tall screenshot fits the screen with the close
   button in view instead of scrolling inside the dialog. */
.valencia-note-lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 64px); margin: 0 auto; }
.valencia-note-lightbox-close { position: absolute; top: 17px; right: 17px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--wp--preset--shadow--soft); }

/* Phone: the avatar column costs ~15% of the width, so the avatar and
   handle/date become one header row and everything else spans the card.
   .valencia-note-content becomes display: contents so its children join
   the main grid. Measured on two sample notes: phone cards 26% shorter
   than the indented layout. */
@media (max-width: 600px) {
	.wp-block-group.valencia-note-main { grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; padding: 20px 20px 22px; }
	.wp-block-group.valencia-note-content { display: contents; }
	.wp-block-group.valencia-note-content > * { grid-column: 1 / -1; }
	.wp-block-group.valencia-note-content > .valencia-note-meta { grid-column: 2; grid-row: 1; align-self: center; padding-top: 0; }
	.valencia-note-avatar { grid-row: 1; }
	.valencia-note-avatar img { width: 32px; height: 32px; }
	.valencia-note-card .valencia-note-title { margin: 14px 0 10px; }
	.valencia-note-body p { margin-bottom: 12px; font-size: 16px; line-height: 1.65; }
	.wp-block-group.valencia-note-content > .valencia-note-source { margin-top: 14px; }
	.valencia-note-link .wp-block-button__link { font-size: 15px; }
	.wp-block-group.valencia-note-bar { padding: 0 20px; }
	.wp-block-buttons.valencia-note-networks { left: 20px; }
	.valencia-note-card:has(.valencia-note-net) .wp-block-group.valencia-note-main { padding-bottom: 40px; }
	.valencia-note-card .valencia-note-thumb { top: -12px; right: -8px; width: 56px; height: 56px; }
}
}