/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Container - Global (Applies across breakpoints unless overridden)
   ========================================================================== */
   .container {
	min-width: 100% !important;
}

/* ==========================================================================
   MAX-HEIGHT: 620px (Specific Vertical Constraints)
   ========================================================================== */
@media (max-height:620px) {

	/* --- Page Specific: Contacts --- */
	#main-contacts {
		display: block;
		padding-bottom: var(--space-xxxxl);
		height: auto;
	}
}

/* ==========================================================================
   MAX-WIDTH: 1199px (Landscape Tablets, Large Laptops)
   ========================================================================== */
@media (max-width: 1199px) {

	/* --- Components: Footer --- */
	footer .button-big {
		max-width: 150px;
	}

	/* --- Components: Hero (Agency Page) --- */
	.hero__logo-container {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.hero__main-text,
	.big-text {
		text-align: left;
	}

	.hero__main-text .tab,
	.big-text .tab {
		display: none !important;
	}

	/* --- Layout: Section Grid --- */
	.main-content-column {
		width: auto;
	}

	.additional-content-column {
		width: 70%;
	}
    /* --- Horizontal Accordion Stages --- */
    .stage-item {
        padding: var(--padding-mobile-stage-item);
    }
    .stage-header {
        padding-bottom: var(--padding-mobile-stage-item);
    }
}

/*    9.2 MAX-WIDTH: 1024px (Tablets and Smaller)
   ========================================================================== */
@media (max-width: 1024px) {
	
	    /* --- Horizontal Accordion Stages --- */
		.horizontal-accordion-stages:hover .stage-item { /* On container hover, items reset slightly */
			flex-grow: 1;
			flex-basis: 20%;
		}
		.horizontal-accordion-stages .stage-item:hover { /* Specific item hover expands more */
			flex-grow: 5;
			flex-basis: 40%;
		}
    /* --- Horizontal Accordion Stages --- */
    .horizontal-accordion-stages {
        flex-direction: column;
        height: auto;
        border-top: none;
        border-bottom: none;
    }
    .stage-item {
        flex: 1 1 100%;
        border-left: none;
        border-top: var(--border-medium);
        padding: var(--padding-mobile-stage-item);
        transition: none;
        justify-content: flex-start;
    }
    .stage-item:first-child {
        border-top: var(--border-medium); /* Re-apply top border for the first item */
    }
    .stage-header::after { /* Hide plus/minus icon from styles.css */
        display: none;
    }
    .stage-header {
        border: none;
    }
    .stage-content {
        opacity: 1;
        max-height: none;
        transition: none;
        margin-top: var(--space-md);
        align-items: flex-start;
        justify-content: flex-start;
    }
    .stage-footer {
        margin-top: var(--space-md);
    }
    .stage-item:hover {
        flex: 1 1 100%; /* Disable expansion on hover */
    }
}



/* ==========================================================================
   MAX-WIDTH: 991px (Portrait Tablets)
   ========================================================================== */
@media (max-width: 991px) {

	/* --- Global: Root Variable Overrides --- */
	:root {
		/* Redefine semantic variables for tablets */
		--padding-container-horizontal: var(--space-md);
		/* Default: lg */
		--padding-section-vertical: var(--space-lg);
		/* Default: xl */
		--padding-element-vertical: var(--space-md);
		/* Default: lg */
		--padding-element-bottom: var(--space-md);
		/* Default: lg */
		--padding-accordion-header: var(--space-md);
		/* Default: lg */
		--padding-accordion-body: var(--space-md);
		/* Default: lg */

		/* Default: xl */
		/* --margin-section-bottom: var(--space-xxxl); */
		/* Default: block */
		--margin-element-top: var(--space-md);
		/* Default: lg */
		--margin-footer-separator: var(--space-xl);
		/* Default: xxl */

		--gap-section-items: var(--space-md);
		/* Default: lg */

		--height-header-footer: var(--space-xxl);
		/* Default: xxxl */
		--height-carousel-image: var(--space-xxxxl);
		/* Default: xxxxl */
	}

	/* --- Elements: Footer --- */
	.policy-link { /* Policy link in desktop footer */
		display: none;
	}
	#footer-container #copyright-span { /* Copyright in desktop footer */
		display: none;
	}

	/* --- Components: Footer --- */
	footer .button-big { /* Applied to both desktop and potentially mobile menu if not more specific */
		max-width: 150px; /* This rule appears twice, the last one (150px) will take precedence over an earlier 200px if it existed */
	}
    /* footer .button-big { max-width: 200px; } Was here, but the 150px one below overwrites. */

	/* --- Page Specific: Contacts --- */
	#contacts-top-part {
		display: block;
	}
	#contacts-small-span {
		margin-bottom: var(--margin-section-vertical);
	}
	#main-contacts { /* Layout adjustment for contacts page */
		justify-content: start;
	}

	/* --- Components: Carousel --- */
	.case-block .info,
	.agency-owl-carousel-item-block .info { /* Info block in carousels */
		display: block;
	}
	.team-owl-carousel .agency-owl-carousel-item-block .info p:last-child { /* Team carousel specific text */
		font-size: 13px;
	}

	/* --- Layout: Section Grid --- */
	.section-grid-container {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.main-content-column-single { /* When section grid only has one main column */
		color: var(--color-light);
	}
	.main-content-column { /* Main content column adjustment */
		grid-column: 1;
		grid-row: 3;
	}
	.additional-content-column { /* Additional content column adjustment */
		width: auto;
	}
}
/* ==========================================================================
   MAX-WIDTH: 767px (Landscape Mobile, Small Tablets)
   ========================================================================== */
@media (max-width: 767px) {

	    /* --- Generic Horizontal Accordion --- */
		.horizontal-accordion {
			flex-direction: column;
		}
		.horizontal-accordion .accordion-item {
			width: 100%;
			margin-bottom: var(--space-xxs);
		}

	/* --- Components: Footer --- */
	footer:not([id]) #footer-container { /* Hide desktop footer container */
		display: none;
	}
	footer { /* Reset padding for mobile footer (which is likely #footer-container-mobile-menu) */
		padding: 0;
	}
	#footer-container-mobile-menu { /* Show and style mobile menu container in footer */
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	/* --- Page Specific: Case Detail Footer --- */
	footer#case-footer #case-category-name {
		display: none;
	}
	footer#case-footer #case-name {
		font-size: var(--text-xs);
	}

	/* --- Elements: Header --- */
	#coordinates { /* Hide coordinates text */
		display: none;
	}

	/* --- Page Specific: Contacts --- */
	#contacts-grid-container {
		display: block;
	}

	.grid-item:not(.one-line){ /* Contacts grid items stack */
		flex-direction: column;
		align-items: start !important;
	}

	/* --- Components: Popups --- */
	#case-block-info-popup { /* Case info popup full width */
		width: 100%;
	}

    /* --- Components: Accordion (Branding Section Specific) --- */
    /* Note: These rules are duplicated from styles.css. Keeping as per original file structure. */
    .accordion__item-content {
		grid-template-columns: 1fr;
	}
	.accordion__item-second {
		grid-template-columns: 1fr;
	}
	.accordion__item-tags {
		grid-column: 1 / 2;
		/* Move tags below text */
		grid-row: 2 / 3;
		justify-content: flex-start;
		/* Align tags left */
		margin-top: var(--margin-element-top);
	}
	.accordion__item-text .small-text {
		max-width: 100%;
	}
	.accordion__item-text p {
		max-width: 100%;
	}

    /* --- Components: Data Table --- */
    /* Note: These rules are duplicated from styles.css. Keeping as per original file structure. */
	.data-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		gap: 0 var(--gap-md);
	}
	.data-table tr td:last-child {
		text-align: right;
		padding-right: 0;
	}
	.data-table tr td:first-child {
		padding-left: 0;
	}
	.data-table td {
		display: block;
		padding: var(--padding-mobile-table-cell);
		text-align: left;
		border: none;
		line-height: 1.3;
		/* Keep specific or create var(--line-height-tight)? */
		position: static;
		/* Убедимся, что static */
	}
	/* Распределение ячеек по сетке */
	.data-table td:nth-child(1) {
		grid-area: 1 / 1 / 2 / 2;
		font-weight: bold;
		text-transform: uppercase;
	}
	.data-table td:nth-child(2) {
		grid-area: 2 / 1 / 3 / 2;
		font-size: var(--text-xs);
		color: var(--color-grey-text-alt);
	}
	.data-table td:nth-child(3) {
		grid-area: 1 / 2 / 2 / 3;
		text-align: right;
		font-size: 13px; /* Keep specific or use var(--text-xs)? */
	}
	.data-table td:nth-child(4) {
		grid-area: 2 / 2 / 3 / 3;
		text-align: right;
		font-size: 13px;
		/* Keep specific or use --text-xs? */
		color: var(--color-grey-text-alt);
	}
	/* Позиционирование превью на мобильных */
	.row-image-preview {
		left: 50%;
		width: var(--height-carousel-image);
		height: var(--height-carousel-image);
        top: 10px;
        transform: translateX(-50%);
	}
	.data-table tr:hover td:nth-child(2),
	.data-table tr:hover td:nth-child(4) {
		color: var(--color-grey-dark-alt);
	}
}

/* ==========================================================================
   MAX-WIDTH: 575px (Portrait Mobile)
   ========================================================================== */
@media (max-width: 575px) {

	/* --- Global: Root Variable Overrides --- */
	:root {
		/* Redefine semantic variables further for mobile */
		--padding-container-horizontal: var(--space-sm);
		/* From md */
		--padding-section-vertical: var(--space-md);
		/* From lg */
		--padding-element-vertical: var(--space-sm);
		/* From md */
		--padding-element-bottom: var(--space-sm);
		/* From md */
		--padding-accordion-header: var(--space-sm);
		/* From md */
		--padding-accordion-body: var(--space-sm);
		/* From md */

		/* From lg */
		/* --margin-section-bottom: var(--space-xxl); */
		/* From xxxl - Matches original override */
		--margin-element-top: var(--space-sm);
		/* From md */
		--margin-footer-separator: var(--space-lg);
		/* From xl */

		--gap-section-items: var(--space-sm);
		/* From md */

		/* From xxl */
		--height-carousel-image: var(--space-xxxl);
		/* From xxxl */
	}

	/* --- Page Specific: Contacts --- */
	#contacts-small-span {
		font-size: var(--text-3xl);
		width: 100%;
	}
	#contacts-grid-container .grid-item span { /* Text size in contacts grid */
		font-size: 13px !important;
	}
	#contacts-grid-container .grid-item span:nth-child(2) { /* Second span in grid item layout */
		float: none;
		display: block;
	}

	/* --- Components: Buttons --- */
	.buttons-container .button .main-part { /* Text size in button main part */
		font-size: 10px;
	}

	/* --- Page Specific: Agency (Agency Block Layout) --- */
	#agency-block .div-table-row-2,
	#agency-block .div-table-row-3 {
		display: block;
		/* Removed margin-bottom override (var(--space-xxl)). */
		/* Handled by --margin-section-bottom redefinition in :root for this breakpoint. */
	}
	#agency-block .div-table-row-2 div { /* Columns in agency block stack */
		width: 100%;
	}
}

/* ==========================================================================
   MAX-WIDTH: 330px (Very Small Mobile Devices)
   ========================================================================== */
@media (max-width: 330px) {

	/* --- Elements: Mobile Menu --- */
	#mobile-menu #copyright-span { /* Hide copyright in very small mobile menu */
		display: none;
	}

	/* --- Elements: Header --- */
	#logo {
		width: 100%;
		text-align: center;
	}

	/* --- Components: Language Buttons --- */
	.lang-translate-button {
		display: none;
	}

	/* --- Page Specific: Contacts --- */
	#contacts-small-span {
		font-size: 25px; /* Specific font size override */
	}
}