/* JL Planners — Honeymoon Planner ("Planer podróży poślubnej").
 * Mobile-first, romantic/premium Polish-wedding styling. Repeater rows render as cards
 * on small screens and as compact grids on wider viewports. Reuses .jlp-btn / .jlp-field
 * / .jlp-input / .jlp-muted / .jlp-eyebrow from planner-shell.css. */

.jlp-hm {
	--hm-gold:       var( --jlp-gold );
	--hm-gold-soft:  var( --jlp-gold-glow );
	--hm-line:       var( --jlp-line );
	--hm-line-strong: var( --jlp-line-strong );
	--hm-ink:        var( --jlp-ink );
	--hm-ink-soft:   var( --jlp-ink-soft );
	--hm-muted:      var( --jlp-gold-deep );
	--hm-cream:      var( --jlp-cream );
	--hm-blush:      var( --jlp-blush );
	--hm-ok:         var( --jlp-ok );
	--hm-ok-bg:      var( --jlp-ok-bg );
	--hm-warn:       var( --jlp-warn );
	--hm-warn-bg:    var( --jlp-warn-bg );
	--hm-over:       var( --jlp-error );
	--hm-over-bg:    var( --jlp-error-bg );
	font-family: "Manrope", system-ui, sans-serif;
	color: var( --hm-ink );
}

.jlp-hm * { box-sizing: border-box; }

.jlp-hm-h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp( 1.5rem, 4vw, 2rem );
	font-weight: 500;
	margin: 0 0 .5rem;
}

.jlp-hm-section { margin: 0 0 1.9rem; }

.jlp-hm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	margin-bottom: .35rem;
}

.jlp-hm-hint-text { font-size: .9rem; margin: 0 0 .9rem; }
.jlp-hm-hint { display: block; font-size: .8rem; color: var( --hm-muted ); margin-top: .25rem; }
.jlp-hm-static { display: inline-block; padding: .55rem 0; font-weight: 600; }

/* ---------- locked preview banner ---------- */
.jlp-hm-locked {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem 1.15rem;
	margin: 0 0 1.6rem;
	background: linear-gradient( 135deg, var( --jlp-surface ), var( --hm-cream ) );
	border: 1px solid var( --hm-line );
	border-radius: 12px;
	box-shadow: 0 12px 30px -22px rgba( 42, 31, 26, .35 );
}
.jlp-hm-locked__icon { display: inline-flex; flex: 0 0 auto; color: var( --jlp-gold-deep ); line-height: 1; }
.jlp-hm-locked__body { flex: 1 1 220px; }
.jlp-hm-locked__text { font-size: .95rem; line-height: 1.5; color: var( --hm-ink-soft ); margin: 0 0 .6rem; }
.jlp-hm-locked__actions { display: flex; flex-wrap: wrap; gap: .45rem; }

.jlp-hm-export-hint { margin: .8rem 0 0; }

/* ---------- disclaimer ---------- */
.jlp-hm-disclaimer {
	font-size: .85rem;
	line-height: 1.5;
	color: var( --hm-ink-soft );
	background: var( --hm-warn-bg );
	border: 1px solid var( --jlp-gold-glow );
	border-radius: 10px;
	padding: .7rem .95rem;
	margin: 1rem 0 1.2rem;
}

/* ---------- next best action ---------- */
.jlp-hm-nextstep {
	margin: 1rem 0 0;
	padding: .85rem 1rem;
	border: 1px dashed var( --hm-line-strong );
	border-radius: 10px;
	background: var( --hm-gold-soft );
}
.jlp-hm-nextstep__text { margin: .25rem 0 0; font-size: .98rem; line-height: 1.5; color: var( --hm-ink-soft ); }
.jlp-hm[data-readonly="0"] .jlp-hm-nextstep[data-hm-nextstep-key="ready"] { background: var( --hm-ok-bg ); border-color: rgba( 46, 125, 50, .35 ); }
.jlp-hm[data-readonly="0"] .jlp-hm-nextstep[data-hm-nextstep-key="over_budget"] { background: var( --hm-over-bg ); border-color: rgba( 146, 43, 33, .35 ); }

/* ---------- overview grid ---------- */
.jlp-hm-overview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .9rem;
}
@media ( min-width: 640px ) {
	.jlp-hm-overview__grid { grid-template-columns: 1fr 1fr; }
}
@media ( min-width: 980px ) {
	.jlp-hm-overview__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.jlp-hm-overview__wide { grid-column: 1 / -1; }

/* ---------- budget cards ---------- */
.jlp-hm-cards {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: .6rem;
	margin: .4rem 0 .9rem;
}
@media ( min-width: 720px ) {
	.jlp-hm-cards { grid-template-columns: repeat( 3, 1fr ); }
}
@media ( min-width: 1040px ) {
	.jlp-hm-cards { grid-template-columns: repeat( 6, 1fr ); }
}
.jlp-hm-card {
	border: 1px solid var( --hm-line );
	border-radius: 10px;
	padding: .6rem .7rem;
	background: var( --jlp-surface );
}
.jlp-hm-card__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var( --hm-muted ); margin-bottom: .25rem; }
.jlp-hm-card__value { font-size: 1.02rem; color: var( --hm-ink ); }
.jlp-hm-card--remaining.is-over { border-color: var( --hm-over ); background: var( --hm-over-bg ); }
.jlp-hm-card--remaining.is-over .jlp-hm-card__value { color: var( --hm-over ); }

/* ---------- progress bars ---------- */
.jlp-hm-progress { height: 9px; border-radius: 6px; background: var( --hm-gold-soft ); overflow: hidden; margin: .35rem 0; }
.jlp-hm-progress__fill { height: 100%; background: var( --hm-ok ); transition: width .25s var( --jlp-ease, ease ); }
.jlp-hm-progress__fill.is-over { background: var( --hm-over ); }
.jlp-hm-progress__label { font-size: .85rem; color: var( --hm-ink-soft ); margin: .15rem 0 0; }
.jlp-hm-checklist__progress { font-size: .92rem; color: var( --hm-ink-soft ); margin: 0 0 .35rem; }

/* ---------- empty states ---------- */
.jlp-hm-empty { border: 1px dashed var( --hm-line ); border-radius: 10px; padding: .9rem 1rem; margin: .4rem 0 .8rem; background: var( --hm-cream ); }
.jlp-hm-empty p { margin: 0; }

/* ---------- repeaters ---------- */
.jlp-hm-repeater { margin: .2rem 0 .4rem; }
.jlp-hm-rows { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .7rem; }
.jlp-hm-add { margin-top: .2rem; }

.jlp-hm-row {
	border: 1px solid var( --hm-line );
	border-radius: 12px;
	padding: .8rem .9rem;
	background: var( --jlp-surface );
	box-shadow: 0 8px 24px -20px rgba( 42, 31, 26, .25 );
}
.jlp-hm-row__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.jlp-hm-row__tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var( --hm-muted ); font-weight: 700; }
.jlp-hm-del {
	border: 0; background: transparent; color: var( --hm-muted ); font-size: 1.35rem; line-height: 1;
	cursor: pointer; padding: 0 .25rem; border-radius: 6px;
}
.jlp-hm-del:hover { color: var( --hm-over ); background: var( --hm-over-bg ); }

.jlp-hm-row__grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media ( min-width: 640px ) {
	.jlp-hm-row__grid--day { grid-template-columns: repeat( 2, 1fr ); }
	.jlp-hm-row__grid--expense { grid-template-columns: repeat( 2, 1fr ); }
	.jlp-hm-row__grid--contact { grid-template-columns: repeat( 2, 1fr ); }
	.jlp-hm-row__grid--check { grid-template-columns: 2fr 1fr 2fr; }
}
@media ( min-width: 980px ) {
	.jlp-hm-row__grid--day { grid-template-columns: 8rem 6.5rem 1.4fr 1.4fr 1fr 7rem 1.4fr; }
	.jlp-hm-row__grid--expense { grid-template-columns: 1fr 1.6fr 7rem 7rem 5rem 1.4fr; }
	.jlp-hm-row__grid--contact { grid-template-columns: 1fr 1.4fr 1fr 1.4fr 1.4fr; }
}
.jlp-hm-cell { min-width: 0; }
.jlp-hm-cell--notes textarea { resize: vertical; min-height: 2.2rem; }
.jlp-hm-num { text-align: right; }

/* checklist row layout */
.jlp-hm-row--check { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .6rem; }
.jlp-hm-check__box { display: inline-flex; align-items: center; padding-top: .15rem; cursor: pointer; }
.jlp-hm-check__box input { width: 1.15rem; height: 1.15rem; accent-color: var( --hm-gold ); cursor: pointer; }
.jlp-hm-check__mark { display: none; }
.jlp-hm-row--check.is-done { background: var( --hm-ok-bg ); border-color: rgba( 46, 125, 50, .3 ); }
.jlp-hm-row--check.is-done .jlp-hm-cell--label .jlp-input { color: var( --hm-ok ); text-decoration: line-through; }

.jlp-hm-cell--paid { display: flex; flex-direction: column; }
.jlp-hm-cell--paid .jlp-hm-checkbox { width: 1.15rem; height: 1.15rem; accent-color: var( --hm-gold ); margin-top: .35rem; }

/* ---------- foot totals ---------- */
.jlp-hm-foot {
	display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
	padding: .65rem .9rem; margin-top: .2rem;
	border: 1px solid var( --hm-line ); border-radius: 10px;
	background: var( --hm-cream ); font-size: .92rem;
}
.jlp-hm-foot strong { color: var( --hm-ink ); }

/* ---------- public marketing snippet ---------- */
.jlp-hm-public__perks { margin: 1rem 0; padding-left: 1.1rem; }
.jlp-hm-public__perks li { margin: .35rem 0; line-height: 1.5; }
.jlp-hm-public__note { font-size: .9rem; color: var( --hm-ink-soft ); background: var( --hm-warn-bg ); border: 1px solid var( --jlp-gold-glow ); border-radius: 10px; padding: .7rem .95rem; }
.jlp-hm-public__cta { font-weight: 600; margin-top: 1rem; }

/* read-only / preview niceties */
.jlp-hm[data-readonly="1"] .jlp-input,
.jlp-hm[data-readonly="1"] .jlp-hm-checkbox { background: var( --hm-cream ); }