/* ============================================================ YoNihon — MOBILE-FIRST responsive Base = mobile (320px+). Media queries grow up from here. ============================================================ */ /* -------------------- BASE = MOBILE (≤640px) -------------------- */ :root { --fs-5xl: 36px; --fs-4xl: 30px; --fs-3xl: 26px; --fs-2xl: 22px; --fs-xl: 20px; --header-h: 64px; } .container { padding-inline: 16px; } .section { padding: 48px 0; } /* Grids collapse to single column */ .card-grid--2, .card-grid--3, .card-grid--4, .card-grid--auto { grid-template-columns: 1fr; } .why-grid, .review-grid, .partners-why-grid, .team-grid, .focus-grid, .footer-grid { grid-template-columns: 1fr; gap: 18px; } /* Trust bar 2-up on mobile */ .trust-bar { padding: 24px 0; } .trust-bar__grid { grid-template-columns: 1fr 1fr; gap: 14px; } .trust-item { gap: 10px; align-items: flex-start; } .trust-item__icon { width: 38px; height: 38px; } .trust-item__stat { font-size: 14px; } .trust-item__label { font-size: 11px; } /* Hero */ .hero { min-height: 480px; } .hero__content { padding: 48px 16px; } .hero__title { font-size: 28px; line-height: 1.15; } .hero__subtext { font-size: 14px; } .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; } .hero__ctas .btn { width: 100%; padding: 14px 18px; font-size: 14px; } .hero__search { padding: 6px 6px 6px 14px; max-width: 100%; } .hero__search input { font-size: 13px; padding: 8px 0; } .hero__search .btn { padding: 10px 14px; font-size: 12px; } .hero--page { min-height: 320px; } /* Cards */ .card__body { padding: 14px; gap: 6px; } .card__title { font-size: 15px; } .card__excerpt { font-size: 13px; } .card__meta { gap: 8px; font-size: 11px; } .card__price { font-size: 16px; } .card__cta { font-size: 13px; } .card__footer { flex-wrap: wrap; gap: 6px; } /* Section headers */ .section-head h2 { font-size: var(--fs-2xl); } .section-head p { font-size: 14px; } .section-head--row { flex-direction: column; align-items: flex-start; gap: 8px; } .archive-meta { align-items: flex-start; flex-direction: column; gap: 12px; } .archive-meta h2 { font-size: var(--fs-xl); } /* Footer mobile */ .footer-grid { gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } /* CTA banners */ .cta-banner-grid { grid-template-columns: 1fr; } .cta-banner { padding: 32px 24px; min-height: 0; } .cta-banner h3 { font-size: var(--fs-xl); } /* Final CTA + about cta */ .final-cta { padding: 52px 18px; border-radius: var(--radius); } .final-cta h2 { font-size: var(--fs-2xl); } .about-final-cta { padding: 36px 20px; } .about-final-cta h2 { font-size: var(--fs-2xl); } .about-final-cta .hero__ctas { flex-direction: column; align-items: stretch; } .about-final-cta .btn { width: 100%; } /* Forms */ .form-grid { grid-template-columns: 1fr; } .form-card { padding: 22px 16px; } .section-block { padding: 22px 18px; } .section-block h2 { font-size: 18px; } .calendar-block { padding: 22px 18px; } .calendar-block iframe { min-height: 360px; } .meeting-point-block { padding: 22px 18px; } /* Single event/guide layout (bare body-matching classes removed — they were turning into a grid container via WordPress body_class() output) */ .event-body { gap: 24px; padding: 24px 16px 48px; } .experience-meta { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; } .experience-meta__item { gap: 8px; } .experience-meta__value { font-size: 13px; } .experience-meta__label { font-size: 11px; } .single-event__hero { min-height: 360px; } .single-event__hero-content { padding: 32px 16px 24px; min-height: 360px; } .single-event__hero-content h1 { font-size: 24px; } .single-event__hero-content .event-meta-row { flex-wrap: wrap; gap: 10px; font-size: 12px; } .two-col, .process-list { grid-template-columns: 1fr; gap: 16px; } /* About / partners / contact */ .about-story { grid-template-columns: 1fr; gap: 28px; } .about-story__media { aspect-ratio: 4/3; } .about-story__stats { grid-template-columns: 1fr 1fr; gap: 16px; } .about-stat__num { font-size: var(--fs-2xl); } .partners-how { grid-template-columns: 1fr; gap: 28px; } .partners-how__media { aspect-ratio: 16/10; } .partners-look { padding: 36px 22px; } .partners-look ul { grid-template-columns: 1fr; } .partners-step { padding: 14px 0; } .contact-grid { grid-template-columns: 1fr; gap: 18px; } .support-card { padding: 20px; } .invite-banner { padding: 28px 20px; min-height: 200px; border-radius: var(--radius); } .invite-banner h3 { font-size: var(--fs-xl); } .team-card__body { padding: 16px; } /* Filters */ .filter-bar { padding: 14px; gap: 10px; flex-direction: column; align-items: stretch; } .filter-bar select { min-width: 0; flex: 1; width: 100%; } .chip { padding: 7px 12px; font-size: 11px; } /* Guide article */ .toc-card { padding: 16px; } .single-guide__header h1 { font-size: 26px; } .single-guide__content { font-size: 15px; line-height: 1.7; } .guide-archive-grid { grid-template-columns: 1fr !important; gap: 28px !important; } /* Reviews */ .review-summary { flex-direction: column; align-items: flex-start; gap: 10px; } .review-summary__avg { font-size: var(--fs-2xl); } /* Page shell */ .page-shell { padding: 32px 16px 48px; } .page-header h1 { font-size: var(--fs-2xl); } /* Photo gallery */ .photo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; } .photo-gallery__item { aspect-ratio: 1/1; } .photo-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; } /* Buttons */ .btn { padding: 12px 20px; font-size: 13px; } .btn--lg { padding: 14px 22px; font-size: 14px; } /* -------------------- ≥ 641px — large mobile / small tablet -------------------- */ @media (min-width: 641px) { :root { --fs-5xl: 44px; --fs-4xl: 36px; --fs-3xl: 30px; --fs-2xl: 24px; --header-h: 68px; } .container { padding-inline: 24px; } .section { padding: 56px 0; } /* Two-col grids */ .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr 1fr; } .why-grid, .review-grid, .partners-why-grid, .team-grid, .focus-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .hero__title { font-size: 36px; } .hero__ctas { flex-direction: row; align-items: center; } .hero__ctas .btn { width: auto; } .about-story__stats { grid-template-columns: 1fr 1fr; } .experience-meta { grid-template-columns: 1fr 1fr; gap: 16px; } .section-head--row { flex-direction: row; align-items: end; } .archive-meta { flex-direction: row; align-items: center; } .photo-gallery { grid-template-columns: 2fr 1fr 1fr; } .photo-gallery__item:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; } } /* -------------------- ≥ 881px — desktop nav appears -------------------- */ @media (min-width: 881px) { :root { --fs-5xl: 52px; --fs-4xl: 42px; --fs-3xl: 34px; --fs-2xl: 28px; --fs-xl: 22px; --header-h: 76px; } .section { padding: 72px 0; } /* Card grids: 3-up at desktop */ .card-grid--3, .card-grid--4 { grid-template-columns: repeat(3, 1fr); } .why-grid, .review-grid, .partners-why-grid, .team-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .focus-grid { grid-template-columns: 2fr 1fr 1fr; } .hero { min-height: 540px; } .hero__content { padding: 80px 24px; } .hero__title { font-size: 48px; } .hero__subtext { font-size: 18px; } .hero--page { min-height: 460px; } .trust-bar__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } .cta-banner-grid { grid-template-columns: 1fr 1fr; } .form-grid { grid-template-columns: 1fr 1fr; } .about-story { grid-template-columns: 1fr 1fr; gap: 48px; } .partners-how { grid-template-columns: 1fr 1fr; gap: 48px; } .partners-how__media { aspect-ratio: 4/3; } .contact-grid { grid-template-columns: 340px 1fr; gap: 24px; } .partners-look ul { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } /* Single experience: restore 2-col layout */ .single-experience { grid-template-columns: 1fr 360px; gap: 40px; padding: 48px 24px 80px; max-width: var(--container); margin: 0 auto; } .single-guide { grid-template-columns: 1fr 320px; gap: 40px; padding: 48px 24px 80px; } .event-body { grid-template-columns: 1fr 360px; gap: 40px; } .book-sidebar { position: sticky; top: calc(var(--header-h) + 16px); padding: 24px; } .experience-meta { grid-template-columns: repeat(4, 1fr); padding: 20px; } .experience-hero, .single-event__hero { min-height: 480px; } .experience-hero h1, .single-event__hero-content h1 { font-size: 42px; } .experience-hero__content, .single-event__hero-content { padding: 64px 24px 56px; min-height: 480px; } .filter-bar { flex-direction: row; align-items: center; } .filter-bar select { min-width: 150px; flex: 0 0 auto; width: auto; } .section-block { padding: 28px; } .calendar-block, .meeting-point-block { padding: 28px; } .form-card { padding: 32px; } .two-col { grid-template-columns: 1fr 1fr; gap: 24px; } .process-list { grid-template-columns: 1fr 1fr; gap: 20px; } .page-shell { padding: 56px 24px 96px; } .guide-archive-grid { grid-template-columns: 1fr 320px !important; gap: 48px !important; } } /* -------------------- ≥ 1180px — wide desktop -------------------- */ @media (min-width: 1180px) { :root { --fs-5xl: 64px; --fs-4xl: 52px; --fs-3xl: 40px; } .section { padding: 80px 0; } /* Card grids: 4-up only at wide desktop */ .card-grid--4 { grid-template-columns: repeat(4, 1fr); } .why-grid { grid-template-columns: repeat(4, 1fr); } .hero { min-height: 600px; } .hero__title { font-size: 60px; } }