/* ==========================================================================
   FEEDBACK (Reviews) — Mobile (390px – 440px)
   Design not ready yet — verstka comes once the mockup is provided.
   ========================================================================== */

.feedback-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

.feedback-main {
    position: relative;
    width: 100%;
    height: 153.6rem;
    background-color: #ffffff;
    overflow: hidden;
}

/* Full-bleed cover (not the natural-aspect trick used elsewhere) —
   this needs to fill the whole 100vh hero regardless of device height,
   since the hero container itself is white and this image IS the
   visible hero background. */
.feedback-hero-mobile__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.feedback-hero-mobile__wordmark {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 15.1rem;
    height: 7rem;
    z-index: 1;
}

.feedback-hero-mobile__logo {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    width: 35.3rem;
    height: 7.9rem;
    max-width: none;
    z-index: 1;
}

/* Menu button here: white outline only at rest (zero fill), black
   dots — the default filter:invert(1) on .menu-dots-invert already
   gives black dots unconditionally, so only the border/fill needs
   touching. The button also carries --light (for desktop, untouched
   here), so this needs an ID selector to reliably outrank it; scoped
   to :not(.is-open) so the shared --light.is-open white-fill rule
   still applies unchanged when the menu is actually open. */
#main-menu-toggle-btn:not(.is-open) {
    background-color: transparent;
    border-color: #ffffff;
}

#main-menu-toggle-btn:hover:not(.is-open) {
    background-color: transparent;
    border-color: #ffffff;
}

/* The dots normally get their color from mix-blend-mode + a filter
   trick (see menu.mobile.css) — depends on what's actually behind the
   button, and on this page's black hero backdrop it was resolving to
   white instead of black. Side-stepping the blend-mode math entirely
   here: flat black dots, normal blending, no filter. */
#main-menu-toggle-btn:not(.is-open) .menu-dot {
    background-color: #ffffff;
    mix-blend-mode: normal;
}

#main-menu-toggle-btn:not(.is-open) .menu-dots-invert {
    filter: none;
}

.feedback-main__bg-black,
.feedback-main__seam-patch,
.feedback-hero__bg,
.feedback-hero__nav,
.feedback-hero__wordmark,
.feedback-review,
.feedback-carousel,
.feedback-main__scroll-now,
.feedback-main__feedback-label,
.feedback-main__sweet,
.feedback-main__notice,
.feedback-main__your-feedback,
.feedback-main__faq-form {
    display: none;
}

/* Reviews carousel — mobile-only markup/classes (see feedback.html),
   isolated from desktop's own .feedback-review/.feedback-carousel
   instead of reusing them, same principle as every other mobile-only
   block on the site. Reuses desktop's data-i18n keys and image srcs
   directly, just not its classes.
   Each .feedback-review-mobile wrapper is exactly the card's own
   width (35.3rem) — the 20px margins (before card 1, between every
   card, after card 4) all come from ONE source, real flex-box spacers
   at both ends of the track, so nothing is inset twice. Spacers
   instead of container/track padding because a scroll-snap
   container's leading/trailing padding isn't reliably honored at
   rest in every browser; the end spacer additionally gets its own
   scroll-snap-align so "scrolled all the way" is itself a valid,
   honored snap target (mandatory snap otherwise only has card 4's own
   edge to rest on, and pulls back to it before ever reaching the
   trailing spacer). */
.feedback-carousel-mobile {
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 1;
}

.feedback-carousel-mobile::-webkit-scrollbar {
    display: none;
}

/* Mandatory scroll-snap fights any programmatic scrollLeft change that
   isn't a real drag gesture, and scroll-behavior: smooth double-
   animates on top of the custom rAF easing in js/feedback.js (every
   incremental scrollLeft assignment gets its OWN smooth-scroll
   interpolation) — together they made both the reveal and the
   auto-nudge look jerky/fought. Both are switched off for the
   duration of those moments and restored once they settle. */
.feedback-carousel-mobile.is-nudging,
.feedback-carousel-mobile.is-revealing {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.feedback-carousel-mobile__track {
    display: flex;
    gap: 2rem;
    width: max-content;
    opacity: 0;
    transform: translateX(6rem);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-carousel-mobile.is-revealed .feedback-carousel-mobile__track {
    opacity: 1;
    transform: translateX(0);
}

/* Both variants share the same overall height and the same card
   bottom-edge (48.5rem) — a short review's card is shorter, so
   everything above it (avatar/name/role) shifts down by that same
   40px difference to keep the card's bottom aligned with the tall
   variant's, instead of both starting flush at the same top. */
.feedback-review-mobile {
    position: relative;
    flex-shrink: 0;
    width: 35.3rem;
    height: 48.5rem;
    scroll-snap-align: start;
}

/* Leading/trailing 20px margins live on the first/last card itself,
   not on separate spacer elements — scroll-snap-align's "snap area"
   is based on the item's own MARGIN box, so this is guaranteed to be
   part of the same, already-reliable snap target (card 1 / card 4)
   instead of a separate element the snap system might skip past. */
.feedback-review-mobile--1 {
    margin-left: 2rem;
    /* scroll-snap-align targets the border box by default, NOT the
       margin box — regular margin alone isn't part of the snap-area
       math, so mandatory snap was pulling scrollLeft to 2rem (card 1's
       border edge), hiding the margin off-screen. scroll-margin-left
       extends the snap area back out over that margin so resting at
       scrollLeft: 0 (margin visible) is itself the correct snap
       target. */
    scroll-margin-left: 2rem;
}
.feedback-review-mobile--4 { margin-right: 2rem; }

.feedback-review-mobile__avatar {
    position: absolute;
    left: 0;
    top: 8.3rem;
    width: 6.2rem;
    height: 6.2rem;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.feedback-review-mobile__name {
    position: absolute;
    left: 7rem;
    top: 9.6rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.08em;
    color: #000000;
    white-space: nowrap;
}

.feedback-review-mobile__role {
    position: absolute;
    left: 7rem;
    top: 12.6rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #000000;
    white-space: nowrap;
}

.feedback-review-mobile--short .feedback-review-mobile__avatar { top: 12.3rem; }
.feedback-review-mobile--short .feedback-review-mobile__name { top: 13.6rem; }
.feedback-review-mobile--short .feedback-review-mobile__role { top: 16.6rem; }

.feedback-review-mobile__card {
    position: absolute;
    left: 0;
    top: 15rem;
    width: 35.3rem;
    background-color: #000000;
    border-radius: 0.5rem 2rem 2rem 2rem;
    overflow: hidden;
}

.feedback-review-mobile--tall .feedback-review-mobile__card { height: 33.5rem; }
.feedback-review-mobile--short .feedback-review-mobile__card { top: 19rem; height: 29.5rem; }

.feedback-review-mobile__quote {
    position: absolute;
    left: 2rem;
    top: 1.5rem;
    width: 31.3rem;
    height: 26rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    text-align: justify;
}

/* Section label pair, same recipe as the portfolio page's own
   "SMM x TARGET" / count labels (see portfolio.mobile.css). */
.feedback-main-mobile__section-label {
    position: absolute;
    top: 49.5rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.08em;
    color: #000000;
    z-index: 2;
}

.feedback-main-mobile__section-label--left { left: 2rem; }
.feedback-main-mobile__section-label--right { right: 2rem; text-align: right; }

/* Same recipe as the main screen's "Still have questions?" CTA
   heading, just both lines at full opacity instead of the first one
   dimmed. */
.feedback-main-mobile__heading {
    position: absolute;
    left: 2rem;
    top: 56.8rem;
    margin: 0;
    z-index: 2;
}

.feedback-main-mobile__heading span {
    display: block;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 5rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
}

.feedback-main-mobile__sweet {
    position: absolute;
    left: 2rem;
    top: 66.8rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    z-index: 2;
}

/* Same FAQ-form recipe as the main screen's own (see
   main_screen.mobile.css), just this page's own classes/positions —
   submission logic lives in js/feedback.js. */
.feedback-main-mobile__faq-email {
    position: absolute;
    left: 2rem;
    top: 69.3rem;
    width: 35.3rem;
    height: 4.5rem;
    padding: 1.3rem 1.5rem 1.6rem;
    margin: 0;
    background-color: #ffffff;
    border: 0.05rem solid rgba(0, 0, 0, 0.2);
    border-radius: 2rem 2rem 2rem 0.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

.feedback-main-mobile__faq-email::placeholder {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.2);
}

.feedback-main-mobile__faq-question-input {
    position: absolute;
    left: 2rem;
    top: 74.5rem;
    width: 35.3rem;
    height: 10.5rem;
    padding: 1.2rem 1.5rem 0;
    margin: 0;
    resize: none;
    background-color: #ffffff;
    border: 0.05rem solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem 2rem 2rem 2rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #000000;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

.feedback-main-mobile__faq-question-input::placeholder {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.2);
}

.feedback-main-mobile__faq-counter {
    position: absolute;
    right: 3.5rem;
    top: 75.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    text-align: right;
    color: rgba(0, 0, 0, 0.2);
    z-index: 2;
    pointer-events: none;
}

.feedback-main-mobile__faq-send {
    position: absolute;
    right: 3.5rem;
    top: 81.8rem;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    background: none;
    border: none;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.feedback-main-mobile__faq-send.is-active {
    opacity: 1;
}

.feedback-main-mobile__faq-send img {
    display: block;
    width: 100%;
    height: 100%;
}

.feedback-main-mobile__notice {
    position: absolute;
    left: 3.5rem;
    top: 85.5rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 2;
}

.feedback-main-mobile__bottom-logo {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    width: 35.3rem;
    height: 8.2rem;
    max-width: none;
    z-index: 1;
}

.feedback-review-mobile__thanks {
    position: absolute;
    right: 2rem;
    bottom: 1.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.05em;
    color: #ffffff;
}