/* =========================================================================
   WIFA — MESAI page: 3D coverflow carousel + flip cards
   Loaded after details.css and professional-theme.css. Redefines the
   slider's layout from a single wide fade-card into a row of portrait
   cards that Swiper moves with real 3D coverflow depth, each flippable
   on tap/click to reveal its full text on the back face.
   ========================================================================= */

.blog-slider {
	max-width: 1150px;
	width: 96%;
	height: auto;
	min-height: 480px;
	padding: clamp(20px, 4vw, 40px) 6px;
	overflow: visible;
	background: transparent !important;
	box-shadow: none !important;
}
.blog-slider::before, .blog-slider::after { display: none; }

/* ---- Top spacing: PHONE vs PC, set independently here ----
   details.css gives the header-height top margin the slider needs on
   phone (<700px), which is correct there since the page has no other
   top padding at that width.
   From 700px up, the page body ALSO gets a top padding equal to the
   header height (see details.css), so the old header-height margin on
   .blog-slider was being added on top of that -> a big empty gap under
   the header on tablets/desktops. These rules (loaded last, so they
   win) replace that with a small breathing-room gap on PC instead. */
@media (min-width: 700px) {
	.blog-slider { margin: 24px auto 32px; }
}
@media (min-width: 1200px) {
	.blog-slider { margin: 32px auto 40px; }
}
@media (min-width: 1600px) {
	.blog-slider { margin: 40px auto 48px; }
}

.blog-slider__wrp {
	overflow: visible;
	padding: 10px 0 56px;
}

.blog-slider__item {
	width: min(80vw, 320px);
	display: block;
	align-items: unset;
	height: auto;
}

/* ---- Flip card ---- */
.mesai-flip {
	perspective: 1700px;
	width: 100%;
	height: 460px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.mesai-flip:focus-visible .mesai-flip__inner {
	box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.55);
	border-radius: 22px;
}
.mesai-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .65s cubic-bezier(.2, .8, .2, 1);
	transform-style: preserve-3d;
}
.mesai-flip.flipped .mesai-flip__inner { transform: rotateY(180deg); }

.mesai-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 22px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 20px 50px rgba(10, 14, 25, 0.22);
}

.mesai-flip__face--front .blog-slider__img {
	width: 100%;
	height: 56%;
	flex-shrink: 0;
	transform: none;
	border-radius: 0;
	background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
}
.mesai-flip__face--front .blog-slider__img img { opacity: 1 !important; transition-delay: 0s !important; }

.mesai-flip__front-content {
	padding: 18px 22px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.mesai-flip__front-content .blog-slider__title { margin-bottom: 10px; }

.mesai-flip__face--back {
	transform: rotateY(180deg);
	padding: 30px 24px 24px;
	justify-content: center;
	background: linear-gradient(160deg, var(--wf-navy, #101425), var(--wf-ink, #1b2140));
	color: #eef1fb;
	overflow-y: auto;
}
.mesai-flip__face--back .blog-slider__text { font-size: 14.5px; line-height: 1.55; }
/* !important here is required: professional-theme.css still carries older
   !important text-color rules for .blog-slider__title/__code/__text that
   were written for a light card. Those otherwise win (both are !important,
   but ours is the more specific selector, so ours takes priority) and make
   this dark card back nearly unreadable — dark navy/brown text on a dark
   navy background. */
.mesai-flip__face--back .blog-slider__code { color: #b9c3de !important; }
.mesai-flip__face--back .blog-slider__title { color: #fff !important; }
.mesai-flip__face--back .blog-slider__text {
	color: #d7dcee !important;
	opacity: 1;
	transform: none;
	margin-bottom: 18px;
}

.mesai-flip__hint {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wf-gold-deep, #a9762e);
}
.mesai-flip__face--back .mesai-flip__hint { color: var(--wf-gold-soft, #e3c98a); }
.mesai-flip__hint-icon { display: inline-block; transition: transform .35s ease; }
.mesai-flip:hover .mesai-flip__hint-icon { transform: rotate(120deg); }

/* Centered / active coverflow slide reads as "in focus" */
.swiper-slide:not(.swiper-slide-active) .mesai-flip { opacity: .74; }
.swiper-slide-active .mesai-flip { opacity: 1; }
.swiper-slide-active .mesai-flip__face {
	box-shadow: 0 32px 70px rgba(10, 14, 25, 0.35), 0 0 0 1px rgba(201, 162, 74, 0.28);
}

/* ---- Nav arrows ---- */
.blog-slider__nav {
	position: absolute;
	top: 50%;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 74, .45);
	background: rgba(13, 17, 23, .78);
	color: #f4e9d0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 30;
	backdrop-filter: blur(6px);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
	user-select: none;
}
.blog-slider__nav:hover {
	transform: translateY(-52%) scale(1.08);
	background: rgba(13, 17, 23, .94);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.blog-slider__nav--prev { left: 2px; }
.blog-slider__nav--next { right: 2px; }
.swiper-button-disabled.blog-slider__nav { opacity: .35; pointer-events: none; }

@media (max-width: 700px) {
	.blog-slider__nav { width: 36px; height: 36px; font-size: 17px; }
}

/* ---- Pagination: centered row below the cards ---- */
.blog-slider__pagination {
	position: static !important;
	transform: none !important;
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	width: 100% !important;
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 !important; }
.blog-slider__pagination .swiper-pagination-bullet-active { height: 11px !important; width: 30px !important; }

@media (max-width: 700px) {
	.mesai-flip { height: 420px; }
	.blog-slider__wrp { padding-bottom: 46px; }
}
@media (min-width: 1000px) {
	.mesai-flip { height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
	.mesai-flip__inner { transition: none; }
}

/* =========================================================================
   PC layout (>=900px): js/details.js swaps the Swiper coverflow carousel
   out for this plain grid at this width — every card sits in place, no
   carousel math, no depth/rotation to misjudge on wide screens. Much
   simpler to use with a mouse: just click a card to flip it, no swiping
   or arrows needed. Below 900px this block does nothing; the carousel
   from earlier in this file still runs there.
   ========================================================================= */
.blog-slider.mesai-grid .blog-slider__wrp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	padding: 0;
	transform: none !important;
}
.blog-slider.mesai-grid .blog-slider__item {
	width: 100% !important;
	transform: none !important;
	margin: 0 !important;
}
.blog-slider.mesai-grid .mesai-flip { opacity: 1 !important; }
.blog-slider.mesai-grid .mesai-flip__face { box-shadow: 0 16px 40px rgba(10, 14, 25, 0.18); }
.blog-slider.mesai-grid .mesai-flip:hover .mesai-flip__face {
	box-shadow: 0 24px 54px rgba(10, 14, 25, 0.28), 0 0 0 1px rgba(201, 162, 74, 0.28);
}
/* No carousel on PC, so the nav arrows and dots have nothing to control. */
.blog-slider.mesai-grid .blog-slider__nav,
.blog-slider.mesai-grid .blog-slider__pagination { display: none !important; }

@media (min-width: 900px) and (max-width: 1199px) {
	.blog-slider.mesai-grid .blog-slider__wrp { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
	.blog-slider.mesai-grid .blog-slider__wrp { grid-template-columns: repeat(4, 1fr); }
	.blog-slider.mesai-grid .mesai-flip { height: 440px; }
}