/* Inna Warszawa: "Dziennik Warszawski" (/odkryj/). Brda landing components on soft.css; the sample page and photo layouts live here. */

.iwcs-journal { --j-ink: #2f46a0; --j-hand: 'Instrument Serif', Georgia, serif; }

/* ------------------------------------------------------------ Hero: a filled spread, the cover tucked under it */
.iwcs-soft .iwcs-journal .iwcs-book-hero h1 { font-size: clamp(72px, 10vw, 150px); }
.iwcs-journal-hero__visual { padding: 24px 0 40px; }
/* The mockups sit on white; multiply lets the paper glow show through. */
.iwcs-journal-hero__spread { display: block; width: min(100%, 620px); height: auto; mix-blend-mode: multiply; rotate: -2deg; animation: iwcs-cover-rise 1.2s var(--s-ease) .1s backwards; }
.iwcs-journal-hero__cover {
	position: absolute; left: 0; bottom: 30px; width: clamp(96px, 13vw, 180px); height: auto; border-radius: 3px; rotate: -8deg;
	box-shadow: 0 1px 2px rgb(var(--s-shadow) / .2), 0 30px 50px -20px rgb(var(--s-shadow) / .55);
	transition: rotate .9s var(--s-ease), translate .9s var(--s-ease);
	animation: iwcs-cover-rise 1.2s var(--s-ease) .35s backwards;
}
.iwcs-journal-hero__visual:hover .iwcs-journal-hero__cover { rotate: -3deg; translate: 0 -10px; }
.iwcs-soft .iwcs-journal-hero figcaption { align-self: flex-end; margin-top: 20px; max-width: 240px; text-align: right; }

/* ------------------------------------------------------------ Try it: form + live sheet */
.iwcs-soft .iwcs-journal-try { background: var(--s-sand); }
.iwcs-journal-try__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.iwcs-journal-form .iwcs-bezel__core { display: grid; gap: 22px; padding: 28px; }
.iwcs-journal-field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.iwcs-journal-field > span, .iwcs-journal-field legend { padding: 0; color: var(--s-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.iwcs-journal-field legend { margin-bottom: 10px; }
.iwcs-journal-field output { color: var(--j-ink); }
.iwcs-journal-field :is(input[type="text"], textarea) {
	width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--s-cream); box-shadow: inset 0 0 0 1px var(--s-line);
	color: var(--j-ink); font: italic 22px/1.3 var(--j-hand); resize: vertical;
}
.iwcs-journal-field :is(input[type="text"], textarea):focus { outline: 2px solid var(--j-ink); outline-offset: 2px; }
.iwcs-journal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iwcs-journal-chips label { position: relative; cursor: pointer; }
.iwcs-journal-chips input { position: absolute; opacity: 0; pointer-events: none; }
.iwcs-journal-chips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--s-cream); box-shadow: inset 0 0 0 1px var(--s-line); color: var(--s-ink); font-size: 13.5px; transition: background-color .3s var(--s-ease), color .3s var(--s-ease); }
.iwcs-journal-chips label:hover span { background: rgb(47 70 160 / .08); }
.iwcs-journal-chips input:checked + span { background: var(--j-ink); color: #fff; box-shadow: none; }
.iwcs-journal-chips input:focus-visible + span { outline: 2px solid var(--j-ink); outline-offset: 2px; }
.iwcs-journal-rose-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.iwcs-journal-rose-inputs label { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.iwcs-journal input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--j-ink); }

/* The sheet copies the printed city page: grey labels, blue handwriting. */
.iwcs-journal-try__sheet-wrap { position: sticky; top: 100px; }
.iwcs-journal-sheet {
	position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 4px; rotate: 1deg; background: #fdfcf8; color: #6b6a66; font-size: 11px;
	box-shadow: 0 1px 2px rgb(var(--s-shadow) / .15), 0 40px 70px -30px rgb(var(--s-shadow) / .45);
}
.iwcs-journal-sheet__row { margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px dotted #b9b7b0; }
.iwcs-journal-sheet small { display: block; font-size: 11px; letter-spacing: .02em; }
.iwcs-journal-sheet b { display: block; min-height: 1.2em; color: var(--j-ink); font: italic 400 22px/1.25 var(--j-hand); overflow-wrap: anywhere; }
.iwcs-journal-sheet__place { padding: 10px 12px; border: 0; background: repeating-linear-gradient(135deg, #f1efe9 0 2px, transparent 2px 5px); }
.iwcs-journal-sheet__place b { font-size: 34px; }
.iwcs-journal-sheet__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.iwcs-journal-sheet__types { list-style: none; margin: 0 0 14px; padding: 0; }
.iwcs-journal-sheet__types li { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.iwcs-journal-sheet__types li::before { content: ''; width: 10px; height: 10px; border: 1px solid #8f8d87; border-radius: 50%; transition: background-color .3s var(--s-ease), box-shadow .3s var(--s-ease); }
.iwcs-journal-sheet__types li.is-on { color: var(--j-ink); }
.iwcs-journal-sheet__types li.is-on::before { border-color: var(--j-ink); background: var(--j-ink); box-shadow: 0 0 0 3px rgb(47 70 160 / .15); }
.iwcs-journal-sheet__bottom { align-items: end; margin-top: 8px; }
.iwcs-journal-rose { display: block; width: 100%; height: auto; overflow: visible; }
.iwcs-journal-rose :is(circle, line) { fill: none; stroke: #b9b7b0; stroke-width: .8; }
.iwcs-journal-rose text { fill: #6b6a66; font: 11px Lato, Arial, sans-serif; }
.iwcs-journal-rose polygon { fill: rgb(47 70 160 / .14); stroke: var(--j-ink); stroke-width: 2; stroke-linejoin: round; transition: all .3s var(--s-ease); }
.iwcs-journal-sheet__scale { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; }
.iwcs-journal-sheet__scale i { position: relative; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #8f8d87 0 1px, transparent 1px 11.1%) , #b9b7b0; }
.iwcs-journal-sheet__scale b { position: absolute; top: 50%; translate: -50% -55%; font-size: 26px; font-style: normal; transition: left .3s var(--s-ease); }
.iwcs-journal-sheet__paste { position: relative; min-height: 150px; padding: 8px; background: repeating-linear-gradient(135deg, #f1efe9 0 2px, transparent 2px 5px); }
.iwcs-journal-sheet__paste img { position: absolute; right: 10px; bottom: -14px; width: 46%; height: auto; padding: 6px 6px 18px; background: #fff; rotate: 5deg; box-shadow: 0 12px 24px -12px rgb(var(--s-shadow) / .5); }
.iwcs-journal-try__cta { margin: 36px 0 0; color: var(--s-muted); font-size: 15px; text-align: center; }
.iwcs-journal-try__cta a { color: var(--s-accent); font-weight: 700; }

/* ------------------------------------------------------------ Photos */
.iwcs-journal-photo { position: relative; display: block; margin: 8px; overflow: hidden; border-radius: 17px; background: #e6dfd3; }
.iwcs-journal-photo img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--s-ease); }
.iwcs-journal-photo:hover img { transform: scale(1.03); }
.iwcs-soft .iwcs-journal .iwcs-spread-zoom { position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgb(255 253 248 / .9); box-shadow: inset 0 0 0 1px var(--s-line); color: var(--s-ink); font-size: 11.5px; }

.iwcs-journal-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(56px, 7vw, 96px); }
.iwcs-journal-gallery figure, .iwcs-journal-prints figure, .iwcs-journal-gift__inner figure { margin: 0; }
.iwcs-journal-gallery__wide { grid-column: 1 / -1; }
.iwcs-journal-gallery figure:not(.iwcs-journal-gallery__wide) img { aspect-ratio: 4 / 5; object-fit: cover; }
.iwcs-journal-gallery__cutout .iwcs-journal-photo { background: #fff; }

.iwcs-soft .iwcs-journal-fit { background: var(--s-sand); }
.iwcs-journal-prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: 1000px; margin: 0 auto; }
.iwcs-journal-prints > div:first-child { rotate: -1.5deg; }
.iwcs-journal-prints > div:last-child { rotate: 1.5deg; translate: 0 32px; }
.iwcs-journal-print .iwcs-journal-photo { background: #fff; }
.iwcs-journal-prints p { margin: 18px 0 0; color: var(--s-muted); font-size: 14px; text-align: center; }
.iwcs-journal-prints b { display: block; color: var(--s-ink); font-family: var(--s-serif); font-size: 26px; font-weight: 400; }

.iwcs-journal-gift__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.iwcs-journal-gift__inner figure { rotate: -2deg; }
.iwcs-journal-gift__inner .iwcs-soft-heading { margin-bottom: 0; }

/* ------------------------------------------------------------ Tablet + mobile */
@media (max-width: 1024px) {
	.iwcs-journal-try__grid { grid-template-columns: 1fr; }
	.iwcs-journal-try__sheet-wrap { position: static; grid-row: 1; }
}
@media (max-width: 767px) {
	/* The spread explains the product, so it gets the full width under the title. */
	.iwcs-journal .iwcs-book-hero__inner { grid-template-columns: 1fr; }
	.iwcs-soft .iwcs-journal .iwcs-book-hero h1 { font-size: clamp(60px, 18vw, 84px); }
	.iwcs-journal .iwcs-book-hero__visual { grid-column: 1; grid-row: 2; padding: 18px 0 10px; }
	.iwcs-journal .iwcs-book-hero__offer { grid-row: 3; padding-top: 12px; }
	.iwcs-journal-hero__cover { bottom: 0; }
	.iwcs-soft .iwcs-journal .iwcs-book-hero figcaption { display: none; }
	.iwcs-journal-form .iwcs-bezel__core { padding: 20px 16px; }
	.iwcs-journal-rose-inputs { grid-template-columns: 1fr; }
	.iwcs-journal-sheet { rotate: 0deg; padding: 18px; }
	.iwcs-journal-sheet b { font-size: 19px; }
	.iwcs-journal-sheet__place b { font-size: 26px; }
	.iwcs-journal-sheet__cols { gap: 14px; }
	.iwcs-journal-sheet__bottom { grid-template-columns: 1fr; }
	.iwcs-journal-sheet__paste { display: none; }
	.iwcs-journal-gallery, .iwcs-journal-prints, .iwcs-journal-gift__inner { grid-template-columns: 1fr; gap: 16px; }
	.iwcs-journal-prints { gap: 40px; }
	.iwcs-journal-prints > div:last-child { translate: none; }
	.iwcs-journal-photo { border-radius: 14px; }
	.iwcs-soft.iwcs-journal-landing .iwcs-site-footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.iwcs-journal-hero__spread, .iwcs-journal-hero__cover, .iwcs-journal-rose polygon, .iwcs-journal-sheet__scale b { animation: none; transition: none; }
}