/* =====================================================================
   Responsive breakpoints — loaded after main.css so it can override.
   Breakpoints: 1024px (tablet landscape), 860px (nav collapse),
   768px (tablet/mobile), 480px (small mobile), 360px (extra small)
   ===================================================================== */

/* ---------------- Global safeguards (all screen sizes) ---------------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* WordPress can insert raw <table> markup from the editor; make sure it
   never breaks layout on narrow screens. */
.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
	padding: 10px 14px;
	border: 1px solid var(--ts-border);
}

/* Bigger, easier-to-tap touch targets on touch devices (without distorting
   small circular controls like the hero dots or social icons). */
@media (pointer: coarse) {
	.mobile-menu-toggle {
		padding: 12px;
	}

	.primary-menu a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.footer-menu li a {
		display: inline-block;
		padding: 4px 0;
	}

	.hero-dot {
		position: relative;
	}

	.hero-dot::before {
		content: "";
		position: absolute;
		inset: -14px;
	}

	.hero-nav {
		width: 44px;
		height: 44px;
	}
}

/* ---------------- Tablet / small desktop (<=1024px) ---------------- */
@media (max-width: 1024px) {
	.course-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.highlights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-columns {
		grid-template-columns: 1fr 1fr;
	}

	.principal-inner {
		grid-template-columns: 280px 1fr;
		gap: 36px;
	}

	.course-detail-grid {
		grid-template-columns: 1fr;
	}

	.course-info-card {
		position: static;
	}

	.about-vision-mission {
		grid-template-columns: 1fr;
	}

	.about-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------- Tablet portrait (<=860px): nav collapses ---------------- */
@media (max-width: 860px) {
	.primary-navigation {
		position: fixed;
		top: var(--ts-header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--ts-white);
		flex-direction: column;
		align-items: stretch;
		padding: 24px 20px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		z-index: 9998;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.primary-menu a {
		padding: 14px 16px;
		font-size: 17px;
		border-radius: var(--ts-radius-sm);
	}

	.header-cta {
		margin: 16px 0 0;
		align-self: flex-start;
	}

	.mobile-menu-toggle {
		display: block;
	}

	.content-with-sidebar {
		grid-template-columns: 1fr;
	}

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

	.post-card-media {
		aspect-ratio: 16 / 9;
	}

	.post-card-body {
		padding: 20px;
	}
}

/* ---------------- Mobile (<=768px) ---------------- */
@media (max-width: 768px) {
	:root {
		--ts-header-height: 72px;
	}

	.section-padding {
		padding: 56px 0;
	}

	.hero-slides {
		aspect-ratio: 4 / 5;
		max-height: 560px;
	}

	.hero-slide-content {
		max-width: 100%;
		padding-right: 20px;
	}

	.hero-nav {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.hero-nav-prev {
		left: 12px;
	}

	.hero-nav-next {
		right: 12px;
	}

	.course-hero {
		min-height: 220px;
	}

	.course-hero-content {
		padding-bottom: 24px;
	}

	.notice-ticker {
		font-size: 13px;
	}

	.ticker-inner {
		gap: 12px;
	}

	.ticker-label {
		padding: 6px 12px;
		font-size: 12px;
	}

	.ticker-view-all {
		font-size: 12.5px;
	}

	.principal-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.principal-photo {
		max-width: 260px;
		margin: 0 auto;
	}

	.principal-message {
		text-align: left;
	}

	.course-grid {
		grid-template-columns: 1fr;
	}

	.highlights-grid {
		grid-template-columns: 1fr;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		padding: 48px 20px 32px;
		text-align: left;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.about-stats {
		grid-template-columns: 1fr 1fr;
	}

	.notice-row {
		grid-template-columns: 60px 1fr;
	}

	.notice-row-action {
		grid-column: 1 / -1;
	}

	.download-table-head {
		display: none;
	}

	.download-table-row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 18px;
	}

	.download-table-row span[role="cell"]::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: var(--ts-navy-dark);
	}

	.download-title::before {
		content: none !important;
	}

	.course-filter-row {
		flex-direction: column;
	}

	.course-filter-row input,
	.course-filter-row select,
	.course-filter-row button {
		width: 100%;
	}
}

/* ---------------- Small mobile (<=480px) ---------------- */
@media (max-width: 480px) {
	.site-title {
		font-size: 17px;
	}

	.site-tagline {
		display: none;
	}

	.hero-title {
		font-size: 24px;
	}

	.hero-subtitle {
		font-size: 15px;
	}

	.btn {
		padding: 11px 20px;
		font-size: 14px;
	}

	.ticker-label-text {
		display: none;
	}

	.ticker-view-all {
		display: none;
	}

	.about-stats {
		grid-template-columns: 1fr;
	}

	.error-code {
		font-size: 64px;
	}

	.course-hero-content {
		text-align: left;
	}

	.course-title {
		font-size: 24px;
	}
}

/* ---------------- Extra small phones (<=360px) ---------------- */
@media (max-width: 360px) {
	.container {
		padding: 0 14px;
	}

	.site-logo img {
		max-height: 40px;
	}

	.hero-title {
		font-size: 21px;
	}

	.hero-subtitle {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 22px;
	}

	.btn {
		padding: 10px 16px;
		font-size: 13.5px;
	}
}

/* ---------------- Print styles ---------------- */
@media print {
	.site-header,
	.notice-ticker,
	.hero-slider,
	.site-footer,
	.mobile-menu-toggle {
		display: none !important;
	}
}