/* Home: "A crystal for every moment worth keeping" band (see occasions.php / occasions.js). Dark band with gold accents, like the hero. */
.mcf-occ { position: relative; overflow: hidden; background: linear-gradient(170deg, #0d1520 0%, #141414 60%, #1a1510 100%); color: #f4eee6; padding: 96px var(--mcf-g, 24px) 88px; }
@media (min-width: 901px) { .mcf-occ { padding-left: max(var(--mcf-g, 24px), 15vw); padding-right: max(var(--mcf-g, 24px), 15vw); } }
.mcf-occ-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mcf-occ-bg i { position: absolute; display: block; will-change: transform; }
.mcf-occ-blob { border-radius: 50%; filter: blur(70px); }
.mcf-occ-blob.b1 { width: 460px; height: 460px; left: -120px; top: 6%; background: rgba(227, 189, 106, 0.16); }
.mcf-occ-blob.b2 { width: 520px; height: 520px; right: -160px; bottom: 4%; background: rgba(60, 150, 170, 0.14); }
.mcf-occ-shard { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(227, 189, 106, 0.35) 50%, rgba(255, 255, 255, 0.06)); opacity: 0.22; }
.mcf-occ-shard.s1 { width: 120px; height: 150px; left: 4%; top: 18%; clip-path: polygon(20% 0, 100% 30%, 70% 100%, 0 70%); }
.mcf-occ-shard.s2 { width: 90px; height: 110px; right: 7%; top: 12%; clip-path: polygon(30% 0, 100% 20%, 60% 100%, 0 60%); }
.mcf-occ-shard.s3 { width: 70px; height: 90px; left: 46%; top: 3%; clip-path: polygon(10% 10%, 100% 0, 80% 100%, 0 60%); opacity: 0.15; }
.mcf-occ-shard.s4 { width: 150px; height: 180px; right: 3%; bottom: 14%; clip-path: polygon(25% 0, 100% 35%, 65% 100%, 0 55%); }
.mcf-occ-shard.s5 { width: 100px; height: 120px; left: 9%; bottom: 8%; clip-path: polygon(35% 0, 100% 25%, 55% 100%, 0 70%); opacity: 0.18; }
.mcf-occ-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; text-align: center; }
.mcf-occ-k { margin: 0 0 14px; color: #e3bd6a; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.mcf-occ h2 { margin: 0 auto 16px; max-width: 18ch; font-family: var(--wp--preset--font-family--serif, serif); font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; font-weight: 400; color: #fff; }
.mcf-occ-sub { margin: 0 auto 56px; max-width: 56ch; font-size: 17px; line-height: 1.55; color: rgba(244, 238, 230, 0.78); }
.mcf-occ-h4 { margin: 0 0 22px; color: #e3bd6a; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.mcf-occ-grid { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.mcf-occ-grid3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mcf-occ-slot { position: relative; margin: 0; padding: 0; } /* earlier cards sit above later ones: a card flying in passes BEHIND the cards already in place */
.mcf-occ-card { position: relative; height: 100%; box-sizing: border-box; padding: 26px 22px 28px; border: 1px solid rgba(227, 189, 106, 0.28); border-radius: 4px; background: #14181e; will-change: transform, opacity; transition: border-color .3s, background .3s; }
.mcf-occ-card:hover { border-color: rgba(227, 189, 106, 0.7); background: #191e25; }
.mcf-occ-n { display: block; margin-bottom: 14px; font-family: var(--wp--preset--font-family--serif, serif); font-size: 30px; line-height: 1; color: #e3bd6a; }
.mcf-occ-card h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--serif, serif); font-size: 21px; font-weight: 400; color: #fff; }
.mcf-occ-card p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(244, 238, 230, 0.74); }
/* the three peak moments: bigger, with a gold glow and a day count */
.mcf-occ-peak { padding: 34px 28px 30px; border-color: rgba(227, 189, 106, 0.6); background: linear-gradient(160deg, rgba(227, 189, 106, 0.16), rgba(227, 189, 106, 0) 60%), #14181e; box-shadow: 0 0 40px rgba(227, 189, 106, 0.10); }
.mcf-occ-peak h3 { font-size: 32px; margin-bottom: 12px; }
.mcf-occ-peak p { font-size: 16px; margin-bottom: 22px; }
.mcf-occ-date { display: inline-block; margin-bottom: 16px; padding: 3px 12px; border: 1px solid #e3bd6a; border-radius: 999px; color: #e3bd6a; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mcf-occ-count { display: block; padding-top: 16px; border-top: 1px solid rgba(227, 189, 106, 0.3); color: #f0cd80; font-family: var(--wp--preset--font-family--serif, serif); font-size: 22px; min-height: 1.4em; }
.mcf-occ-note { margin: 0 0 64px; font-size: 14px; color: rgba(244, 238, 230, 0.62); }
.mcf-occ-foot { margin: 8px 0 22px; font-size: 14px; color: rgba(244, 238, 230, 0.6); }
.mcf-occ-btn { display: inline-block; padding: 13px 34px; background: #e3bd6a; color: #141414; font-weight: 600; text-decoration: none; border-radius: 2px; }
.mcf-occ-btn:hover { background: #f0cd80; }
@media (max-width: 1100px) { .mcf-occ-grid { grid-template-columns: repeat(2, 1fr); } .mcf-occ-grid3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } .mcf-occ-peak { padding: 28px 20px 24px; } .mcf-occ-peak h3 { font-size: 26px; } }
@media (max-width: 760px) { .mcf-occ-grid3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.mcf-occ { padding-top: 64px; padding-bottom: 60px; }
	.mcf-occ-grid { grid-template-columns: 1fr; gap: 14px; }
	.mcf-occ-sub { margin-bottom: 40px; font-size: 16px; }
	.mcf-occ-note { margin-bottom: 44px; }
}