/* Inna Warszawa: "O wydawnictwie" (/inna-warszawa-glowna/). Shared tokens and components live in soft.css. */

/* ------------------------------------------------------------ Hero */
.iwcs-about-hero {
	position: relative; overflow: hidden; padding: clamp(72px, 9vw, 140px) 28px clamp(110px, 12vw, 180px);
	background:
		radial-gradient(ellipse 55% 65% at 80% 45%, #eadbc7 0%, transparent 70%),
		radial-gradient(ellipse 40% 50% at 8% 30%, #f1e8dc 0%, transparent 70%),
		var(--s-cream);
}
.iwcs-about-hero__inner { max-width: 1216px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: clamp(40px, 5vw, 80px); }
.iwcs-about-page h1 { margin: 0; font-size: clamp(76px, 11vw, 172px); line-height: .84; letter-spacing: -.035em; }
.iwcs-about-page h1 em { display: block; margin-left: .04em; }
.iwcs-about-hero__lead { margin: 36px 0 0; max-width: 30em; color: var(--s-muted); font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; text-wrap: pretty; }
.iwcs-about-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 480px; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--s-line); }
.iwcs-about-hero__facts dt { margin-bottom: 6px; color: var(--s-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.iwcs-about-hero__facts dd { margin: 0; font-family: var(--s-serif); font-size: 46px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }

/* Covers overlap like books dropped on a table; each rises in on load. */
.iwcs-about-hero__shelf { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.iwcs-about-hero__shelf img {
	--r: 0deg; --y: 0px;
	position: relative; display: block; width: 32%; max-width: 240px; height: auto; margin-left: -9.5%; border-radius: 3px;
	box-shadow: 0 1px 2px rgb(var(--s-shadow) / .2), 0 30px 50px -18px rgb(var(--s-shadow) / .45), 0 8px 16px -8px rgb(var(--s-shadow) / .2);
	rotate: var(--r); translate: 0 var(--y);
	transition: translate .9s var(--s-ease), rotate .9s var(--s-ease);
	animation: iwcs-about-rise 1.2s var(--s-ease) backwards;
}
.iwcs-about-hero__shelf img:first-child { margin-left: 0; }
.iwcs-about-hero__shelf img:nth-child(1) { --r: -7deg; --y: 18px; animation-delay: .15s; }
.iwcs-about-hero__shelf img:nth-child(2) { --r: -2deg; --y: -26px; animation-delay: .25s; }
.iwcs-about-hero__shelf img:nth-child(3) { --r: 3deg; --y: -4px; animation-delay: .35s; }
.iwcs-about-hero__shelf img:nth-child(4) { --r: 8deg; --y: 22px; animation-delay: .45s; }
.iwcs-about-hero__shelf:hover img { --r: 0deg; }
.iwcs-about-hero__shelf img:hover { translate: 0 calc(var(--y) - 16px); }
@keyframes iwcs-about-rise { from { opacity: 0; translate: 0 calc(var(--y) + 80px); } }

/* ---------------------------------------- Catalogue: asymmetric bento */
.iwcs-about-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.iwcs-about-grid > li { grid-column: span 5; }
.iwcs-about-grid > li:is(:nth-child(4n+1), :nth-child(4n)) { grid-column: span 7; }
.iwcs-about-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Double bezel: a tinted tray holding the card. */
/* Cards are .iwcs-bezel trays (soft.css). */
.iwcs-about-card__core { display: grid; grid-template-rows: auto 1fr; }
.iwcs-about-grid > li:is(:nth-child(4n+1), :nth-child(4n), :last-child:nth-child(odd)) .iwcs-about-card__core { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; }

.iwcs-about-cover {
	position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; margin: 8px; padding: 9% 12%; border-radius: 17px; overflow: hidden;
	background: radial-gradient(ellipse 80% 70% at 50% 42%, #f8f1e6 0%, #ebe2d4 100%);
}
.iwcs-about-cover img {
	display: block; width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 2px;
	box-shadow: 0 1px 2px rgb(var(--s-shadow) / .2), 0 26px 40px -20px rgb(var(--s-shadow) / .5);
	transition: transform .9s var(--s-ease);
}
.iwcs-about-grid > li:not(:nth-child(4n+1)):not(:nth-child(4n)) .iwcs-about-cover { min-height: 0; aspect-ratio: 16 / 11; }
/* A percentage max-height does not resolve inside an aspect-ratio box, so the book is centred absolutely. */
.iwcs-about-grid > li:not(:nth-child(4n+1)):not(:nth-child(4n)) .iwcs-about-cover img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 78%; }
.iwcs-about-grid > li:is(:nth-child(4n+1), :nth-child(4n)) .iwcs-about-cover img { max-height: 440px; }
.iwcs-about-cover:hover img { transform: translateY(-8px) rotate(-1.2deg) scale(1.02); }
.iwcs-about-cover__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; opacity: 0; translate: 0 6px; transition: opacity .5s var(--s-ease), translate .5s var(--s-ease); }
.iwcs-about-cover:is(:hover, :focus-visible) .iwcs-about-cover__zoom { opacity: 1; translate: 0 0; }

.iwcs-about-card__body { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.6vw, 36px); }
.iwcs-about-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; color: var(--s-accent); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; }
.iwcs-about-badge { padding: 3px 8px; border-radius: 4px; background: var(--s-accent); color: #fff; letter-spacing: .12em; }
.iwcs-about-page .iwcs-about-card h3,
.iwcs-about-page .iwcs-about-card--archive h3 { margin: 0 0 14px; font-family: var(--s-serif); font-size: clamp(30px, 2.6vw, 38px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.iwcs-about-card__lead { margin: 0; max-width: 40ch; color: var(--s-muted); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.iwcs-about-card__facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 20px 0 0; padding: 0; }
.iwcs-about-card__facts li { padding: 5px 11px; border-radius: 999px; background: rgb(31 29 25 / .05); color: var(--s-muted); font-size: 12px; line-height: 1.4; }
.iwcs-about-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 28px; }
.iwcs-about-card__price { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Archive */
.iwcs-about-archive { background: var(--s-sand); }
.iwcs-about-archive__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.iwcs-about-archive .iwcs-soft-heading { position: sticky; top: 110px; margin-bottom: 0; }
.iwcs-soft .iwcs-about-archive .iwcs-soft-heading h2 { font-size: clamp(44px, 5vw, 72px); }
.iwcs-about-archive__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 44px clamp(20px, 2.4vw, 32px); }
.iwcs-about-card--archive .iwcs-about-cover { min-height: 0; aspect-ratio: 4 / 5; margin: 0 0 20px; background: radial-gradient(ellipse 80% 70% at 50% 42%, #f2ebdf 0%, #e2d9ca 100%); }
.iwcs-about-card--archive .iwcs-about-cover img { max-height: 100%; filter: grayscale(.55) contrast(.95); transition: transform .9s var(--s-ease), filter .9s var(--s-ease); }
.iwcs-about-card--archive .iwcs-about-cover:hover img { filter: none; }
.iwcs-about-page .iwcs-about-card--archive h3 { font-size: 26px; margin-bottom: 10px; }
.iwcs-about-card--archive .iwcs-about-card__meta { margin-bottom: 8px; color: var(--s-muted); }
.iwcs-about-card--archive .iwcs-about-card__lead { font-size: 14.5px; }
.iwcs-about-card__status { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: 12.5px; }

/* ------------------------------------------------------------ History */
.iwcs-about-story__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.iwcs-about-story__aside { position: sticky; top: 110px; }
.iwcs-about-story .iwcs-soft-heading { margin-bottom: 0; }
.iwcs-about-principles article { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; padding: 30px 0; border-top: 1px solid var(--s-line); }
.iwcs-about-principles article:first-child { border-top: 0; padding-top: 6px; }
.iwcs-about-principles__num { grid-row: span 2; color: var(--s-accent); font-family: var(--s-serif); font-size: 32px; font-style: italic; line-height: 1; }
.iwcs-about-page .iwcs-about-principles h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.iwcs-about-principles p { margin: 0; max-width: 52ch; color: var(--s-muted); font-size: 16px; line-height: 1.65; }

.iwcs-about-timeline { list-style: none; margin: clamp(64px, 7vw, 104px) 0 0; padding: 6px; border-radius: 30px; background: rgb(31 29 25 / .035); box-shadow: inset 0 0 0 1px rgb(31 29 25 / .06); }
.iwcs-about-timeline li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 28px; padding: 28px clamp(22px, 2.6vw, 36px); background: var(--s-core); border-top: 1px solid var(--s-line); }
.iwcs-about-timeline li:first-child { border-top: 0; border-radius: 24px 24px 0 0; }
.iwcs-about-timeline li:last-child { border-radius: 0 0 24px 24px; }
.iwcs-about-timeline__year { margin: 0; color: var(--s-accent); font-family: var(--s-serif); font-size: 52px; font-style: italic; line-height: .9; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.iwcs-about-page .iwcs-about-timeline h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.iwcs-about-timeline li p:not(.iwcs-about-timeline__year) { margin: 0; max-width: 58ch; color: var(--s-muted); font-size: 15.5px; line-height: 1.65; }

/* ------------------------------------------------------------ Contact */
.iwcs-about-contact__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(40px, 5vw, 80px); align-items: end; }
.iwcs-about-page .iwcs-about-contact h2 { margin: 0; color: var(--s-cream); font-size: clamp(64px, 9vw, 140px); line-height: .9; letter-spacing: -.035em; }
.iwcs-about-contact__inner > div > p:last-child { margin: 30px 0 0; max-width: 34em; color: #cfcabe; font-size: 17px; line-height: 1.65; }
.iwcs-about-contact__links { display: grid; gap: 18px; justify-items: start; }
.iwcs-about-contact__mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-cream); font-size: 16px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 6px; transition: color .4s var(--s-ease), text-decoration-color .4s var(--s-ease); }
.iwcs-about-contact__mail:hover { color: var(--s-accent-soft); text-decoration-color: currentColor; }

/* ------------------------------------------------------------ Tablet */
@media (max-width: 1024px) {
	.iwcs-about-grid > li,
	.iwcs-about-grid > li:is(:nth-child(4n+1), :nth-child(4n)) { grid-column: 1 / -1; }
	.iwcs-about-grid > li .iwcs-about-card__core { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; }
	/* Every card is a row here, so the body sets its height and the book fits the frame. */
	.iwcs-about-grid > li:nth-child(n) .iwcs-about-cover { min-height: 280px; aspect-ratio: auto; }
	.iwcs-about-grid > li:nth-child(n) .iwcs-about-cover img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 80%; }
	.iwcs-about-archive__inner, .iwcs-about-story__inner, .iwcs-about-contact__inner { grid-template-columns: 1fr; }
	.iwcs-about-archive .iwcs-soft-heading, .iwcs-about-story__aside { position: static; }
	.iwcs-about-story .iwcs-soft-heading { margin-bottom: 48px; }
}

/* ------------------------------------------------------------ Mobile */
@media (max-width: 767px) {
	.iwcs-about-hero { padding: 40px 20px 96px; }
	.iwcs-about-hero__inner { grid-template-columns: 1fr; row-gap: 12px; }
	.iwcs-about-hero__shelf { grid-row: 1; justify-content: flex-start; gap: 10px; padding: 8px 0 28px; }
	/* No rotation or overlap on touch screens. */
	.iwcs-about-hero__shelf img { --r: 0deg !important; --y: 0px !important; width: calc(25% - 8px); margin-left: 0; box-shadow: 0 1px 2px rgb(var(--s-shadow) / .2), 0 14px 22px -12px rgb(var(--s-shadow) / .45); }
	.iwcs-about-page h1 { font-size: clamp(64px, 20vw, 96px); }
	.iwcs-about-hero__lead { margin-top: 24px; font-size: 17px; }
	.iwcs-about-hero__facts { gap: 12px; margin-top: 32px; }
	.iwcs-about-hero__facts dt { font-size: 10px; }
	.iwcs-about-hero__facts dd { font-size: 36px; }
	.iwcs-about-grid > li:nth-child(n):nth-child(n) .iwcs-about-card__core { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.iwcs-about-grid > li:nth-child(n):nth-child(n) .iwcs-about-cover { aspect-ratio: 4 / 3; }
	.iwcs-about-grid > li:nth-child(n):nth-child(n) .iwcs-about-cover img { position: absolute; inset: 0; margin: auto; max-width: 76%; max-height: 80%; }
	.iwcs-about-cover { min-height: 0; aspect-ratio: 4 / 3; border-radius: 14px; }
	.iwcs-about-cover img { max-height: 100%; }
	.iwcs-about-cover__zoom { opacity: 1; translate: 0 0; }
	.iwcs-about-page .iwcs-about-card h3 { font-size: 32px; }
	.iwcs-about-card__foot { padding-top: 24px; }
	.iwcs-about-card__foot .iwcs-pill-button { width: 100%; }
	.iwcs-about-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
	.iwcs-about-card--archive .iwcs-about-card__lead { display: none; }
	.iwcs-about-page .iwcs-about-card--archive h3 { font-size: 21px; }
	.iwcs-about-principles article { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 24px 0; }
	.iwcs-about-principles__num { font-size: 26px; }
	.iwcs-about-timeline { margin-top: 56px; border-radius: 26px; }
	.iwcs-about-timeline li { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
	.iwcs-about-timeline li:first-child { border-radius: 20px 20px 0 0; }
	.iwcs-about-timeline li:last-child { border-radius: 0 0 20px 20px; }
	.iwcs-about-timeline__year { font-size: 42px; }
	.iwcs-about-page .iwcs-about-contact h2 { font-size: clamp(56px, 16vw, 80px); }
}

/* ------------------------------------------------------ Shop (/sklep/) */
.iwcs-shop-hero { padding-bottom: clamp(64px, 7vw, 104px); }
.iwcs-shop-hero .iwcs-about-hero__inner { align-items: end; }
.iwcs-shop-hero__trust { justify-self: end; width: min(100%, 380px); }
.iwcs-shop-hero__trust ul { list-style: none; margin: 0; padding: 10px 24px; }
.iwcs-shop-hero__trust li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: 14.5px; line-height: 1.45; }
.iwcs-shop-hero__trust li:first-child { border-top: 0; }
.iwcs-shop-hero__trust li::before { content: none; color: var(--s-accent); font-weight: 700; }
.iwcs-soft .iwcs-book-page .iwcs-shop-list { padding-top: 0; }
.iwcs-shop-page .iwcs-about-card h2 { margin: 0 0 14px; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.02; letter-spacing: -.02em; }
.iwcs-shop-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: auto; padding-top: 28px; }
.iwcs-shop-buy .iwcs-book-hero__purchase { margin: 0; }
/* A second format (the e-book) steps back so the paper edition leads. */
.iwcs-shop-buy .iwcs-book-hero__purchase + .iwcs-book-hero__purchase .iwcs-pill-button { background: transparent; color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line); }
.iwcs-shop-buy .iwcs-book-hero__purchase + .iwcs-book-hero__purchase .iwcs-pill-button:hover { background: var(--s-ink); color: var(--s-cream); }
.iwcs-shop-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; color: var(--s-ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--s-line); text-underline-offset: 6px; transition: color .4s var(--s-ease), text-decoration-color .4s var(--s-ease); }
.iwcs-shop-more:hover { color: var(--s-accent); text-decoration-color: currentColor; }
@media (max-width: 1024px) {
	.iwcs-shop-hero .iwcs-about-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.iwcs-shop-hero__trust { justify-self: start; }
}
@media (max-width: 767px) {
	.iwcs-shop-hero { padding: 56px 16px 56px; }
	.iwcs-shop-more { margin-left: 0; }
}
