/* Project cards (home section 02 and the Projects page) and the FAQ (home, Projects, Contact). Loads after covers.css.
   Sizes measured on Stux at a 1280px-wide viewport. cards.js sets body.sx-cards-js (always) and body.sx-cards-fx
   (motion allowed), .is-in on each .sx-proj when it enters, and .is-view on .sx-proj-frame while the mouse is over the photo. */

/* ---------------------------------------------------------- project cards
   A 1.93:1 panel filled with a blurred copy of the photo; a white frame (48.8% wide, 5px border, 3:2 photo,
   caption below) sits in its exact centre. Pill bottom left, glass arrow button bottom right. */
.sx-projects-list { display: grid; gap: clamp(12px, 1.5vw, 24px); }
.sx-proj { position: relative; overflow: hidden; aspect-ratio: 1.93 / 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.sx-proj > * { grid-area: 1 / 1; margin: 0 !important; }
.sx-proj-bg { position: absolute !important; inset: -40px; }
.sx-proj-bg img { width: 100%; height: 100% !important; object-fit: cover; filter: blur(26px) saturate(1.1); transform: scale(1.1); border-radius: 0; }

.sx-proj-frame { position: relative; z-index: 1; box-sizing: border-box; width: 48.8%; background: #fff; padding: clamp(4px, .4vw, 7px) clamp(4px, .4vw, 7px) 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.sx-proj-frame > * { margin: 0 !important; }
.sx-proj-img { position: relative; }
.sx-proj-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.sx-proj-link { display: block; color: inherit; }
.sx-proj-link:focus-visible { outline: 2px solid var(--sx-ink); outline-offset: 2px; }

/* white caption: name (medium, normal width) and place (grey) */
.sx-proj-cap { text-align: center; padding: clamp(20px, 2.55vw, 38px) 12px clamp(16px, 1.65vw, 26px); }
.sx-proj-cap h3 { font-size: clamp(14px, 1.33vw, 20px) !important; line-height: 1.2 !important; font-weight: 500 !important; font-stretch: 100%; letter-spacing: 0; text-transform: uppercase; color: #1a1a1a; margin: 0 !important; }
.sx-proj-cap p { font-size: clamp(13px, 1.15vw, 17px) !important; line-height: 1.3; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: #777; margin: .5em 0 0 !important; }

/* yellow VIEW tag: follows the mouse over the photo (cards.js) and takes the place of the system cursor there */
.sx-proj-view {
	position: absolute; left: 50%; top: 38%; z-index: 3; margin: 0 !important; padding: 6px 13px; pointer-events: none; white-space: nowrap;
	background: var(--sx-yellow); color: var(--sx-ink); font: 700 11.5px/1.4 var(--edol-font-text) !important; font-stretch: 100% !important;
	letter-spacing: 0; text-transform: uppercase; opacity: 0; transform: translate(-50%, -50%) scale(.6);
	transition: opacity .2s ease, transform .25s var(--sx-ease);
}
.sx-proj-frame.is-view .sx-proj-view { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) { .sx-cards-js .sx-proj-frame:has(.sx-proj-view) .sx-proj-link { cursor: none; } .sx-cards-fx .sx-proj:not(.is-in) .sx-proj-link { cursor: pointer; } }

/* category pill, bottom left (shares .sx-pill with the covers; sized for the cards here) */
.sx-proj > .sx-pill {
	position: absolute; left: clamp(12px, 1.4vw, 22px); bottom: clamp(10px, 1.1vw, 18px); top: auto; z-index: 2;
	display: inline-flex; align-items: center; box-sizing: border-box; height: clamp(30px, 2.75vw, 40px); padding: 0 clamp(12px, 1.33vw, 20px);
	border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: clamp(10px, .94vw, 13px) !important; font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1; white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
/* glass arrow button, bottom right */
.sx-proj-go { position: absolute; right: clamp(12px, 1.25vw, 20px); bottom: clamp(10px, 1.1vw, 18px); z-index: 2; line-height: 0; }
.sx-proj-go a {
	display: grid; place-items: center; box-sizing: border-box; width: clamp(32px, 3.05vw, 46px); height: clamp(32px, 3.05vw, 46px); border-radius: 50%;
	border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: #fff; font-size: clamp(13px, 1.1vw, 16px); line-height: 1; text-decoration: none; transition: background-color .3s ease;
}
.sx-proj-go a:hover { background: rgba(255,255,255,.3); }

/* Projects page: cards run almost edge to edge (about 1.4vw from the window edges, as in Stux).
   Assumes the section keeps the standard side padding var(--sx-pad) from .sx-sec. */
@media (min-width: 761px) { .sx-pg-projects .sx-projects-list { margin-inline: calc(clamp(10px, 1.4vw, 22px) - var(--sx-pad)) !important; } }
@media (max-width: 760px) { .sx-proj { aspect-ratio: 4 / 5; } .sx-proj-frame { width: 80%; } }

/* entrance (motion allowed): the whole card scales up from .6 and fades in once, when a quarter of it is in view;
   the framed photo then fades in while rising 4.6vw. No hover lift. */
.sx-cards-fx .sx-proj { opacity: 0; transform: scale(.6); transition: transform 1.1s var(--sx-ease), opacity .6s ease-out; }
.sx-cards-fx .sx-proj.is-in { opacity: 1; transform: none; }
.sx-cards-fx .sx-proj-frame { opacity: 0; transform: translateY(4.6vw); transition: opacity .6s ease .4s, transform .9s cubic-bezier(.3, .6, .2, 1) .4s; }
.sx-cards-fx .sx-proj.is-in .sx-proj-frame { opacity: 1; transform: none; }

/* photo viewer (Projects page: the VIEW click shows the photo full size) */
.sx-proj-dlg { box-sizing: border-box; max-width: min(92vw, 1500px); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--sx-ink); }
.sx-proj-dlg::backdrop { background: rgba(11,11,11,.86); }
.sx-proj-dlg figure { position: relative; margin: 0; background: #fff; padding: 8px 8px 0; }
.sx-proj-dlg img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 104px); object-fit: contain; }
.sx-proj-dlg figcaption { text-align: center; padding: 18px 12px 22px; font-family: var(--edol-font-text); }
.sx-proj-dlg figcaption strong { display: block; font-size: clamp(14px, 1.33vw, 20px); font-weight: 500; text-transform: uppercase; color: #1a1a1a; }
.sx-proj-dlg figcaption span { display: block; margin-top: 4px; font-size: clamp(13px, 1.15vw, 17px); color: #777; }
.sx-proj-dlg-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--sx-yellow); color: var(--sx-ink); font: 300 28px/1 var(--edol-font-text); cursor: pointer; }
.sx-proj-dlg-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sx-cards-fx .sx-proj-dlg[open] { animation: sx-dlg-in .45s var(--sx-ease); }
@keyframes sx-dlg-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------------------------------------------------------- FAQ
   Five separate boxes (1px faint border, page-coloured fill, 74px tall at 1280, 10px apart), 20px questions at
   normal width and a small grey plus disc on the right. Home: from the heading column to about 18px short of the
   right edge. Projects and Contact (.sx-faqs-center): everything centred, list 57vw wide. */
.sx-faqs .sx-head { margin-bottom: clamp(44px, 6.3vw, 92px) !important; }
.sx-faq { display: grid; gap: clamp(8px, .75vw, 12px); }
.sx-faqs:not(.sx-faqs-center) .sx-faq { max-width: none; margin: 0 clamp(0px, 1.4vw, 24px) 0 calc(33.333% - var(--sx-pad) / 3) !important; }
.sx-faq .wp-block-details { box-sizing: border-box; border: 1px solid #dcdcdc; background: transparent; margin: 0 !important; }
.sx-faq summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	box-sizing: border-box; min-height: clamp(58px, 5.6vw, 84px); padding: 12px 13px 12px clamp(12px, 1.1vw, 16px);
	font-size: clamp(16px, 1.56vw, 22px); font-weight: 400; font-stretch: 100%; letter-spacing: -.005em; line-height: 1.3; color: #222;
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::marker { content: ""; }
.sx-faq summary::after {
	content: ""; flex: none; width: 19px; height: 19px; border-radius: 50%;
	background: linear-gradient(#4a4a4a, #4a4a4a) center / 9px 1px no-repeat, linear-gradient(#4a4a4a, #4a4a4a) center / 1px 9px no-repeat, #d9d9d9;
	transition: transform .4s var(--sx-ease);
}
.sx-faq details[open] summary::after { transform: rotate(45deg); }
.sx-faq summary:focus-visible { outline: 2px solid var(--sx-ink); outline-offset: -4px; }
.sx-faq details > p { margin: 0 !important; padding: 0 clamp(12px, 1.1vw, 16px) 22px; max-width: 64ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--sx-muted); }
.sx-cards-fx .sx-faq details[open] > p { animation: sx-faq-in .5s ease .05s backwards; }
@keyframes sx-faq-in { from { opacity: 0; transform: translateY(-6px); } }
/* each box fades up on its own as it enters (no group stagger) */
.sx-fx .sx-faq > [data-fx="up"] { --d: 0ms !important; }

/* centred version (Projects, Contact) */
.sx-faqs-center .sx-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; text-align: center; justify-items: center; }
.sx-faqs-center .sx-head .sx-label { padding: 0; color: var(--sx-ink); letter-spacing: 0; }
.sx-faqs-center .sx-dash, .sx-faqs-center .sx-label span:first-child { display: none; }
.sx-faqs-center .sx-head-main { align-items: center; }
.sx-faqs-center .sx-h2 { text-align: center; }
.sx-faqs-center .sx-faq { width: 100%; max-width: 57vw; margin: 0 auto !important; }
.sx-fx .sx-faqs-center [data-fx="words"].is-in .sx-w { animation-delay: 0ms; } /* the heading rises as one block */
/* last section on the page (Contact): keep the page background between the list and the footer */
.sx-faqs:last-child { padding-bottom: var(--sx-gap); }

@media (max-width: 760px) {
	.sx-faqs:not(.sx-faqs-center) .sx-faq { margin: 0 !important; }
	.sx-faqs-center .sx-faq { max-width: none; }
}
@media (max-width: 480px) { .sx-faqs .sx-br, .sx-faqs .sx-h2 br { display: none; } }
@media (prefers-reduced-motion: reduce) { .sx-proj-view, .sx-faq summary::after, .sx-proj-go a { transition: none; } }