/* =========================================================================
   «Фундамент» — the modules' pages re-dressed: house project cards, the
   catalogue with its filter, the project page, built houses (portfolio).
   Linked after the modules' own styles.
   ========================================================================= */

.fd-wrap { max-width: var(--w-wide); }

/* -------------------------------------------------------------------------
   Project card («sheet»)
   ------------------------------------------------------------------------- */

.fd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fd-surface);
    border: var(--fd-hair);
    border-radius: var(--fd-r);
    overflow: hidden;
    transition: box-shadow 250ms var(--ease), transform 250ms var(--ease);
}
.fd-card:hover { box-shadow: var(--shadow-lg); }
.fd-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fd-sunk); }
.fd-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.fd-card:hover .fd-card__img { transform: scale(1.035); }
.fd-card__ph { display: grid; place-items: center; height: 100%; padding: 1.5rem 2.5rem; color: var(--fd-pine); opacity: 0.35; }
.fd-card__code {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    padding: 0.25rem 0.55rem;
    background: rgb(244 239 230 / 0.92);
    color: var(--fd-ink);
    font-family: var(--fd-figs);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}
.fd-card .shop-stickers { z-index: 2; }
.fd-card__body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 1.3rem 1.3rem 1.2rem; }
.fd-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--c-text-strong); }
.fd-card__link { color: inherit; text-decoration: none; }
.fd-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.fd-card__link:focus-visible { outline: none; }
.fd-card:has(.fd-card__link:focus-visible) { outline: 2px solid var(--fd-pine); outline-offset: 3px; }
.fd-card__lead { color: var(--c-text-muted); font-size: var(--t-sm); line-height: 1.55; }
.fd-card__specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: var(--fd-hair);
    border-bottom: var(--fd-hair);
}
.fd-card__spec { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.1rem; padding: 0.6rem 0.5rem 0.55rem 0; min-width: 0; }
.fd-card__spec + .fd-card__spec { padding-left: 0.6rem; border-left: var(--fd-hair); }
.fd-card__spec dt { font-size: 0.68rem; line-height: 1.25; color: var(--c-text-muted); overflow-wrap: anywhere; }
.fd-card__spec dd { margin: 0; font-family: var(--fd-figs); font-size: 1rem; line-height: 1.2; color: var(--c-text-strong); overflow-wrap: anywhere; }
.fd-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: auto; }
.fd-card .shop-price__now { font-family: var(--fd-figs); font-size: 1.35rem; font-weight: 400; color: var(--c-text-strong); }
.fd-card .shop-price__from { font-family: var(--font-ui); font-size: 0.85rem; color: var(--c-text-muted); }
.fd-card__go {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border: 1px solid color-mix(in srgb, var(--fd-pine) 45%, transparent);
    border-radius: 50%;
    color: var(--fd-pine);
    transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.fd-card:hover .fd-card__go { background: var(--fd-pine); color: #f7f3ea; }

.fd-card--row { flex-direction: row; }
.fd-card--row .fd-card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 14rem; }

/* «Фото во всю карточку» */
html[data-fundament-cards="photo"] .fd-card--grid { min-height: 30rem; border: 0; color: #fbf8f1; background: var(--fd-pine-deep); }
html[data-fundament-cards="photo"] .fd-card--grid .fd-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
html[data-fundament-cards="photo"] .fd-card--grid .fd-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 22 17 / 0) 35%, rgb(15 22 17 / 0.88) 100%); }
html[data-fundament-cards="photo"] .fd-card--grid .fd-card__code { top: 0.8rem; bottom: auto; }
html[data-fundament-cards="photo"] .fd-card--grid .fd-card__body { position: relative; margin-top: auto; --fd-hair: 1px solid rgb(255 255 255 / 0.3); --c-text-strong: #ffffff; --c-text-muted: rgb(251 248 241 / 0.75); }
html[data-fundament-cards="photo"] .fd-card--grid .fd-card__go { border-color: rgb(255 255 255 / 0.6); color: #ffffff; }

/* Grids of cards (blocks, related) */
.fd-body .shop-grid { gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); }
.shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -------------------------------------------------------------------------
   Catalogue page
   ------------------------------------------------------------------------- */

.fd-cat__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: clamp(2rem, 1.4rem + 2.5vw, 4rem) var(--gutter) var(--s-6);
    border-bottom: var(--fd-hair);
}
.fd-cat__head--image { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; }
.fd-cat__title { margin-top: 0.8rem; font-family: var(--font-display); font-weight: 300; font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -0.035em; color: var(--c-text-strong); }
.fd-cat__lead { max-width: 40rem; margin-top: 1rem; font-size: var(--t-md); line-height: 1.6; color: var(--c-text-muted); }
.fd-cat__count { margin-top: 1.2rem; font-family: var(--fd-figs); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; color: var(--c-mark-text); }
.fd-cat__pic { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fd-r); }
.fd-cat__img { width: 100%; height: 100%; object-fit: cover; }
.fd-cat__drawing { position: absolute; right: var(--gutter); bottom: 1rem; width: min(22rem, 34%); color: var(--fd-pine); opacity: 0.16; pointer-events: none; }
.fd-cat__nav { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); border-bottom: var(--fd-hair); overflow-x: auto; }
.fd-cat__tabs { display: flex; gap: 0.2rem 1.8rem; margin: 0; padding: 0; list-style: none; }
.fd-cat__tab {
    display: inline-flex;
    align-items: center;
    min-height: 3.4rem;
    color: var(--c-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.fd-cat__tab:hover { color: var(--c-text-strong); }
.fd-cat__tab[aria-current] { color: var(--c-text-strong); border-bottom-color: var(--fd-wood); }
.fd-cat__wrap { max-width: var(--w-wide); padding-top: var(--s-6); }
.fd-cat .shop-side { background: transparent; }
.fd-cat .shop-toolbar { border-bottom: var(--fd-hair); padding-bottom: 0.8rem; }
.fd-cat .shop-toolbar__count { font-family: var(--fd-figs); letter-spacing: 0.06em; }
.fd-cat__empty { padding: var(--s-7) 0; }

/* Filter: ruled groups, pine ticks */
.fd-body .shop-filter { --c-accent: var(--fd-pine); }
.fd-body .shop-filter__group { border-color: var(--fd-line); }
.fd-body .shop-filter__title, .fd-body .shop-filter summary { font-family: var(--fd-figs); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; }

/* -------------------------------------------------------------------------
   Project page
   ------------------------------------------------------------------------- */

.fd-project .shop-crumbs { padding-top: var(--s-5); }
.fd-project__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 4rem);
    align-items: start;
    margin-top: var(--s-4);
}
.fd-project__gallery .shop-gallery { border-radius: var(--fd-r); }
.fd-project__summary { position: sticky; top: 6.5rem; display: grid; gap: 1.3rem; }
.fd-project__code { font-family: var(--fd-figs); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-mark-text); }
.fd-project__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--c-text-strong); }
.fd-project__lead { font-size: var(--t-md); line-height: 1.6; color: var(--c-text-muted); }
.fd-project__stamp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-project__stamp .fd-stamp__value { font-size: 1.35rem; }

.fd-offer { padding: 1.3rem 1.3rem 1.4rem; background: var(--fd-surface); border: var(--fd-hair); }
.fd-offer__title { font-family: var(--fd-figs); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-muted); }
.fd-offer__list { display: grid; gap: 0.1rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.fd-offer__row { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.4rem; }
.fd-offer__name { color: var(--c-text); }
.fd-offer__dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--c-text) 40%, transparent); transform: translateY(-0.25em); }
.fd-offer__price { font-family: var(--fd-figs); font-size: 1.2rem; color: var(--c-text-strong); white-space: nowrap; }
.fd-offer__row:first-child .fd-offer__price { color: var(--fd-pine); font-size: 1.45rem; }
.fd-offer__actions { margin-top: 1.1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fd-offer .shop-price__now { font-family: var(--fd-figs); font-size: 2rem; font-weight: 300; }

.fd-project__details {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas: 'desc plan' 'specs plan';
    gap: var(--s-6) clamp(1.5rem, 1rem + 3vw, 4rem);
    margin-top: clamp(3rem, 2rem + 4vw, 6rem);
    padding-top: var(--s-6);
    border-top: var(--fd-hair);
}
.fd-project__desc { grid-area: desc; }
.fd-project__specs { grid-area: specs; }
.fd-project__plan { grid-area: plan; align-self: start; position: sticky; top: 7rem; padding: 1.5rem; border: var(--fd-hair); color: var(--fd-pine); background: var(--fd-surface); }
.fd-project__h2 { margin-bottom: 1rem; font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); letter-spacing: -0.02em; color: var(--c-text-strong); }
.fd-related { padding-block: var(--sp-sm) var(--sp-md); }
.fd-related .shop-related__title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); letter-spacing: -0.02em; margin-bottom: var(--s-6); }

/* -------------------------------------------------------------------------
   Built houses (portfolio)
   ------------------------------------------------------------------------- */

.fd-body .pf-card { border-radius: var(--fd-r); }
.fd-body .pf-card__title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.fd-body .pf-card__meta, .fd-body .pf-card__cats { font-family: var(--fd-figs); letter-spacing: 0.08em; }
.fd-body .pf-card--cards { background: var(--fd-surface); border: var(--fd-hair); }

/* -------------------------------------------------------------------------
   Phones and tablets
   ------------------------------------------------------------------------- */

@media (max-width: 63.99rem) {
    .fd-project__top, .fd-project__details { grid-template-columns: minmax(0, 1fr); }
    .fd-project__details { grid-template-areas: 'desc' 'specs' 'plan'; }
    .fd-project__summary, .fd-project__plan { position: static; }
    .shop-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fd-cat__head--image { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 35.99rem) {
    .shop-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .fd-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fd-card__spec:nth-child(3) { padding-left: 0; border-left: 0; }
    .fd-card__spec:nth-child(n + 3) { border-top: var(--fd-hair); }
    .fd-card--row { flex-direction: column; }
    .fd-offer__actions { grid-template-columns: minmax(0, 1fr); }
    .fd-cat__drawing { display: none; }
}

/* -------------------------------------------------------------------------
   Narrow cards (four in a row, the catalogue beside its filter): the
   spec strip folds into two rows of two.
   ------------------------------------------------------------------------- */

.fd-card { container-type: inline-size; }
.fd-card .shop-price__value { font-family: var(--fd-figs); font-weight: 400; }
@container (max-width: 21rem) {
    .fd-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fd-card__spec:nth-child(3) { padding-left: 0; border-left: 0; }
    .fd-card__spec:nth-child(n + 3) { border-top: var(--fd-hair); }
    .fd-card__title { font-size: 1.3rem; }
}

.fd-cat .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-cat__views { display: none; }
@media (max-width: 74.99rem) { .fd-cat .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35.99rem) { .fd-cat .shop-grid { grid-template-columns: minmax(0, 1fr); } }

/* Phones: one project per row — a house needs the width. */
@media (max-width: 35.99rem) {
    .fd-body .shop-grid,
    .fd-body .cms-items--grid.shop-items { grid-template-columns: minmax(0, 1fr); }
}