/* ============================================================
 *  AffLife Coupon Theme — 10 structural LAYOUTS (v1.7.0)
 *  Pair any layout with any of the 30 presets in presets.css
 *  to get 300 distinct visual designs.
 *  Activated by body class "afflife-layout-XX".
 * ============================================================ */

/* =========================
 * 01 - Classic (default)
 *   Centered gradient hero, 4 store grids, 4-column coupon cards.
 *   No overrides — base style.css is the layout-01 baseline.
 * ========================= */

/* =========================
 * 02 - Hero Reversed
 *   Hero content shifted LEFT, search bar floats left, logo right
 *   in the header, sections feel right-anchored.
 * ========================= */
body.afflife-layout-02 .header-inner { flex-direction: row-reverse; }
body.afflife-layout-02 .site-nav { margin-left: 0; margin-right: auto; }
body.afflife-layout-02 .hero { text-align: left; }
body.afflife-layout-02 .hero .container { display: flex; flex-direction: column; align-items: flex-start; }
body.afflife-layout-02 .hero h1, body.afflife-layout-02 .hero p { text-align: left; max-width: 720px; }
body.afflife-layout-02 .hero-search { margin: 0; }
body.afflife-layout-02 .section h2 { text-align: left; }
body.afflife-layout-02 .section-subtitle { text-align: left; }

/* =========================
 * 03 - No Hero
 *   Drops the big hero entirely. Search-only banner at the top.
 *   Sections start immediately.
 * ========================= */
body.afflife-layout-03 .hero { padding: 18px 0; background: var(--card-bg); color: var(--heading); border-bottom: 1px solid #e5e7eb; }
body.afflife-layout-03 .hero h1 { display: none; }
body.afflife-layout-03 .hero p { display: none; }
body.afflife-layout-03 .hero .container { padding: 0 16px; }
body.afflife-layout-03 .hero-search { max-width: 600px; margin: 0 auto; }
body.afflife-layout-03 .hero-search input { border: 1px solid #d1d5db; }
body.afflife-layout-03 .hero-search button { background: var(--primary); color: #fff; }

/* =========================
 * 04 - Tall Bold Hero (cinematic)
 *   Huge hero, bigger font, centered single column.
 * ========================= */
body.afflife-layout-04 .hero { padding: 140px 0 110px; }
body.afflife-layout-04 .hero h1 { font-size: 3.6rem; margin-bottom: 24px; }
body.afflife-layout-04 .hero p { font-size: 1.25rem; max-width: 820px; }
body.afflife-layout-04 .hero-search { max-width: 620px; }
body.afflife-layout-04 .hero-search input { padding: 16px 22px; font-size: 18px; }
body.afflife-layout-04 .hero-search button { padding: 16px 32px; font-size: 18px; }
@media (max-width:540px) {
    body.afflife-layout-04 .hero { padding: 80px 0 60px; }
    body.afflife-layout-04 .hero h1 { font-size: 2.2rem; }
}

/* =========================
 * 05 - Narrow Column (Medium-style)
 *   Everything inside an 820px column. Single-column store grid.
 * ========================= */
body.afflife-layout-05 { --container-max: 820px; }
body.afflife-layout-05 .container { max-width: 820px; }
body.afflife-layout-05 .store-grid { grid-template-columns: repeat(3, 1fr); }
body.afflife-layout-05 .coupon-card { grid-template-columns: 110px 1fr 140px; grid-template-areas: "logo body action"; }
body.afflife-layout-05 .coupon-card .coupon-offer-big { display: none; }
body.afflife-layout-05 .hero { padding: 48px 0; }
@media (max-width:640px) {
    body.afflife-layout-05 .store-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================
 * 06 - Wide Layout (1400px)
 *   Wider container, 7-column store grid, more content per row.
 * ========================= */
body.afflife-layout-06 { --container-max: 1400px; }
body.afflife-layout-06 .container { max-width: 1400px; }
body.afflife-layout-06 .store-grid { grid-template-columns: repeat(7, 1fr); }
body.afflife-layout-06 .coupon-card { grid-template-columns: 160px 220px 1fr 200px; }
@media (max-width:1180px) {
    body.afflife-layout-06 .store-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width:860px) {
    body.afflife-layout-06 .store-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================
 * 07 - Compact / Dense
 *   Smaller paddings, denser store grid (8 columns), more content per screen.
 * ========================= */
body.afflife-layout-07 .hero { padding: 32px 0; }
body.afflife-layout-07 .hero h1 { font-size: 1.8rem; margin-bottom: 8px; }
body.afflife-layout-07 .hero p { font-size: 0.95rem; margin-bottom: 14px; }
body.afflife-layout-07 .section { padding: 16px 14px; margin: 14px 0; }
body.afflife-layout-07 .section h2 { font-size: 1.15rem; }
body.afflife-layout-07 .section-subtitle { display: none; }
body.afflife-layout-07 .store-grid { grid-template-columns: repeat(8, 1fr); gap: 8px; }
body.afflife-layout-07 .store-card { min-height: 96px; padding: 10px 6px; }
body.afflife-layout-07 .store-card-logo { height: 48px; }
body.afflife-layout-07 .store-card-logo img { max-height: 44px; }
body.afflife-layout-07 .store-card-name { font-size: 10px; }
body.afflife-layout-07 .coupon-card { padding: 14px; }
body.afflife-layout-07 .coupon-title { font-size: 1rem; }
body.afflife-layout-07 .coupon-desc { font-size: 0.85rem; }
@media (max-width:1024px) { body.afflife-layout-07 .store-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width:640px)  { body.afflife-layout-07 .store-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:420px)  { body.afflife-layout-07 .store-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================
 * 08 - Bordered Sections
 *   Sections have prominent borders + white-ish bg for clean separation.
 *   No background tint, just lines.
 * ========================= */
body.afflife-layout-08 { --section-bg: transparent; }
body.afflife-layout-08 .section { background: var(--card-bg); border: 2px solid var(--primary); padding: 28px 24px; }
body.afflife-layout-08 .section h2 { border-bottom: 2px solid var(--primary); padding-bottom: 8px; display: inline-block; margin: 0 auto 20px; }
body.afflife-layout-08 .coupon-card { border: 2px solid var(--primary); box-shadow: none; }
body.afflife-layout-08 .store-card { border: 2px solid var(--primary); box-shadow: none; }
body.afflife-layout-08 .page-article { border: 2px solid var(--primary); box-shadow: none; }

/* =========================
 * 09 - Store List View
 *   Store grid becomes a SINGLE-column list of horizontal cards.
 *   Each card is a row with logo on left, name + description.
 * ========================= */
body.afflife-layout-09 .store-grid { grid-template-columns: 1fr; gap: 10px; }
body.afflife-layout-09 .store-card { flex-direction: row; min-height: auto; padding: 14px 18px; text-align: left; align-items: center; justify-content: flex-start; gap: 18px; }
body.afflife-layout-09 .store-card-logo { height: 48px; width: 96px; flex: 0 0 96px; }
body.afflife-layout-09 .store-card-logo img { max-height: 44px; }
body.afflife-layout-09 .store-card-name { font-size: 1rem; margin: 0; color: var(--heading); font-weight: 600; }

/* =========================
 * 10 - Magazine Grid (asymmetric)
 *   Homepage sections use a 2-column irregular grid.
 *   Trending Coupons section spans full width; others sit in 2-col.
 * ========================= */
body.afflife-layout-10 .hero { text-align: left; padding: 64px 0; }
body.afflife-layout-10 .hero .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
body.afflife-layout-10 .hero h1 { text-align: left; }
body.afflife-layout-10 .hero p { text-align: left; max-width: none; }
body.afflife-layout-10 .hero-search { margin: 0; max-width: none; flex-direction: column; gap: 12px; }
body.afflife-layout-10 .hero-search button { width: 100%; }
@media (max-width:820px) {
    body.afflife-layout-10 .hero .container { grid-template-columns: 1fr; }
}
body.afflife-layout-10 .section h2 { text-align: left; font-size: 1.6rem; border-bottom: 2px solid var(--primary); padding-bottom: 6px; }
body.afflife-layout-10 .section-subtitle { text-align: left; }
body.afflife-layout-10 .store-grid { grid-template-columns: repeat(4, 1fr); }
body.afflife-layout-10 .coupon-card { border-left: 4px solid var(--primary); }
@media (max-width:860px) { body.afflife-layout-10 .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:540px) { body.afflife-layout-10 .store-grid { grid-template-columns: repeat(2, 1fr); } }