/* ODTD home.css: front-page.php only (Main.dc.html at 1440, MainMobile.dc.html at 390). */

/* ---------- hero band ---------- */
.home-hero { position: relative; overflow: hidden; background: var(--odtd-tint-blue); padding: 56px 64px 150px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.home-hero-mark { position: absolute; top: -132px; left: 50%; width: 420px; height: 532px; transform: translateX(-50%); opacity: 0.55; pointer-events: none; }
.home-hero-title { position: relative; font-family: var(--odtd-serif); font-size: 68px; font-weight: 400; line-height: 1.06; color: var(--odtd-blue); text-align: center; }
.home-hero-sum { position: relative; font-size: 25px; line-height: 1.55; color: var(--odtd-muted); text-align: center; max-width: 60ch; text-wrap: pretty; }
.home-hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.home-hero-curve svg { display: block; width: 100%; height: 92px; }
.home-hero-curve .curve-phone { display: none; height: 44px; }

/* ---------- four doors ---------- */
.home-doors { padding-top: 64px; padding-bottom: 90px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.door { position: relative; display: flex; flex-direction: column; gap: 22px; color: inherit; }
.door:hover { color: inherit; }
.door-art { position: relative; height: 430px; }
.door .fr { position: absolute; left: 14px; top: 14px; width: 100%; height: 430px; border: 2px solid var(--door); border-radius: 210px 210px 3px 3px; transition: transform .25s ease; }
.door .im { position: absolute; left: 0; top: 0; width: 100%; height: 430px; border-radius: 210px 210px 3px 3px; overflow: hidden; background: var(--door-tint); transition: transform .25s ease; }
.door .im img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.door-body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.door-title { font-family: var(--odtd-serif); font-size: 25px; font-weight: 400; line-height: 1.15; color: var(--odtd-ink); }
.door-text { font-size: 17px; line-height: 1.45; color: var(--odtd-muted); min-height: 84px; text-wrap: pretty; }
.door-enter { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.door-enter .ar { display: inline-flex; transition: transform .25s ease; }
.door:hover .im, .door:focus-visible .im { transform: translate(-5px, -5px); }
.door:hover .fr, .door:focus-visible .fr { transform: translate(4px, 4px); }
.door:hover .ar, .door:focus-visible .ar { transform: translateX(5px); }
.door:hover .lnk, .door:focus-visible .lnk { color: var(--odtd-rust); }
@media (prefers-reduced-motion: reduce) { .door *, .door:hover * { transition: none !important; transform: none !important; } }

/* ---------- tablet ---------- */
@media (max-width: 1139px) {
	.home-hero { padding: 48px 40px 120px; }
	.home-hero-title { font-size: 54px; }
	.home-hero-sum { font-size: 21px; }
	.home-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; padding-top: 48px; padding-bottom: 72px; }
	.door-text { min-height: 0; }
}

/* ---------- phone (MainMobile.dc.html) ---------- */
@media (max-width: 640px) {
	.home-hero { padding: 44px 24px 92px; gap: 20px; }
	.home-hero-mark { width: 260px; height: 329px; top: -80px; }
	.home-hero-title { font-size: 42px; line-height: 1.08; text-wrap: balance; }
	.home-hero-sum { font-size: 18px; }
	.home-hero-curve .curve-wide { display: none; }
	.home-hero-curve .curve-phone { display: block; }
	.home-doors { display: flex; flex-direction: column; gap: 52px; padding-top: 28px; padding-bottom: 64px; }
	.door-art { height: 380px; margin-right: 10px; }
	.door .fr { left: 10px; top: 10px; height: 380px; box-sizing: border-box; border-radius: 170px 170px 3px 3px; }
	.door .im { height: 380px; border-radius: 170px 170px 3px 3px; }
	.door:hover .im { transform: translate(-4px, -4px); }
	.door:hover .fr { transform: translate(3px, 3px); }
	.door-body { gap: 10px; padding-top: 6px; }
	.door-title { font-size: 26px; }
	.door-text { line-height: 1.5; }
	.door-enter { display: inline-flex; min-height: 44px; font-size: 15px; }
}