/* ==========================================================================
   Shayari Mirchi — responsive layer
   Loaded after main.css. Mobile-first overrides from 380px to 1440px.
   Target range: 320px (smallest supported) to 1440px and wider.
   Rule of the file: never introduce horizontal overflow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1439px — cap the reading measure a little tighter
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	:root {
		--smi-container: 1180px;
	}
}

/* --------------------------------------------------------------------------
   ≤ 1279px — tighter grids, smaller headings
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	:root {
		--smi-gap: 1.1rem;
	}

	h1 { font-size: var(--smi-fs-xl); }
	.smi-hero__title { font-size: 1.75rem; }
	.smi-archive-title { font-size: var(--smi-fs-xl); }
	.smi-single__title { font-size: var(--smi-fs-xl); }
	.smi-single__text .shayari-text {
		font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
		line-height: 1.9;
	}
}

/* --------------------------------------------------------------------------
   ≤ 1023px — tablet: hide the inline header search, shrink the grid,
   make room for the fixed bottom navigation
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.smi-search--header {
		display: none;
	}

	.smi-bottom-nav {
		display: flex;
	}

	.smi-site {
		padding-bottom: var(--smi-bottomnav-h);
	}

	.smi-grid,
	.smi-grid--two,
	.smi-grid--quotes,
	.smi-grid--captions {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	}

	.smi-hero__title { font-size: 1.6rem; }
	.smi-block__title { font-size: var(--smi-fs-lg); }

	.smi-single__card {
		padding: var(--smi-space);
	}

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

	.smi-single__actions .smi-btn {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------------
   ≤ 899px — the horizontal primary nav gives way to the drawer
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.site-header__inner {
		padding-block: var(--smi-space-2xs);
	}

	.site-nav {
		display: none;
	}

	.site-header__top {
		gap: var(--smi-space-xs);
	}
}

/* --------------------------------------------------------------------------
   ≤ 767px — single column everywhere, larger tap targets
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--smi-fs-2xl: 1.6rem;
		--smi-fs-xl: 1.35rem;
		--smi-fs-lg: 1.15rem;
		--smi-gap: 1rem;
		--smi-header-h: 58px;
	}

	.smi-container {
		padding-inline: var(--smi-space-sm);
	}

	.site-main {
		padding-block: var(--smi-space-lg) var(--smi-space-xl);
	}

	.smi-grid,
	.smi-grid--two,
	.smi-grid--quotes,
	.smi-grid--captions,
	.smi-cat-grid {
		grid-template-columns: 1fr;
	}

	.smi-directory {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	}

	.smi-card__body {
		padding: var(--smi-space-sm);
	}

	/* Every action button stays a comfortable 44px tap target. */
	.smi-actions .smi-btn,
	.smi-single__actions .smi-btn {
		min-height: 44px;
		padding-inline: 0.75rem;
	}

	.smi-btn {
		min-height: 44px;
	}

	.smi-archive-head {
		margin-bottom: var(--smi-space);
	}

	.smi-single__card {
		padding: var(--smi-space-sm);
		border-radius: var(--smi-radius);
	}

	.smi-single__text .shayari-text {
		font-size: 1.15rem;
		line-height: 1.85;
	}

	.smi-postnav {
		grid-template-columns: 1fr;
	}

	.smi-postnav__link--next {
		text-align: left;
	}

	.smi-author-card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--smi-space-2xs);
		padding: var(--smi-space-sm);
	}

	.site-footer {
		padding-block: var(--smi-space-xl) var(--smi-space);
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

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

	.smi-saved {
		padding: var(--smi-space-sm);
		border-radius: var(--smi-radius);
	}

	.smi-saved-item {
		flex-direction: column;
		gap: var(--smi-space-2xs);
	}

	.smi-saved-item__actions {
		flex-direction: row;
		align-self: flex-end;
	}

	.smi-404__code {
		font-size: 4rem;
	}

	.smi-block,
	.smi-prose--mid {
		margin-top: var(--smi-space-xl);
		padding-top: var(--smi-space);
	}

	.comment-list .children {
		margin-left: var(--smi-space-xs);
	}

	/* Toast sits above the bottom bar, full width. */
	.smi-toast {
		bottom: calc(var(--smi-bottomnav-h) + 10px);
		max-width: calc(100vw - 24px);
		width: max-content;
	}
}

/* --------------------------------------------------------------------------
   ≤ 639px — phone refinements
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
	:root {
		--smi-space-2xl: 2.25rem;
		--smi-space-3xl: 3rem;
	}

	.site-logo {
		font-size: var(--smi-fs-md);
	}

	.site-tagline {
		font-size: 0.7rem;
	}

	.smi-hero {
		padding-block: var(--smi-space-lg) var(--smi-space);
	}

	.smi-hero__title {
		font-size: 1.45rem;
	}

	.smi-hero__text {
		font-size: var(--smi-fs-base);
	}

	.smi-hero__chips {
		gap: 0.3rem;
	}

	.smi-filters {
		gap: 0.3rem;
	}

	.smi-filters__label {
		width: 100%;
		margin-bottom: 0.15rem;
	}

	/* Two actions per row keeps the primary copy button visible without scroll. */
	.smi-actions {
		gap: 0.3rem;
	}

	.smi-actions .smi-btn {
		flex: 1 1 calc(50% - 0.3rem);
	}

	.smi-single__actions .smi-btn {
		flex: 1 1 calc(50% - 0.3rem);
	}

	.smi-pagination__item .page-numbers {
		min-width: 38px;
		min-height: 38px;
	}

	.smi-directory {
		grid-template-columns: 1fr;
	}

	.smi-prose p,
	.smi-prose li {
		font-size: var(--smi-fs-base);
	}

	.smi-prose blockquote {
		padding: var(--smi-space-sm);
	}
}

/* --------------------------------------------------------------------------
   ≤ 479px — smallest supported width (320px and up)
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
	:root {
		--smi-fs-2xl: 1.4rem;
		--smi-fs-xl: 1.25rem;
		--smi-fs-md: 1rem;
		--smi-radius: 12px;
		--smi-radius-lg: 16px;
	}

	.smi-container {
		padding-inline: 0.75rem;
	}

	.site-header__tools {
		gap: 0.3rem;
	}

	.smi-theme-toggle,
	.site-header__menu-toggle {
		width: 38px;
		height: 38px;
	}

	.smi-single__text .shayari-text {
		font-size: 1.05rem;
		line-height: 1.8;
	}

	/* Full-width stacked actions: labels stay readable at 320px. */
	.smi-actions .smi-btn,
	.smi-single__actions .smi-btn {
		flex: 1 1 100%;
	}

	.smi-mobile-nav__link {
		padding: 0.8rem 0.75rem;
	}

	.smi-bottom-nav__label {
		font-size: 0.6rem;
	}
}

/* --------------------------------------------------------------------------
   Short landscape phones: keep the drawer scrollable, not clipped
   -------------------------------------------------------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
	.smi-mobile-nav {
		max-height: 70vh;
		overflow-y: auto;
	}
}

/* --------------------------------------------------------------------------
   Wide screens
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
	:root {
		--smi-container: 1240px;
		--smi-gap: 1.4rem;
	}

	.smi-single__text .shayari-text {
		font-size: 1.75rem;
	}

	.smi-single__card {
		padding: var(--smi-space-xl);
	}
}

/* --------------------------------------------------------------------------
   Coarse pointers: bigger controls, no hover-only affordances
   -------------------------------------------------------------------------- */

@media (hover: none) {
	.smi-card:hover,
	.smi-cat-card:hover,
	.smi-cluster-list__link:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Accessibility: nothing may exceed the viewport width
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	.smi-subnav__list {
		padding-inline: var(--smi-space-2xs);
	}
}