/* MOBILE-STYLES.CSS
    Stylesheet for mobile browsers (768px and narrower)
    This overrides styles.css to ensure the layout is responsive.
*/

/* --- Global Mobile Adjustments --- */
body {
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem; /* Smaller h1 for mobile */
}

h2 {
    font-size: 2rem; /* Smaller h2 for mobile */
}

h3 {
    font-size: 1.3rem;
}

p {
    font-size: 1rem; /* Slightly smaller base text */
}

/* --- Layout --- */
.container {
    padding: 0.5rem; /* Reduce padding for smaller screens */
}

section, header, footer {
    padding: 2rem 1rem; /* Reduce horizontal padding */
    margin-bottom: 1rem;
}

/* --- Hero & Header --- */
.hero .subtitle {
    font-size: 1.15rem;
}

.stats {
    flex-direction: column; /* Stack stats vertically */
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-item {
    border-left: none;
    border-right: none;
    border-top: 3px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    padding: 1rem;
}

.stat-item strong {
    font-size: 2rem;
}

/* --- Pricing Section --- */
.pricing {
    flex-direction: column; /* Stack pricing tiers vertically */
    gap: 1.5rem;
    align-items: center; /* Center tiers */
}

.tier {
    flex: none; /* Reset flex property */
    width: 100%; /* Make tiers full-width */
    max-width: 400px; /* Limit max-width */
    padding: 1.5rem;
}

.tier.premium {
    transform: scale(1); /* Don't scale up on mobile, save space */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.2); /* Keep glow */
}

.tier:hover {
    transform: none; /* Disable hover transform */
}

.tier-header {
    min-height: auto; /* Remove min-height */
}

.tier-price {
    font-size: 3rem;
}

.tier-desc {
    min-height: auto; /* Remove min-height */
}

.btn-large {
    font-size: 1.1rem; /* Scale down large button */
    padding: 1rem 2rem;
}

/* --- Comparison Table --- */
.table-container {
    padding: 0.5rem;
}

/* This is a common pattern for responsive tables. 
    We hide the header and use data-labels to show headers 
    for each cell, stacking them.
*/

table {
    border: 0;
    box-shadow: none;
}

table thead {
    /* Hide the table header */
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

table tr {
    display: block;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden; /* To contain floated cells */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

table td {
    display: block;
    text-align: right; /* Align value to the right */
    padding-left: 50%; /* Make space for the label */
    position: relative;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

table td:last-child {
    border-bottom: none;
}

table td:first-child {
    text-align: right; /* Override text-align left from desktop */
    font-weight: 600;
    color: var(--text-color);
    background-color: #2a2a2a; /* Give first cell a header-like feel */
}

/* Use data-label attributes (which we should add to the HTML, but can do with CSS) */
/* This is a pure CSS way to do it without changing HTML */
table td:nth-of-type(1):before { content: "Feature"; }
table td:nth-of-type(2):before { content: "Standard Access ($7.99)"; }
table td:nth-of-type(3):before { content: "Premium Access ($24.99)"; }

table td::before {
    /* This creates the "header" label for each cell */
    content: attr(data-label); /* We'll use the :nth-of-type selectors for now */
    position: absolute;
    left: 1rem;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: 700;
    color: var(--text-color);
}

/* --- Footer --- */
footer {
    padding: 1rem;
}

footer .disclaimer {
    padding-top: 1rem;
}