/*
 * Мебель Дельта — Components
 * Buttons, Cards, Forms, Modals
 */

/* === Buttons === */
.btn { display: inline-block; padding: 14px 32px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease); border: 1px solid transparent; line-height: 1; }
.btn--primary { background: var(--c-graphite); color: #fff; border-color: var(--c-graphite); }
.btn--primary:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-graphite); transform: translateY(-2px); }
.btn--gold { background: var(--c-gold); color: var(--c-graphite); }
.btn--gold:hover { background: var(--c-gold-hover); transform: translateY(-2px); }
.btn--outline { background: transparent; border-color: var(--c-graphite); color: var(--c-graphite); }
.btn--outline:hover { background: var(--c-graphite); color: #fff; }
.btn--outline-white { background: transparent; border-color: #fff; color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--c-graphite); }
.btn--white { background: #fff; color: var(--c-emerald); }
.btn--white:hover { background: var(--c-light); }
.btn--full { width: 100%; }
.btn--lg { padding: 16px 48px; }

/* === Cards === */
.card { background: var(--c-white); overflow: hidden; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card__img { width: 100%; height: 16rem; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.card:hover .card__img { transform: scale(1.05); }
.card__body { padding: var(--sp-6); }
.card__tag { position: absolute; top: var(--sp-4); left: var(--sp-4); padding: 4px 12px; font-size: var(--fs-xs); color: #fff; z-index: 1; background: rgba(44,45,47,0.85); letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; backdrop-filter: blur(4px); }
.card__tag--new { background: var(--c-emerald); }
.card__tag--sale { background: var(--c-burgundy); }
.card__title { font-family: var(--f-heading); font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.card__price { font-family: var(--f-heading); font-size: var(--fs-2xl); }
.card__price-old { font-size: var(--fs-sm); color: var(--c-text-light); text-decoration: line-through; margin-left: var(--sp-2); }

/* === Portfolio Card === */
.pcard { position: relative; overflow: hidden; display: block; aspect-ratio: 4/3; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); display: block; }
.pcard:hover .pcard__img { transform: scale(1.1); }
.pcard__overlay { position: absolute; inset: 0; background: rgba(44,45,47,0); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background var(--duration) var(--ease); }
.pcard:hover .pcard__overlay { background: rgba(44,45,47,0.65); }
.pcard__content { opacity: 0; transform: translateY(10px); transition: all var(--duration) var(--ease); text-align: center; color: #fff; }
.pcard:hover .pcard__content { opacity: 1; transform: translateY(0); }
.pcard__label { position: absolute; bottom: var(--sp-6); left: var(--sp-6); }
.pcard__label h3 { font-family: var(--f-heading); font-size: var(--fs-2xl); color: #fff; }

/* === Forms === */
.form-input { width: 100%; padding: 14px 18px; border: 1px solid var(--c-border); font-size: var(--fs-base); transition: border-color var(--duration) var(--ease); background: var(--c-white); }
.form-input:focus { outline: none; border-color: var(--c-gold); }
.form-input.error { border-color: var(--c-burgundy); }
.form-error { color: var(--c-burgundy); font-size: var(--fs-xs); margin-top: var(--sp-1); display: none; }
.form-input.error + .form-error { display: block; }
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* === Modals === */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; visibility: hidden; transition: all var(--duration) var(--ease); }
.modal.active { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(44,45,47,0.8); }
.modal__content { position: relative; background: var(--c-white); max-width: 480px; width: 100%; padding: var(--sp-8); transform: translateY(-20px); transition: transform var(--duration) var(--ease); z-index: 1; }
.modal.active .modal__content { transform: translateY(0); }
.modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); color: var(--c-text-muted); transition: color var(--duration) var(--ease); padding: var(--sp-2); }
.modal__close:hover { color: var(--c-text); }
.modal__close svg { width: 24px; height: 24px; }
.modal__title { font-family: var(--f-heading); font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.modal__subtitle { color: var(--c-text-muted); margin-bottom: var(--sp-6); }

/* === Breadcrumbs === */
.breadcrumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--c-gold); }
.breadcrumbs__sep { color: var(--c-border); }
.breadcrumbs__current { color: var(--c-text); }
.breadcrumbs--light, .breadcrumbs--light a, .breadcrumbs--light .breadcrumbs__sep { color: rgba(255,255,255,0.65); }
.breadcrumbs--light .breadcrumbs__current { color: rgba(255,255,255,0.9); }
.breadcrumbs--light a:hover { color: #fff; }

/* === Drop Cap (Editorial) === */
.drop-cap::first-letter { font-family: var(--f-heading); font-size: 4.5em; float: left; line-height: 0.8; margin-right: 0.08em; margin-top: 0.05em; color: var(--c-gold); font-weight: 600; }

/* === Pull Quote === */
.pull-quote { font-family: var(--f-heading); font-size: var(--fs-3xl); font-style: italic; color: var(--c-gold); line-height: 1.4; padding: var(--sp-8) 0; margin: var(--sp-8) 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); position: relative; }
.pull-quote::before { content: '«'; font-size: var(--fs-6xl); position: absolute; top: var(--sp-4); left: -0.1em; color: var(--c-gold); opacity: 0.3; line-height: 1; }

/* === Corner Marks (Decorative) === */
.corner-marks { position: relative; --corner-offset: 0px; }
.corner-marks::before, .corner-marks::after { content: ''; position: absolute; width: 40px; height: 40px; border-color: var(--c-gold); border-style: solid; opacity: 0.4; pointer-events: none; transition: none; }
.corner-marks::before { top: var(--corner-offset); left: var(--corner-offset); border-width: 1px 0 0 1px; }
.corner-marks::after { bottom: var(--corner-offset); right: var(--corner-offset); border-width: 0 1px 1px 0; }

/* === Numbered Feature (Cutefold 001-004) === */
.nf { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: start; padding: var(--sp-10) 0; border-bottom: 1px solid var(--c-border-light); }
.nf__num { font-family: var(--f-heading); font-size: var(--fs-5xl); color: var(--c-gold); opacity: 0.7; line-height: 1; font-weight: 300; min-width: 5rem; }
.nf__body { max-width: 36rem; }
.nf__title { font-family: var(--f-heading); font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.nf__text { color: var(--c-text-muted); line-height: 1.7; font-size: var(--fs-base); }
@media (min-width: 768px) { .nf__num { font-size: var(--fs-7xl); min-width: 7rem; } .nf { gap: var(--sp-12); padding: var(--sp-12) 0; } }

/* === Spec Labels (Cutefold-style dimensions) === */
.spec-list { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-6) 0; }
.spec-item { display: flex; align-items: baseline; gap: var(--sp-2); }
.spec-item__label { font-size: var(--fs-xs); color: var(--c-text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.spec-item__label::before { content: '( '; }
.spec-item__label::after { content: ' )'; }
.spec-item__val { font-family: var(--f-heading); font-size: var(--fs-xl); }

/* === Large Quote (Sam & Natt style) === */
.quote-large { text-align: center; max-width: 52rem; margin: 0 auto; }
.quote-large__marks { font-family: var(--f-heading); font-size: var(--fs-8xl); color: var(--c-gold); opacity: 0.25; line-height: 0.5; display: block; margin-bottom: var(--sp-4); }
.quote-large__text { font-family: var(--f-heading); font-size: var(--fs-2xl); font-style: italic; line-height: 1.6; margin-bottom: var(--sp-8); }
.quote-large__author { font-size: var(--fs-base); font-weight: 600; }
.quote-large__location { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-1); }
.quote-large__stars { color: var(--c-gold); font-size: var(--fs-lg); margin-top: var(--sp-4); }
@media (min-width: 768px) { .quote-large__text { font-size: var(--fs-3xl); } .quote-large__marks { font-size: var(--fs-9xl); } }