/* 1. RESET & FONTS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-orange: #FF8C00;
    --dark-blue: #1D3557;
    --text-gray: #4A4A4A;
    --bg-light: #F9FBFF;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.5;
    font-size: 1.2rem;
    color: var(--text-gray);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 2. TYPOGRAPHY */
h1, h2, h3 {
    color: var(--dark-blue);
    line-height: 1.2;
    margin-bottom: 1.0rem;
    text-align: center;
}
h1 { font-size: 2.4rem; font-weight: 700; }
h2 { font-size: 1.8rem; }
p { margin-bottom: 1.2rem; }

/* Standard link color for the whole site */
a { color: var(--dark-blue); transition: 0.3s; }
a:hover { opacity: 0.8; }

.divider {
    height: 1px;
    border-bottom: 1px solid #ACACAC;
    margin: 18px 0;
}

/* -- IMAGES -- */
.imagestyle {
    padding: 2px;
    border: solid 1px #444;
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;    /* Adds space below the image */
    border-radius: 8px;     /* Optional: Makes it look polished */	
}
.editorial-img {
  float: right;           /* Pushes image to the right */
  width: 350px;           /* Fixed width as requested */
  height: 350px;          /* Fixed height */
  object-fit: cover;      /* Ensures image doesn't stretch/distort */
  margin-left: 25px;      /* Adds breathing room between text and image */
  }

/* -- COLUMNS -- */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.col { flex: 1; min-width: 280px; }
.col-2 { flex: 1 1 calc(50% - 20px); }
.col-3 { flex: 0 0 calc(33.33% - 20px); }
.col-4 { flex: 0 0 calc(25% - 20px); }

.items-center { align-items: center; }
.items-top { align-items: flex-start; }

/* -- BUTTONS -- */
.cta-button-holder { text-align: center; padding: 20px 0px; }
.cta-button-base {
    border-radius: 999px;
    padding: 10px 30px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    font-size: 1.4rem;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);	
    font-weight: 600;
    transition: all 0.25s ease;	
}
.cta-button-base:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.26);
    transform: translateY(-2px);
}
.cta-button-base:active { box-shadow: 0 0px 0px rgba(0,0,0,0.26); border: 1px solid #959191; }
.cta-confidence {
	text-align: center;
	font-size: 0.9rem;
	padding-top: 5px;
}
	
/* -- FOOTER -- */
footer {
    width: 100%;
    background-color: #f4f4f4; 
    border-top: 1px solid #c3c3c3; 
    padding: 50px 15px;
    font-size: 0.9rem;
    text-align: center;
}
footer a { color: #333333; text-decoration: none; font-weight: 600; }
footer a:hover { text-decoration: underline; }
footer p {
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.only-desktop { display: block; }	
.only-mobile { display: none; } 	

/* -- MOBILE OVERRIDES -- */
@media screen and (max-width: 768px) {
    /* 1. FORCE STOP TEXT INFLATION (Crucial for Android) */
    html { 
        font-size: 16px; 
        -webkit-text-size-adjust: 100%; 
        text-size-adjust: 100%;
    }
    
    .row-reverse-mobile { flex-direction: column-reverse; }
    .col, .col-2, .col-3, .col-4 { flex: 0 0 100%; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    /* 2. BASE SIZE (Targeting your TCM Android) */
    /* We set this SMALL so it looks normal on the Android */
    body { 
        font-size: 1.1rem; /* approx 17.6px */
        line-height: 1.5;
        /* This hack sometimes forces Android to stop boosting font size: */
        max-height: 999999px; 
    }

    .cta-button-base { 
        font-size: 1.1rem; 
        padding: 15px 10px; 
        width: 100%; 
        display: block; 
    }

    .only-desktop { display: none !important; }
    .only-mobile { display: block !important; }
}

/* 3. HIGH-RES OVERRIDE (Targeting ONLY iPhone Pro/Max) */
/* This detects screens with ultra-high pixel density (Retina 3x) */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2.9) {
    body { font-size: 1.4rem; } /* Pump it up ONLY for the iPhone */
    .cta-button-base { font-size: 1.4rem; }
    .cta-confidence { font-size: 1.1rem; }			
}
/* MOBILE BEHAVIOR (Screens smaller than 600px) */
@media (max-width: 600px) {
  .editorial-img {
    float: none;          /* Disable wrapping */
    display: block;       /* Treat as a block */
    width: 100%;          /* Make full width */
    height: auto;         /* Auto height to keep aspect ratio */
    margin-left: 0;       /* Remove side margin */
    margin-bottom: 20px;  /* Keep bottom space */
  }
}