/* ==================================================
   RESPONSIVE FINAL LAYER
   ==================================================

   Breakpoints:
   Desktop : >= 1024px
   Tablet  : 768px - 1023px
   Mobile  : <= 767px

   File ini dimuat paling akhir untuk merapikan
   responsive seluruh theme.
   ================================================== */


/* ==================================================
   GLOBAL SAFETY
   ================================================== */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
	overflow-wrap: break-word;
}

.entry-content {
	min-width: 0;
}

.entry-content table {
	display: block;

	max-width: 100%;

	overflow-x: auto;
}

.entry-content pre {
	max-width: 100%;

	overflow-x: auto;
}

.entry-content iframe {
	width: 100%;
}


/* ==================================================
   TABLET
   768px - 1023px
   ================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	/* ----------------------------------------------
	   GLOBAL
	   ---------------------------------------------- */

	.container {
		width:
			min(
				calc(100% - 40px),
				var(--container)
			);
	}

	.section {
		padding:
			44px 0;
	}

	.section-small {
		padding:
			32px 0;
	}

	h1 {
		font-size:
			clamp(
				2rem,
				4.2vw,
				2.5rem
			);
	}

	h2 {
		font-size:
			clamp(
				1.5rem,
				3.5vw,
				1.95rem
			);
	}

	h3 {
		font-size:
			clamp(
				1.1rem,
				2.5vw,
				1.35rem
			);
	}


	/* ----------------------------------------------
	   HEADER
	   ---------------------------------------------- */

	.site-header,
	.header-container {
		height: 72px;
	}

	.primary-navigation {
		top: 72px;
	}

	.custom-logo {
		max-width: 190px;
		max-height: 48px;
	}

	.site-logo-text {
		font-size: 21px;
	}


	/* ----------------------------------------------
	   HOMEPAGE
	   ---------------------------------------------- */

	.home-hero {
		padding:
			44px 0
			38px;
	}

	.hero-grid {
		gap: 28px;
	}

	.hero-content h1 {
		max-width: 560px;
	}

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

	.service-card,
	.article-card,
	.testimonial-card {
		min-width: 0;
	}


	/* ----------------------------------------------
	   SERVICES
	   ---------------------------------------------- */

	.service-page-hero,
	.service-detail-hero {
		padding:
			44px 0;
	}

	.service-page-card-content h3 {
		font-size: 19px;
	}

	.service-detail-layout {
		grid-template-columns:
			minmax(0, 1fr)
			260px;

		gap: 24px;
	}

	.service-detail-sidebar {
		top: 84px;
	}


	/* ----------------------------------------------
	   ABOUT
	   ---------------------------------------------- */

	.about-hero {
		padding:
			40px 0;
	}

	.about-story-grid {
		grid-template-columns:
			minmax(0, 1fr)
			260px;

		gap: 24px;
	}

	.about-advantage-card {
		padding: 18px;
	}


	/* ----------------------------------------------
	   CONTACT
	   ---------------------------------------------- */

	.contact-hero {
		padding:
			40px 0;
	}

	.contact-branches-grid,
	.contact-maps-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.contact-branch-card {
		min-width: 0;
	}


	/* ----------------------------------------------
	   BLOG ARCHIVE
	   ---------------------------------------------- */

	.blog-hero {
		padding:
			38px 0;
	}

	.blog-hero-inner {
		grid-template-columns:
			minmax(0, 1fr)
			300px;

		gap: 26px;
	}

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


	/* ----------------------------------------------
	   SINGLE BLOG

	   Pada tablet landscape sidebar = 260px
	   gap = 24px.

	   Header dan featured image harus mengikuti
	   lebar kolom artikel.
	   ---------------------------------------------- */

	.single-blog-layout {
		grid-template-columns:
			minmax(0, 1fr)
			260px;

		gap: 24px;
	}

	.single-blog-header-inner > * {
		width:
			calc(
				100% - 284px
			);

		max-width: none;
	}

	.single-blog-featured {
		width:
			calc(
				100% - 284px
			);

		max-width: none;
	}

	.single-blog-sidebar {
		top: 84px;
	}

}


/* ==================================================
   INTERMEDIATE TABLET
   <= 900px

   Beberapa layout dua kolom sudah mulai terasa
   terlalu sempit di ukuran ini.
   ================================================== */

@media (max-width: 900px) {

	/* ----------------------------------------------
	   HOMEPAGE HERO
	   ---------------------------------------------- */

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

	.hero-content {
		order: 1;
	}

	.hero-media {
		order: 2;
	}

	.hero-image,
	.hero-image-placeholder {
		max-width: 720px;
	}


	/* ----------------------------------------------
	   SERVICES
	   ---------------------------------------------- */

	.service-page-hero-grid,
	.service-detail-hero-grid,
	.service-detail-layout {
		grid-template-columns: 1fr;
	}

	.service-detail-sidebar {
		position: static;
	}


	/* ----------------------------------------------
	   ABOUT
	   ---------------------------------------------- */

	.about-hero-grid,
	.about-story-grid {
		grid-template-columns: 1fr;
	}

	.about-hero-media {
		order: 2;
	}


	/* ----------------------------------------------
	   CONTACT
	   ---------------------------------------------- */

	.contact-hero-grid {
		grid-template-columns: 1fr;
	}


	/* ----------------------------------------------
	   BLOG HERO
	   ---------------------------------------------- */

	.blog-hero-inner {
		grid-template-columns: 1fr;
	}

	.blog-hero-search {
		max-width: 620px;
	}


	/* ----------------------------------------------
	   SINGLE ARTICLE
	   ---------------------------------------------- */

	.single-blog-layout {
		grid-template-columns: 1fr;

		max-width: 800px;
	}

	.single-blog-header-inner,
	.single-blog-featured-wrap {
		max-width: 800px;
	}

	.single-blog-header-inner > * {
		width: 100%;
		max-width: none;
	}

	.single-blog-featured {
		width: 100%;
		max-width: none;
	}

	.single-blog-sidebar {
		position: static;

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

	.blog-sidebar-cta {
		grid-column:
			1 / -1;
	}

}


/* ==================================================
   MOBILE
   <= 767px
   ================================================== */

@media (max-width: 767px) {

	/* ----------------------------------------------
	   GLOBAL
	   ---------------------------------------------- */

	.container {
		width:
			min(
				calc(100% - 32px),
				var(--container)
			);
	}

	body {
		font-size: 15px;
	}

	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 25px;
	}

	h3 {
		font-size: 19px;
	}

	.section {
		padding:
			36px 0;
	}

	.section-small {
		padding:
			28px 0;
	}

	.btn {
		width: auto;

		min-height: 36px;

		padding:
			7px 11px;

		font-size: 13px;
	}


	/* ----------------------------------------------
	   HEADER
	   ---------------------------------------------- */

	.site-header,
	.header-container {
		height: 64px;
	}

	.primary-navigation {
		top: 64px;

		max-height:
			calc(
				100dvh - 64px
			);
	}

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

	.site-logo-text {
		font-size: 19px;
	}

	.menu-toggle {
		width: 38px;
		height: 38px;
	}

	.mobile-booking {
		padding-top: 12px;
	}


	/* ----------------------------------------------
	   HOMEPAGE
	   ---------------------------------------------- */

	.home-hero {
		padding:
			32px 0
			28px;
	}

	.hero-grid {
		gap: 24px;
	}

	.hero-content h1 {
		font-size: 30px;
	}

	.hero-description {
		font-size: 14px;
	}

	.hero-actions {
		gap: 7px;
	}

	.hero-image-placeholder {
		min-height: 230px;
	}

	.trust-item {
		padding:
			14px 12px;
	}

	.service-card,
	.article-card,
	.testimonial-card,
	.advantage-item,
	.process-item {
		min-width: 0;
	}

	.service-card h3,
	.article-body h3 {
		font-size: 18px;
	}

	.about-grid {
		gap: 22px;
	}

	.vehicle-chip {
		font-size: 12px;
	}


	/* ----------------------------------------------
	   SERVICE
	   ---------------------------------------------- */

	.service-page-hero,
	.service-detail-hero {
		padding:
			32px 0;
	}

	.service-page-hero-grid,
	.service-detail-hero-grid,
	.service-detail-layout {
		gap: 20px;
	}

	.service-page-description,
	.service-detail-description {
		font-size: 14px;
	}

	.service-page-actions,
	.service-detail-actions {
		gap: 7px;
	}

	.service-page-card-content {
		padding: 18px;
	}

	.service-page-card-content h3 {
		font-size: 18px;
	}

	.service-detail-placeholder strong {
		font-size: 20px;
	}

	.service-related-card {
		padding: 18px;
	}

	.service-bottom-cta {
		padding:
			26px 0;
	}

	.service-bottom-cta h2 {
		font-size: 22px;
	}


	/* ----------------------------------------------
	   ABOUT
	   ---------------------------------------------- */

	.about-hero {
		padding:
			30px 0;
	}

	.about-hero-content h1 {
		font-size: 30px;
	}

	.about-hero-description {
		font-size: 14px;
	}

	.about-story-section,
	.about-advantages-section,
	.about-values-section {
		padding:
			34px 0;
	}

	.about-section-heading {
		margin-bottom: 20px;
	}

	.about-section-heading h2,
	.about-story-content h2 {
		font-size: 24px;
	}

	.about-since-card {
		padding: 20px;
	}

	.about-since-year {
		font-size: 30px;
	}

	.about-advantage-card {
		padding: 17px;
	}

	.about-final-cta {
		padding:
			26px 0;
	}

	.about-final-cta h2 {
		font-size: 22px;
	}


	/* ----------------------------------------------
	   CONTACT
	   ---------------------------------------------- */

	.contact-hero {
		padding:
			30px 0;
	}

	.contact-hero-content h1 {
		font-size: 30px;
	}

	.contact-hero-description {
		font-size: 14px;
	}

	.contact-branches-section,
	.contact-maps-section {
		padding:
			34px 0;
	}

	.contact-branch-card {
		padding: 18px;
	}

	.contact-branch-header h3 {
		font-size: 18px;
	}

	.contact-branch-detail a,
	.contact-branch-detail p {
		overflow-wrap: anywhere;
	}

	.contact-map iframe {
		height: 220px;
	}

	.contact-final-cta {
		padding:
			26px 0;
	}

	.contact-final-cta h2 {
		font-size: 21px;
	}


	/* ----------------------------------------------
	   BLOG ARCHIVE
	   ---------------------------------------------- */

	.blog-hero {
		padding:
			30px 0;
	}

	.blog-hero h1 {
		font-size: 30px;
	}

	.blog-hero-description {
		font-size: 14px;
	}

	.blog-search-form {
		width: 100%;
	}

	.blog-search-field {
		min-width: 0;
	}

	.blog-list-section {
		padding:
			32px 0;
	}

	.blog-card-body {
		padding: 17px;
	}

	.blog-card-title {
		font-size: 18px;
	}

	.blog-category-filter {
		margin-bottom: 20px;
	}


	/* ----------------------------------------------
	   SINGLE BLOG
	   ---------------------------------------------- */

	.single-blog-header {
		padding:
			28px 0
			20px;
	}

	.single-blog-header-inner,
	.single-blog-featured-wrap,
	.single-blog-layout {
		max-width: none;
	}

	.single-blog-header-inner > * {
		width: 100%;
	}

	.single-blog-header h1 {
		font-size: 29px;
	}

	.single-blog-featured-wrap {
		padding-top: 18px;
	}

	.single-blog-featured {
		width: 100%;

		aspect-ratio:
			16 / 9;
	}

	.single-blog-content-section {
		padding:
			28px 0
			34px;
	}

	.single-blog-content {
		font-size: 15px;
		line-height: 1.68;
	}

	.single-blog-content h2 {
		font-size: 22px;
	}

	.single-blog-content h3 {
		font-size: 18px;
	}

	.single-blog-sidebar {
		grid-template-columns: 1fr;

		gap: 12px;
	}

	.blog-sidebar-widget,
	.blog-sidebar-cta {
		padding: 15px;
	}

	.blog-sidebar-title {
		font-size: 17px;
	}

	.blog-sidebar-cta {
		grid-column: auto;
	}

	.single-blog-cta {
		padding:
			25px 0;
	}

	.single-blog-cta h2 {
		font-size: 20px;
	}

	.single-blog-related {
		padding:
			32px 0;
	}


	/* ----------------------------------------------
	   FOOTER
	   ---------------------------------------------- */

	.site-footer {
		padding-top: 32px;
	}

	.footer-grid {
		gap: 24px;
	}

	.footer-title {
		font-size: 17px;
	}

	.footer-logo-text {
		font-size: 20px;
	}

	.footer-bottom {
		margin-top: 24px;
	}


	/* ----------------------------------------------
	   FLOATING WHATSAPP
	   ---------------------------------------------- */

	.floating-whatsapp {
		right:
			max(
				12px,
				env(
					safe-area-inset-right
				)
			);

		bottom:
			max(
				12px,
				env(
					safe-area-inset-bottom
				)
			);

		width: 50px;
		height: 50px;
	}

	.floating-whatsapp-icon,
	.floating-whatsapp-icon svg {
		width: 28px;
		height: 28px;
	}

}


/* ==================================================
   SMALL MOBILE
   <= 480px
   ================================================== */

@media (max-width: 480px) {

	.container {
		width:
			calc(
				100% - 28px
			);
	}

	h1,
	.hero-content h1,
	.about-hero-content h1,
	.contact-hero-content h1,
	.blog-hero h1,
	.single-blog-header h1 {
		font-size: 28px;
	}

	h2 {
		font-size: 23px;
	}

	.custom-logo {
		max-width: 135px;
	}

	.site-logo-text {
		font-size: 18px;
	}

	.hero-actions,
	.service-page-actions,
	.service-detail-actions,
	.about-hero-actions,
	.contact-hero-actions,
	.contact-final-actions,
	.single-blog-cta-actions,
	.blog-sidebar-cta-actions {
		gap: 6px;
	}

	.btn {
		min-height: 34px;

		padding:
			6px 9px;

		font-size: 12px;
	}

	.btn svg {
		width: 14px;
		height: 14px;
	}

	.service-page-card-content,
	.blog-card-body,
	.contact-branch-card {
		padding: 16px;
	}

	.blog-sidebar-post {
		grid-template-columns:
			64px
			minmax(0, 1fr);
	}

	.blog-sidebar-post-image {
		width: 64px;
		height: 54px;
	}

}