/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 402px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

/* tablet size */
@media (max-width: 1024px) {
    .container-padding-x {
        padding-left: var(--container-padding-x-tablet);
        padding-right: var(--container-padding-x-tablet);
    }

    .container-padding-y {
        padding-top: var(--container-padding-y-tablet);
        padding-bottom: var(--container-padding-y-tablet);
    }
}

/* mobile size */
@media (max-width: 768px) {
    .desktop-show {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    }

    .container-padding-x {
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }

    .container-padding-y {
        padding-top: var(--container-padding-y-mobile);
        padding-bottom: var(--container-padding-y-mobile);
    }

    .container-padding-bottom {
        padding-bottom: var(--container-padding-y-mobile);
    }

    .container-padding-top {
        padding-top: var(--container-padding-y-mobile);
    }

    .container-padding-y-header {
        padding-left: var(--header-padding-y-mobile);
        padding-right: var(--header-padding-y-mobile);
    }

    .container-padding-x-header {
        padding-top: var(--header-padding-x-mobile);
        padding-bottom: var(--header-padding-x-mobile);
    }

    .container-padding-x-md {
        padding-left: var(--container-padding-x-md-mobile);
        padding-right: var(--container-padding-x-md-mobile);
    }

    .container-padding-y-md {
        padding-top: var(--container-padding-y-md-mobile);
        padding-bottom: var(--container-padding-y-md-mobile);
    }

    p {
        line-height: var(--text_line_height_fixed_xs_special);
        margin-bottom: 0px;
        font-size: var(--text_font_size_xs_special);
        font-weight: var(--text_font_weight_normal);
    }

    .mobile-menu-icon-wrap .mobile-menu-icon {
        width: 16px;
        height: 16px;
    }

    .mobile-menu-column-open {
        display: block;
    }

    .header-container {
        flex-direction: column;
    }

    .header-nav-list {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .header-nav-link {
        font-size: var(--font-size-lg);
    }

    .header-nav-item {
        padding: var(--space-sm) 0px;
    }

    .why-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .why-testimonial-col--left {
        padding-right: 0;
    }

    .why-testimonial-col--right {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--color-gray-100);
        padding-top: var(--space-3xl);
        margin-top: var(--space-3xl);
    }

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

    .follow-insta-grid.d-grid {
        grid-template-columns: 1fr;
    }

    .services-strip.d-grid {
        grid-template-columns: 1fr;
    }

    .services-strip>.d-flex+.d-flex {
        border-left: none;
        border-top: 1px solid var(--color-gray-100);
        padding-top: var(--space-xl);
        margin-top: var(--space-xl);
    }

    .home-stats-section {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .home-stats-row.equal-cols {
        flex-direction: column;
        align-items: center;
    }

    .home-stats-row.equal-cols>* {
        flex: 0 1 auto;
    }

    .footer-inner {
        padding-top: calc(var(--footer-padding-top) * 0.65);
    }

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

    .footer-legal.d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom.d-flex {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .properties-worth-wrap.d-grid {
        grid-template-columns: 1fr;
    }

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

    .reviews-cards.d-flex {
        flex-direction: column;
    }

    .reviews-cards.equal-cols>* {
        flex: 0 1 auto;
    }

    .featured-properties-grid.d-grid {
        grid-template-columns: 1fr;
    }

    .follow-journey-row.d-flex {
        flex-direction: column;
    }

    .follow-journey-row.equal-cols>* {
        flex: 0 1 auto;
    }

    .cta-actions.d-flex {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn-cta-primary,
    .cta-actions .btn-cta-primary-bordered {
        width: 100%;
    }

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

    .home-banner-button-wrap {
        flex-direction: column;
    }

    .home-hero-title {
        font-size: var(--font-size-2xl);
    }

    .home-hero-subtitle {
        font-size: var(--font-size-md);
    }

    .home-stats-wrap {
        flex-direction: column;
    }

    .home-stats-item {
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .philosophy-title {
        font-size: var(--font-size-2xl);
    }

    .property-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 32px;
    }

    .property-card-image img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .services-intro-heading span:first-child {
        font-weight: var(--font-weight-normal);
    }

    .team-title-heading {
        font-size: var(--font-size-2xl);
    }

    .team-title-content {
        font-size: var(--font-size-base);
    }

    .property-service-title-wrap {
        max-width: 360px;
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size-2xl);
    }

    .property-service {
        flex-direction: column;
    }

    .feature-detail {
        flex-direction: column;
    }

    .section-subtitle {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-normal);
        line-height: 20px;
        letter-spacing: 4.2px;
        text-transform: uppercase;
    }
    .property-services-philosophy-wrapper{
        flex-direction: column;
    }
    .page-register{
        flex-direction: column;
    }
    .management-pathway{
        flex-direction: column;
    }
    .letting-service{
        flex-direction: column;
    }
    .property-services-philosophy-wrapper{
        flex-direction: column;
    }
    
}

/* small mobile */
@media (max-width: 480px) {}