/**
 * Fire Dance Insider — responsive rules.
 *
 * Desktop-first breakpoints: 1280, 1024, 960 (mobile navigation), 782 (admin bar),
 * 768, 600, 480, 390 and 360.
 */

/* =========================================================================
   ≤ 1280px
   ========================================================================= */

@media (max-width: 1280px) {
	.fdi-menu {
		gap: 28px;
	}

	.fdi-nav {
		gap: 32px;
	}

	.fdi-hero__media {
		left: 32%;
	}
}

/* =========================================================================
   ≤ 1024px — tablet landscape
   ========================================================================= */

@media (max-width: 1024px) {
	.fdi-hero__media {
		left: 26%;
	}

	.fdi-hero__frame {
		left: 44%;
	}

	.fdi-hero__content {
		max-width: 560px;
	}

	.fdi-cred {
		padding: 24px 22px 22px;
	}

	.fdi-package__tags {
		grid-template-columns: 1fr;
	}

	.fdi-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.fdi-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fdi-footer__brand {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   ≤ 960px — mobile navigation, stacked layouts
   ========================================================================= */

@media (max-width: 960px) {
	:root {
		--fdi-header-h: 72px;
	}

	/* Mobile navigation panel. */
	.fdi-nav-toggle {
		display: inline-flex;
	}

	.fdi-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: calc(100vh - var(--fdi-header-h) - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100dvh - var(--fdi-header-h) - var(--wp-admin--admin-bar--height, 0px));
		padding: 24px var(--fdi-gutter) 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--fdi-bg);
		border-top: 1px solid rgba(var(--fdi-gold-rgb), 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.3s var(--fdi-ease), transform 0.3s var(--fdi-ease), visibility 0.3s;
	}

	.fdi-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.fdi-nav-open .fdi-header {
		background: var(--fdi-bg);
	}

	.fdi-nav-open {
		overflow: hidden;
	}

	.fdi-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fdi-menu > li {
		border-bottom: 1px solid var(--fdi-border-subtle);
	}

	.fdi-menu a {
		display: block;
		padding: 18px 0;
		color: var(--fdi-text);
		font-family: var(--fdi-font-heading);
		font-size: 1.75rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	.fdi-menu a:hover,
	.fdi-menu .current-menu-item > a {
		color: var(--fdi-gold);
	}

	.fdi-menu > li > a::after {
		display: none;
	}

	.fdi-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 12px 18px;
		background: none;
		border: 0;
		opacity: 1;
		visibility: inherit;
		transform: none;
	}

	.fdi-menu .sub-menu a {
		padding: 10px 0;
		color: var(--fdi-text-secondary);
		font-family: var(--fdi-font-body);
		font-size: 1rem;
	}

	.fdi-header__cta {
		margin-top: 32px;
		min-height: 56px;
		font-size: 0.8125rem;
	}

	/* Without JavaScript the menu simply shows inline under the header. */
	.no-js .fdi-nav-toggle {
		display: none;
	}

	.no-js .fdi-header__inner {
		flex-wrap: wrap;
	}

	.no-js .fdi-nav {
		position: static;
		width: 100%;
		height: auto;
		padding: 0 0 24px;
		border: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Hero: image on top, content overlapping its faded lower edge. */
	.fdi-hero__media {
		left: 0;
		bottom: auto;
		height: min(78vh, 720px);
	}

	.fdi-hero__image {
		object-position: 70% 25%;
	}

	.fdi-hero__media::after {
		background:
			linear-gradient(0deg, var(--fdi-bg) 0%, rgba(7, 7, 7, 0.7) 30%, rgba(7, 7, 7, 0.15) 65%, rgba(7, 7, 7, 0.55) 100%);
	}

	.fdi-hero__frame {
		display: none;
	}

	.fdi-hero__inner {
		min-height: 0;
		padding-top: min(40vh, 380px);
	}

	.fdi-hero__content {
		max-width: 620px;
		padding-bottom: 56px;
	}

	/* Approach. */
	.fdi-approach__grid {
		grid-template-columns: 1fr;
	}

	.fdi-approach__media {
		position: relative;
		top: auto;
		max-width: 640px;
	}

	/* Packages. */
	.fdi-packages__grid {
		grid-template-columns: 1fr;
		max-width: 640px;
	}

	.fdi-package__tags {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Form. */
	.fdi-apply__grid {
		grid-template-columns: 1fr;
	}

	.fdi-apply__panel {
		position: static;
	}

	.fdi-apply__figure {
		max-width: 640px;
	}

	.fdi-steps {
		margin: 32px 0;
	}
}

/* =========================================================================
   ≤ 782px — WordPress admin bar gets taller
   ========================================================================= */

@media (max-width: 782px) {
	.admin-bar .fdi-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* =========================================================================
   ≤ 768px — tablet portrait
   ========================================================================= */

@media (max-width: 768px) {
	.fdi-credentials__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.fdi-cred {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 20px;
		align-items: start;
		padding: 22px;
	}

	.fdi-cred__top {
		grid-row: span 3;
		margin: 4px 0 0;
	}

	.fdi-cred__index {
		display: none;
	}

	.fdi-cred__figure {
		font-size: 1.875rem;
	}

	.fdi-post-nav .nav-links {
		grid-template-columns: 1fr;
	}

	.fdi-post-nav .nav-next {
		grid-column: auto;
	}
}

/* =========================================================================
   ≤ 600px — phones
   ========================================================================= */

@media (max-width: 600px) {
	:root {
		--fdi-header-h: 68px;
		--fdi-gutter: 20px;
	}

	/* The admin bar scrolls away on phones. */
	.admin-bar .fdi-header {
		top: 0;
	}

	.fdi-nav {
		height: calc(100vh - var(--fdi-header-h));
		height: calc(100dvh - var(--fdi-header-h));
	}

	.fdi-logo-text__mark {
		width: 32px;
	}

	.fdi-logo-text__main {
		font-size: 1.3rem;
	}

	.fdi-logo-text__sub {
		font-size: 0.5rem;
		letter-spacing: 0.56em;
	}

	.custom-logo {
		max-height: 42px;
	}

	.fdi-hero__media {
		height: min(68vh, 560px);
	}

	.fdi-hero__inner {
		padding-top: min(34vh, 300px);
	}

	.fdi-hero__lead {
		margin-bottom: 32px;
	}

	.fdi-hero__actions {
		flex-direction: column;
		gap: 12px;
	}

	.fdi-hero__actions .fdi-btn {
		width: 100%;
	}

	.fdi-eyebrow {
		gap: 12px;
		font-size: 0.6875rem;
		letter-spacing: 0.2em;
	}

	.fdi-eyebrow::before,
	.fdi-eyebrow--center::after {
		flex-basis: 28px;
	}

	.fdi-approach__media {
		padding: 0 8% 14% 0;
	}

	.fdi-approach__media::before {
		top: -10px;
		left: -10px;
	}

	.fdi-apply__figure {
		margin-bottom: 36px;
	}

	.fdi-apply__figure::before {
		top: -10px;
		right: -10px;
	}

	.fdi-pillar {
		grid-template-columns: 40px 1fr;
		padding: 22px 0;
	}

	.fdi-pillar__title {
		font-size: 1.5rem;
	}

	.fdi-package__badge {
		letter-spacing: 0.14em;
	}

	.fdi-form__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fdi-post-grid {
		grid-template-columns: 1fr;
	}

	.fdi-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fdi-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.fdi-cta-band .fdi-btn {
		width: 100%;
	}

	.fdi-prose {
		font-size: 1.0625rem;
	}

	.fdi-prose blockquote,
	.fdi-prose .wp-block-quote {
		padding-left: 20px;
		font-size: 1.375rem;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1.5em;
	}
}

/* =========================================================================
   ≤ 480px
   ========================================================================= */

@media (max-width: 480px) {
	.fdi-disciplines {
		padding: 22px 20px;
	}

	.fdi-package {
		padding: 28px 22px;
	}

	.fdi-package__tags {
		grid-template-columns: 1fr;
	}

	.fdi-package__includes li {
		grid-template-columns: 36px 1fr;
		gap: 12px;
	}

	.fdi-package__include-icon {
		width: 36px;
		height: 36px;
	}

	.fdi-form,
	.fdi-success {
		padding: 28px 20px;
	}

	.fdi-summary {
		padding: 22px 20px;
	}

	.fdi-summary__row {
		flex-direction: column;
		gap: 4px;
	}

	.fdi-card-post__body {
		padding: 24px 22px 26px;
	}

	.fdi-btn {
		white-space: normal;
	}
}

/* =========================================================================
   ≤ 390px
   ========================================================================= */

@media (max-width: 390px) {
	.fdi-hero__title {
		font-size: 2.6rem;
	}

	.fdi-cred {
		column-gap: 16px;
		padding: 20px 18px;
	}

	.fdi-package__badge {
		font-size: 0.625rem;
		letter-spacing: 0.1em;
	}
}

/* =========================================================================
   ≤ 360px
   ========================================================================= */

@media (max-width: 360px) {
	:root {
		--fdi-gutter: 16px;
	}

	.fdi-hero__title {
		font-size: 2.4rem;
	}

	.fdi-logo-text {
		gap: 10px;
	}

	.fdi-logo-text__main {
		font-size: 1.2rem;
	}

	.fdi-package__amount {
		font-size: 2.75rem;
	}
}