/* =============================================================================
   Kashi Interior — project sections

   Source: Kashi Interior Claude Design/Kashi Projects.dc.html
           Kashi Interior Claude Design/Kashi Project Detail.dc.html

   Sections, in page order:
     Projects       projects-filter, projects-grid
     Project Detail project-meta, before-after, scope-quote, project-gallery,
                    project-nav

   THE FIDELITY RULE: every declaration below is copied character-for-character
   from the `style` / `style-hover` attribute it derives from. The only
   substitution is a colour literal for the --kashi-* token whose default IS
   that literal. Anything else carries a /* NET-NEW *​/ note.

   The design has no media queries. It is responsive through clamp(),
   grid auto-fill and flex-wrap alone. Nothing here adds one.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01 · PROJECTS FILTER — the category pills

   The source draws one section for the pills and the grid together:
   `padding:clamp(44px,5.5vw,80px) clamp(18px,3.5vw,52px)`. The port splits it
   into two registry sections so either can be placed alone, and divides that
   padding between them: the pill row keeps the top, the grid keeps the bottom,
   and the adjacent-sibling rule below closes the seam. Placed alone, the grid
   carries the whole thing.
   -------------------------------------------------------------------------- */

.k-filters {
	padding: clamp(44px, 5.5vw, 80px) var(--kashi-gut) 0;
}

.k-filters__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: clamp(28px, 3.4vw, 42px);
}

.k-filter {
	border: 1px solid var(--kashi-border-mid);
	background: transparent;
	font-family: var(--kashi-font-form);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px 24px;
	border-radius: 999px;
	cursor: pointer;
	transition: var(--kashi-pill);
	/* NET-NEW: the design's pill is a <button>, which is inline-block by
	   default. The anchor that replaces it — so the pill degrades to a real term
	   archive without JavaScript — has to say so, or the vertical padding would
	   not reserve line box height. */
	display: inline-block;
}

/* The colours are stated at doubled specificity because kashi-base.css raises
   its link colours to `body[class] a` (0,1,2) so Elementor's kit class cannot
   win them; a single class (0,1,0) would lose to that. */
.k-filter.k-filter {
	color: var(--kashi-navy);
}

.k-filter.is-active.k-filter {
	background: var(--kashi-navy-deep);
	color: #fff;
	border-color: var(--kashi-navy-deep);
}

/* NET-NEW: the design has NO hover state on the pills at all. As anchors they
   inherit `body[class] a:hover{color:var(--kashi-navy)}`, which would erase an
   active pill's white label against its navy ground. These two restate the
   resting colour so hover stays the no-op the design intends. */
.k-filter.k-filter:hover {
	color: var(--kashi-navy);
}

.k-filter.is-active.k-filter:hover {
	color: #fff;
}

/* NET-NEW: with no hover style there is nothing to pair a focus ring with, and
   the pills are the archive's only keyboard control. */
.k-filter:focus-visible {
	outline: 2px solid var(--kashi-gold);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   02 · PROJECTS GRID
   -------------------------------------------------------------------------- */

.k-projects-grid {
	padding: clamp(44px, 5.5vw, 80px) var(--kashi-gut);
}

/* The two halves of the source's single section, rejoined. */
.k-filters + .k-projects-grid {
	padding-top: 0;
}

.k-projects-grid__list {
	display: grid;
	/* auto-FILL, not auto-fit: a short last row keeps card-width cards instead
	   of stretching two of them across the viewport. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
}

/* -----------------------------------------------------------------------------
   03 · PROJECT CARD — shared by the archive grid and the detail gallery
   -------------------------------------------------------------------------- */

.k-proj-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	background: var(--kashi-navy-deep);
}

/* NET-NEW: the client-side filter hides cards with the `hidden` attribute. The
   card is display:block, which beats the UA sheet's `[hidden]{display:none}`,
   so it has to be restated — and !important, because an Elementor or plugin
   reset writing `a{display:block}` would otherwise resurrect a hidden card. */
.k-proj-card[hidden] {
	display: none !important;
}

.k-proj-card__image {
	width: 100%;
	height: clamp(200px, 20vw, 260px);
	object-fit: cover;
	display: block;
	transition: var(--kashi-zoom);
}

/* NET-NEW: the source puts the hover on the <img>, but the caption gradient is
   painted over its lower third and eats the pointer there. The parent hover is
   added so the whole card responds. :focus-visible pairs it for the keyboard.
   These values are NOT the landing masonry's — that one is `transform .5s ease`
   with `scale(1.05)` and no opacity change. The two are never merged. */
.k-proj-card__image:hover,
.k-proj-card:hover .k-proj-card__image,
.k-proj-card:focus-visible .k-proj-card__image {
	transform: scale(1.06);
	opacity: 0.72;
}

.k-proj-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 20px;
	background: var(--kashi-grad-caption);
	color: #fff;
	display: block;
}

.k-proj-card__title {
	display: block;
	font-family: var(--kashi-font-display);
	font-size: 17px;
}

.k-proj-card__tag {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kashi-gold);
	margin-top: 6px;
}

/* -----------------------------------------------------------------------------
   04 · PROJECT META — the fact strip inside the Project Detail hero
   -------------------------------------------------------------------------- */

.k-projmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 40px;
}

.k-projmeta__label {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kashi-gold-muted);
	margin-bottom: 6px;
}

.k-projmeta__value {
	font-size: 14.5px;
	font-weight: 500;
}

/* -----------------------------------------------------------------------------
   05 · BEFORE / AFTER — the section shell only

   The sliders themselves are Kashi Core's, styled in the plugin's
   assets/css/kashi-modules.css. `.k-ba-stack` there supplies the column and its
   `gap:clamp(34px,4vw,56px)`; this file only adds the 1440px cap the source
   writes on the same element.
   -------------------------------------------------------------------------- */

.k-ba-section {
	padding-top: clamp(48px, 6vw, 86px);
	padding-bottom: clamp(48px, 6vw, 86px);
}

.k-ba-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	margin-bottom: clamp(30px, 3.6vw, 44px);
}

.k-ba-section__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 500;
	margin: 0;
}

.k-ba-section__lede {
	max-width: 520px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--kashi-text-dim);
	font-weight: 300;
	margin: 0;
}

.k-ba-section__stack {
	max-width: var(--kashi-max);
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   06 · SCOPE + QUOTE — the navy band
   -------------------------------------------------------------------------- */

.k-scope__inner {
	max-width: var(--kashi-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(34px, 4vw, 52px) var(--kashi-gut);
}

.k-scope__title {
	font-family: var(--kashi-font-display);
	font-size: clamp(25px, 2.8vw, 34px);
	font-weight: 500;
	margin: 0 0 20px;
}

.k-scope__list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	/* NET-NEW: the source's rows are <span>s. They are a <ul> here because a
	   scope of work is a list and a screen reader should be told how long it is;
	   these three neutralise the list chrome the design never had. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-scope__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	font-weight: 300;
	color: var(--kashi-on-dark-strong);
}

.k-scope__check {
	color: var(--kashi-gold);
	flex: none;
	margin-top: 2px;
}

.k-scope__quote {
	border-left: 1px solid var(--kashi-on-dark-14);
	padding-left: clamp(20px, 3vw, 40px);
	/* NET-NEW: the source's pane is a <div>; a <figure> carries the attribution
	   as a real <figcaption>, and brings a UA margin that has to go. */
	margin: 0;
}

.k-scope__mark {
	font-family: var(--kashi-font-display);
	font-size: 38px;
	line-height: 1;
	color: var(--kashi-gold);
	margin-bottom: 16px;
}

.k-scope__quote-text {
	font-size: 15.5px;
	line-height: 1.9;
	font-weight: 300;
	color: var(--kashi-on-dark-strong);
	margin: 0 0 18px;
}

.k-scope__author {
	font-size: 14.5px;
	font-weight: 500;
}

.k-scope__role {
	font-size: 12.5px;
	color: var(--kashi-on-dark-dim);
	font-weight: 300;
	margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   07 · PROJECT GALLERY

   A 260px track, twenty pixels tighter than the archive's 280px, with its own
   gap. Deliberately not merged with §02.
   -------------------------------------------------------------------------- */

.k-gallery {
	padding-top: clamp(44px, 5.5vw, 78px);
	padding-bottom: clamp(44px, 5.5vw, 78px);
}

.k-gallery__eyebrow {
	margin-bottom: 26px;
}

.k-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

/* -----------------------------------------------------------------------------
   08 · PROJECT NAV

   HAS a top rule and 26px above the row. post-nav (blog.css §08) has neither.
   The asymmetry is in the source and is not tidied away.
   -------------------------------------------------------------------------- */

.k-projnav {
	padding-top: 0;
	padding-bottom: clamp(44px, 5vw, 72px);
}

.k-projnav__row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--kashi-hairline-strong);
	padding-top: 26px;
}