/*
 * Pairing guide (/field-notes/<slug>/ in the pairing-guide category), v13:
 * prototypes/13/45-pairing-guide.css (CD 2026-11-04-pairing-guide-45-pass),
 * as the delta on top of journal-post.css (header, prose, short answer, More
 * from the kitchen) and wine-notes.css (the bridge's filled button). Loaded
 * after both. Brief: docs/briefs/2026-10-31-field-notes-wp-port.md (45); goal
 * batch 3 item 12.
 *
 * Differences from the prototype, all mechanical:
 *   - the cards are the wines the body links to, with what the product
 *     provides (name, collection and region, bottle shot, Add to cart and the
 *     one stretched link); the prototype's dish, card copy, Also try with and
 *     tagline have no field yet, so they and the phone toggle are not here;
 *   - the chapter bar links the body's anchored H2 headings and sticks for the
 *     length of the body (no per-group markup exists);
 *   - the breakout photo is a core image block with the class pg-fig;
 *   - the plugin's winery/add-to-cart is painted as the prototype's .pg-add;
 *   - reveals hide only under html.js.
 */

/* HEADER · 45's own proportions on the shared 40/42 head: copy and a 3:2 photo side by side */
.rhinory-pairing-guide .jp-head-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px) }
.rhinory-pairing-guide .jp-head-grid--text { grid-template-columns:minmax(0,1fr) }
.rhinory-pairing-guide .jp-head-copy { gap:28px }
.rhinory-pairing-guide .jp-head .ed-h1 { font-size:clamp(40px,4.2vw,62px);line-height:1.02;text-wrap:balance }
.rhinory-pairing-guide .jp-head-fig .ed-photo { aspect-ratio:3/2 }
.rhinory-pairing-guide .jp-head-fig .ed-photo img { object-position:50% 50% }
@media (min-width:561px) { .rhinory-pairing-guide .jp-crumb .current { min-width:8ch } } /* phones keep the shrink-to-fit of 40/42: 8ch would push the page wider than the screen */
@media (max-width:1180px) and (min-width:901px) { .rhinory-pairing-guide .jp-crumb>a:first-child, .rhinory-pairing-guide .jp-crumb>a:first-child+.sep { display:none } }
@media (max-width:900px) { .rhinory-pairing-guide .jp-head-grid { grid-template-columns:1fr } }

/* CHAPTER BAR · sticky under the nav for the length of the body (needs html/body overflow-x visible, which the theme keeps) */
.rhinory-pairing-guide .pg-chap { position:sticky;top:var(--pg-nav-h,var(--rhinory-mega-nav-h,88px));z-index:6;display:flex;margin:0 0 clamp(32px,4vw,48px);background:rgba(244,238,224,.94);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-block:1px solid var(--rule-warm-2) }
.rhinory-pairing-guide .pg-chap a { flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 12px;text-align:center;font-family:"Josefin Sans",system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.35;color:var(--ink-warm-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s }
.rhinory-pairing-guide .pg-chap a:hover { color:var(--burgundy) }
.rhinory-pairing-guide .pg-chap a[aria-current="true"] { color:var(--burgundy);border-bottom-color:var(--burgundy) }
.rhinory-pairing-guide .pg-chap a:focus-visible { outline:2px solid var(--burgundy);outline-offset:-4px }
/* an anchored heading lands below the stuck nav (65px) and the bar; the live nav height is no use here, it is taller at the top of the page */
.rhinory-pairing-guide .ed-prose :is(h2,h3)[id] { scroll-margin-top:141px }

/* BREAKOUT PHOTO · an image block with the class pg-fig, wider than the measure */
.rhinory-pairing-guide .ed-prose figure.pg-fig { position:relative;left:50%;translate:-50% 0;width:min(1000px,calc(100vw - 112px));margin:56px 0 }
.rhinory-pairing-guide .ed-prose figure.pg-fig img { width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 28% }
@media (max-width:1024px) { .rhinory-pairing-guide .ed-prose figure.pg-fig { width:min(1000px,calc(100vw - 80px)) } }
@media (max-width:640px) {
	.rhinory-pairing-guide .ed-prose figure.pg-fig { left:auto;translate:none;width:auto;margin:44px 0 }
	.rhinory-pairing-guide .ed-prose figure.pg-fig img { aspect-ratio:4/5 }
}

/* THE PAIRINGS · same-size cards, one link each */
.rhinory-pairing-guide .pg-sec-h { margin-bottom:clamp(40px,5vw,64px) }
.rhinory-pairing-guide .pg-sec-h em { display:block }
.rhinory-pairing-guide .pg-grid { display:flex;flex-wrap:wrap;justify-content:center;gap:24px }
.rhinory-pairing-guide .pg-card { position:relative;flex:0 1 calc(50% - 12px);min-width:0;display:grid;grid-template-columns:180px minmax(0,1fr);background:#fff;border:1px solid var(--rule-warm-2);color:var(--ink-warm);text-decoration:none;transition:transform .25s ease,border-color .25s ease,background-color .4s ease }
.rhinory-pairing-guide .pg-card:hover { transform:translateY(-4px);border-color:var(--burgundy);background-color:var(--paper) }
.rhinory-pairing-guide .pg-card:focus-within { border-color:var(--burgundy) }
/* the bottle lifts and the ground cross-fades to paper on hover */
.rhinory-pairing-guide .pg-card-img { position:relative;background:#fff;border-right:1px solid var(--rule-warm);min-height:260px;overflow:hidden;transition:background-color .4s ease }
.rhinory-pairing-guide .pg-card-img img { position:absolute;inset:0;margin:auto;width:auto;height:82%;max-width:88%;object-fit:contain;transform:translateY(4%);transition:transform .7s cubic-bezier(.2,.7,.2,1) }
.rhinory-pairing-guide .pg-card:hover .pg-card-img { background-color:var(--paper) }
.rhinory-pairing-guide .pg-card:hover .pg-card-img img { transform:translateY(-2%) scale(1.05) }
.rhinory-pairing-guide .pg-card-body { padding:28px 30px 30px;display:flex;flex-direction:column;gap:14px;min-width:0 }
.rhinory-pairing-guide .pg-card-body .ed-meta { display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rhino-warm) }
.rhinory-pairing-guide .pg-card-body .ed-meta .sep { color:var(--burgundy) }
.rhinory-pairing-guide .pg-card-title { margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(25px,2.2vw,30px);line-height:1.1;letter-spacing:-.008em;color:var(--ink-warm);text-wrap:pretty;transition:color .2s }
.rhinory-pairing-guide .pg-card:hover .pg-card-title { color:var(--burgundy) }
.rhinory-pairing-guide .pg-actions { margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:10px }
/* one link per card: "Explore the wine" stretches over the card; Add to cart sits above it */
.rhinory-pairing-guide .pg-btn { display:inline-flex;align-items:center;gap:14px;white-space:nowrap;font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);text-decoration:none;border:1px solid var(--rule-warm-2);padding:14px 20px;min-height:44px;transition:border-color .25s,background .25s }
.rhinory-pairing-guide .pg-btn::after { content:"";position:absolute;inset:0;z-index:1 }
.rhinory-pairing-guide .pg-btn .arr { font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;line-height:0;transition:transform .25s }
.rhinory-pairing-guide .pg-card:hover .pg-btn { border-color:var(--burgundy);background:rgba(82,0,0,.05) }
.rhinory-pairing-guide .pg-card:hover .pg-btn .arr { transform:translateX(5px) }
.rhinory-pairing-guide .pg-btn:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }
/* the plugin's add-to-cart, painted as the prototype's .pg-add */
.rhinory-pairing-guide .pg-card .winery-add-to-cart { position:relative;z-index:2;margin:0 }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:14px 22px;background:var(--burgundy);color:var(--paper);border:1px solid var(--burgundy);border-radius:2px;cursor:pointer;font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;box-shadow:0 12px 30px -14px rgba(82,0,0,.45);transition:background .22s,transform .18s,color .22s }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__button:hover { background:#3d0000;transform:translateY(-1px) }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__button:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__button:disabled { background:var(--card-2);color:var(--ink-warm-2);border-color:var(--card-2);box-shadow:none;cursor:not-allowed }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__message { margin:6px 0 0;font-family:"Lora",Georgia,serif;font-size:13px;line-height:1.5;color:var(--burgundy) }
.rhinory-pairing-guide .pg-card .winery-add-to-cart__message:empty { display:none }
/* per-card reveal (translate, so the hover transform stays independent); the right-hand card follows by 100ms */
html.js .rhinory-pairing-guide .pg-rv { --d:0s;opacity:0;translate:0 20px;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d),translate 1s cubic-bezier(.2,.7,.2,1) var(--d),transform .25s ease,border-color .25s ease,background-color .4s ease }
html.js .rhinory-pairing-guide .pg-rv.is-in { opacity:1;translate:0 0 }
.rhinory-pairing-guide .pg-grid>.pg-card:nth-child(even) { --d:.1s }

/* the close of the cards */
.rhinory-pairing-guide .pg-close { margin-top:clamp(48px,5vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule-warm-2);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px }
.rhinory-pairing-guide .pg-close .ed-p { margin:0 }
.rhinory-pairing-guide .pg-close-alt { margin:0;font-family:"Josefin Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase }
.rhinory-pairing-guide .pg-close-alt a { display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--burgundy);text-decoration:none }
.rhinory-pairing-guide .pg-close-alt .arr { font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;line-height:0;transition:transform .25s }
.rhinory-pairing-guide .pg-close-alt a:hover .arr { transform:translateX(5px) }
.rhinory-pairing-guide .pg-close-alt a:focus-visible { outline:2px solid var(--burgundy);outline-offset:3px }

/* MEMBERSHIP BRIDGE · paper, one ken-burns photo (45 puts it on paper; 42's is on the card ground) */
.rhinory-journal-post.rhinory-pairing-guide .wp-tsr { background:var(--paper) }
.rhinory-pairing-guide .wp-tsr.is-in .wp-tsr-fig .ed-photo img { animation:jp-kb 26s ease-in-out infinite alternate }

/* responsive */
@media (max-width:1180px) and (min-width:901px) {
	.rhinory-pairing-guide .pg-card { grid-template-columns:150px minmax(0,1fr) }
	.rhinory-pairing-guide .pg-card-body { padding:24px 24px 26px }
}
@media (max-width:1080px) {
	.rhinory-pairing-guide .pg-card { flex-basis:100%;max-width:720px;grid-template-columns:180px minmax(0,1fr) }
	.rhinory-pairing-guide .pg-card-body { padding:28px 30px 30px }
}
@media (max-width:900px) {
	.rhinory-pairing-guide .pg-chap { margin-inline:-40px;padding-inline:40px }
}
@media (max-width:640px) {
	.rhinory-pairing-guide .pg-card { grid-template-columns:120px minmax(0,1fr) }
	.rhinory-pairing-guide .pg-card-img { min-height:0 }
	.rhinory-pairing-guide .pg-card-body { padding:22px 22px 24px;gap:12px }
	.rhinory-pairing-guide .pg-actions { flex-direction:column;align-items:stretch }
	.rhinory-pairing-guide .pg-actions .pg-btn, .rhinory-pairing-guide .pg-card .winery-add-to-cart__button { justify-content:center;width:100% }
}
@media (max-width:560px) {
	.rhinory-pairing-guide .pg-chap { margin-inline:-22px;padding-inline:22px }
	.rhinory-pairing-guide .pg-chap a { letter-spacing:.14em }
	.rhinory-pairing-guide .pg-card { grid-template-columns:96px minmax(0,1fr) }
	.rhinory-pairing-guide .pg-card-body { padding:20px 18px 22px }
	.rhinory-pairing-guide .pg-card-title { font-size:23px }
}
@media (max-width:380px) {
	.rhinory-pairing-guide .pg-card { grid-template-columns:1fr }
	.rhinory-pairing-guide .pg-card-img { min-height:200px;border-right:0;border-bottom:1px solid var(--rule-warm) }
}
@media (prefers-reduced-motion:reduce) {
	.rhinory-pairing-guide .pg-card, .rhinory-pairing-guide .pg-btn, .rhinory-pairing-guide .pg-btn .arr, .rhinory-pairing-guide .pg-card-img, .rhinory-pairing-guide .pg-card-img img, .rhinory-pairing-guide .pg-card .winery-add-to-cart__button { transition:none }
	.rhinory-pairing-guide .pg-card:hover, .rhinory-pairing-guide .pg-card .winery-add-to-cart__button:hover { transform:none }
	.rhinory-pairing-guide .pg-card:hover .pg-card-img img { transform:translateY(4%) }
	html.js .rhinory-pairing-guide .pg-rv { opacity:1;translate:none;transition:none }
	.rhinory-pairing-guide .wp-tsr.is-in .wp-tsr-fig .ed-photo img { animation:none;transform:none }
}