/* =Child-Theme responsive styles starts here
-------------------------------------------------------------- */

/* Appleby responsive
==============================================================
Card grids use auto-fit so they reflow on their own; these rules handle the
things intrinsic sizing cannot: two-column lists, the contact split, and the
type scale. Breakpoints match the parent theme's own. */

/* Tablet and below */
@media (max-width: 1023px) {
	.appleby_page .appleby_contact_has_form {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_hero .appleby_inner,
	.appleby_page .appleby_faq_items {
		max-width: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.appleby_page .appleby_list_columns {
		columns: 1;
	}

	.appleby_page .appleby_hero_lead {
		font-size: 1.05rem;
	}

	.appleby_page .appleby_pricing_price {
		font-size: 2rem;
	}

	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item {
		padding: 1.5rem;
	}

	.appleby_page .appleby_credentials_item {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 1.25rem;
		text-align: left;
	}

	.appleby_page .appleby_credentials_icon {
		margin: 0;
		font-size: 1.75rem;
	}

	.appleby_page .appleby_credentials_value {
		font-size: 1.1rem;
	}

	/* Full-width buttons read as one clear action per row on a phone. */
	.appleby_page .appleby_buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.appleby_page .appleby_steps_item {
		padding-top: 0;
		padding-left: 3.75rem;
	}

	.appleby_page .appleby_steps_item:before {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Slider: full viewport everywhere. On phones the portrait source does the
   work, so only the dots need lifting clear of the home indicator. */
@media (max-width: 767px) {
	.appleby_page .appleby_slider_dots {
		bottom: 1.5rem;
	}
}

/* Landscape phones are too short for a full-height slide to show anything
   useful, so cap it and let the page scroll. */
@media (max-height: 460px) and (orientation: landscape) {
	.appleby_page .appleby_slider_slide img {
		height: 460px;
	}
}

/* Footer: stack the columns before they get too narrow to read */
@media (max-width: 1023px) {
	.appleby_footer_columns {
		grid-template-columns: 1fr 1fr;
	}

	.appleby_footer_about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.appleby_footer_columns {
		grid-template-columns: 1fr;
	}

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

/* Consent banner: stack on small screens, buttons full width */
@media (max-width: 767px) {
	.appleby_consent {
		padding: 1.25rem;
		max-height: 85vh;
		overflow-y: auto;
	}

	.appleby_consent_actions {
		width: 100%;
	}

	.appleby_consent_btn {
		flex: 1 1 100%;
	}
}

/* Feature bands and the service dialog */
@media (max-width: 767px) {
	/* One card per row: the tick cards are short, but two of them at phone
	   width wraps every label onto three lines. */
	.appleby_page .appleby_tone_feature .appleby_list_items {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_tone_feature .appleby_list_items li,
	.appleby_page .appleby_tone_feature .appleby_steps_item {
		padding: 1.25rem;
	}

	.appleby_page .appleby_tone_feature .appleby_steps_item {
		padding-top: 4.75rem;
	}

	.appleby_page .appleby_tone_feature .appleby_steps_item:before {
		top: 1.25rem;
		left: 1.25rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	/* Near full-screen sheet: a centred card wastes a phone viewport. */
	.appleby_page .appleby_modal {
		width: 100%;
		max-width: none;
		max-height: 92vh;
		margin: auto 0 0;
		border-radius: var(--appleby-radius) var(--appleby-radius) 0 0;
	}

	.appleby_page .appleby_modal_actions {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* Small mobile */
@media (max-width: 479px) {
	.appleby_page .appleby_services_items,
	.appleby_page .appleby_pricing_items,
	.appleby_page .appleby_credentials_items {
		grid-template-columns: 1fr;
	}

	.appleby_page .appleby_socials {
		gap: 1rem;
	}
}

/* Ultra-wide: stop the bands stretching text to unreadable line lengths */
@media (min-width: 1680px) {
	.appleby_page .appleby_prose .appleby_inner,
	.appleby_page .appleby_list .appleby_inner {
		max-width: 72rem;
	}
}

/* Premium layer responsive
==============================================================
The effects simplify as the screen narrows rather than switching off: the
palette, gradients, depth and entrance animations stay everywhere, while the
pointer-driven effects and the heaviest filters drop away where they cost most
and are least visible. */

/* Laptop and below: shorter entrance travel, so a band is not still sliding
   when the next one arrives. */
@media (max-width: 1279px) {
	.appleby-reveal-ready .appleby_page [data-appleby-reveal] > .appleby_inner {
		transform: translate3d(0, 1.5rem, 0);
	}
}

/* Tablet */
@media (max-width: 1023px) {
	.appleby_page .appleby_hero_title {
		font-size: clamp(2.1rem, 6vw, 3.2rem);
	}

	.appleby_page .appleby_section_title {
		font-size: clamp(1.7rem, 4.5vw, 2.4rem);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.appleby_page .appleby_services_item,
	.appleby_page .appleby_pricing_item {
		padding: 1.6rem;
	}

	.appleby_page .appleby_services_icon,
	.appleby_page .appleby_credentials_icon,
	.appleby_page .appleby_modal_icon {
		width: 3rem;
		height: 3rem;
		margin-bottom: 1rem;
		font-size: 1.25rem;
		/* No idle float on a phone: barely visible, never free. */
		animation: none;
	}

	.appleby_page .appleby_pricing_price {
		font-size: 2.4rem;
	}

	/* Cards arrive faster and closer together, or the last one in a long list
	   is still waiting when it is already well past the fold. */
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_services_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_pricing_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_credentials_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_steps_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_gallery_item,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_list_items > li,
	.appleby-reveal-ready .appleby_page [data-appleby-reveal].is-visible .appleby_faq_item {
		transition-delay: calc(var(--i, 0) * 40ms);
	}

	/* Blur-to-sharp on a heading is a full-width filter pass; on a phone it is
	   the one entrance effect worth dropping. */
	.appleby-reveal-ready .appleby_page [data-appleby-reveal] .appleby_section_title {
		filter: none;
	}
}

/* Large mobile and below: tighter bands and radii. */
@media (max-width: 479px) {
	.appleby_page {
		--appleby-band: clamp(3rem, 12vw, 4.5rem);
		--appleby-radius: 16px;
	}

	.appleby_page .appleby_cta .appleby_inner {
		padding: 1.75rem;
	}
}

/* CTA panel on small screens
==============================================================
The two actions stack, and the aurora stops drifting: on a phone it is a
large blurred layer being repainted for an effect that is barely perceptible
at that size. */

@media (max-width: 767px) {
	.appleby_page .appleby_cta .appleby_inner {
		padding: 2.5rem 1.5rem;
		border-radius: var(--appleby-radius);
	}

	.appleby_page .appleby_cta .appleby_inner:before,
	.appleby_page .appleby_cta .appleby_inner:after {
		animation: none;
	}

	.appleby_page .appleby_cta .appleby_buttons {
		margin-top: 1.75rem;
	}
}