/**
 * आरतीसंध्या — होम पेज रीडिज़ाइन #3 (style3.css)
 * बेंतो quicknav + alternating light/dark image-widget सेक्शन
 * नोट: style.css / style1.css / style2.css से पूरी तरह स्वतंत्र — सभी क्लासेज़ 'as3-' प्रीफ़िक्स के साथ
 */

:root {
    --as3-maroon:       #8A1220;
    --as3-maroon-deep:  #4A0E17;
    --as3-twilight:     #2C1440;
    --as3-twilight-2:   #431A4E;
    --as3-saffron:      #E9871E;
    --as3-marigold:     #F6B93B;
    --as3-brass:        #B8860B;
    --as3-terracotta:   #C15A3C;

    --as3-ink:          #2A1810;
    --as3-ink-soft:     #6B4A3A;
    --as3-ink-faint:    #9C8172;
    --as3-cream:        #FFF3E0;
    --as3-tint:         #FFFAF2;
    --as3-line:         #F0DFC6;
    --as3-white:        #FFFFFF;

    --as3-radius-sm: 12px;
    --as3-radius-md: 18px;
    --as3-radius-lg: 26px;

    --as3-shadow-sm: 0 2px 10px rgba(90, 30, 15, 0.06);
    --as3-shadow-md: 0 14px 32px rgba(90, 30, 15, 0.12);
    --as3-shadow-dark: 0 14px 32px rgba(0, 0, 0, 0.35);

    --as3-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --as3-font-display: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', serif;
    --as3-font-body: 'Noto Sans Devanagari', 'Mukta', sans-serif;
    --as3-font-utility: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}

.as3-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.as3-section { padding: 64px 0; background: var(--as3-white); }
.as3-tint { background: var(--as3-tint); }

/* टाइटल कभी भी बॉक्स की चौड़ाई नहीं बढ़ाएंगे — हमेशा wrap होंगे */
.as3-shell, .as3-hero, .as3-bento-section, .as3-widget, .as3-section, .as3-cta,
h1, h2, h3, h4, p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ================================================
   HERO
================================================ */
.as3-hero { background: var(--as3-white); padding: 64px 0 46px; border-bottom: 1px solid var(--as3-line); }
.as3-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }

.as3-eyebrow {
    display: inline-block; font-family: var(--as3-font-utility); font-size: 13px; font-weight: 600;
    letter-spacing: 0.08em; color: var(--as3-saffron); background: var(--as3-cream);
    padding: 7px 16px; border-radius: 50px; margin-bottom: 18px;
}

.as3-hero-copy h1 { font-family: var(--as3-font-display); font-size: 44px; font-weight: 700; color: var(--as3-maroon); line-height: 1.15; margin-bottom: 16px; }
.as3-hero-copy > p { font-family: var(--as3-font-body); font-size: 16.5px; line-height: 1.75; color: var(--as3-ink-soft); max-width: 540px; margin-bottom: 28px; }

.as3-hero-image {
    border-radius: var(--as3-radius-lg);
    overflow: hidden;
    background: var(--as3-cream); 
    aspect-ratio: 6 / 5;
}
.as3-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.as3-hero-stats { display: flex; gap: 32px; margin-top: 28px; }
.as3-hero-stats div strong { display: block; font-family: var(--as3-font-utility); font-size: 23px; font-weight: 700; color: var(--as3-maroon); }
.as3-hero-stats div span { font-family: var(--as3-font-body); font-size: 14.5px; color: var(--as3-ink-faint); }

/* Search */
.as3-search-wrap { position: relative; max-width: 520px; }
.as3-search-box {
    display: flex; align-items: center; gap: 12px; background: var(--as3-white);
    border: 1.5px solid var(--as3-line); border-radius: 50px; padding: 14px 22px;
    box-shadow: var(--as3-shadow-sm); transition: border-color 0.25s var(--as3-ease);
}
.as3-search-box:focus-within { border-color: var(--as3-saffron); }
.as3-search-box svg { color: var(--as3-saffron); flex-shrink: 0; }
.as3-search-box input {
    border: none;
    outline: none !important;
    background: transparent;
    width: 100%;
    font-family: var(--as3-font-body);
    font-size: 15px;
    color: var(--as3-ink);
}
.as3-search-box input::placeholder { color: var(--as3-ink-faint); }
.as3-search-clear {
    background: var(--as3-cream);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--as3-ink-soft);
    flex-shrink: 0;
    display: none !important;
}
.as3-search-dropdown {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--as3-white);
    border: 1px solid var(--as3-line); border-radius: var(--as3-radius-md); box-shadow: var(--as3-shadow-md);
    padding: 10px; z-index: 50; max-height: 380px; overflow-y: auto;
}
.as3-sd-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--as3-ink); transition: background 0.2s var(--as3-ease); }
.as3-sd-item:hover { background: var(--as3-cream); }
.as3-sd-item-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--as3-cream); border-radius: 8px; font-size: 15px; }
.as3-sd-item-text { display: flex; flex-direction: column; min-width: 0; }
.as3-sd-item-text strong { font-family: var(--as3-font-body); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as3-sd-item-text em { font-style: normal; font-family: var(--as3-font-utility); font-size: 11.5px; color: var(--as3-ink-faint); }
.as3-sd-empty, .as3-sd-loading { text-align: center; padding: 22px 10px; font-family: var(--as3-font-body); font-size: 14px; color: var(--as3-ink-faint); }

/* ================================================
   BENTO QUICK-NAV — एक ही row, 7 बराबर tiles
================================================ */
.as3-bento-section { padding: 50px 0; background: var(--as3-tint); }

.as3-bento-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}

.as3-bento-tile {
    position: relative;
    min-width: 0;
    min-height: 165px;
    border-radius: var(--as3-radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s var(--as3-ease), box-shadow 0.3s var(--as3-ease);
    box-shadow: var(--as3-shadow-sm);
}

.as3-bento-tile:hover { transform: translateY(-5px); box-shadow: var(--as3-shadow-md); }

.as3-bento-tile,
.as3-bento-tile:hover,
.as3-bento-tile:visited,
.as3-bento-tile:focus {
    color: #fff !important;
}

.as3-bento-icon {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    position: relative; z-index: 1;
}

.as3-bento-tile h3,
.as3-bento-tile:hover h3 {
    font-family: var(--as3-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff !important;
    margin: 8px 0 3px;
    width: 100%;
}

.as3-bento-tile p,
.as3-bento-tile:hover p {
    font-family: var(--as3-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.9) !important;
    margin: 0;
    width: 100%;
}

.as3-bento-arrow {
    position: absolute; top: 14px; right: 14px;
    font-family: var(--as3-font-utility); font-size: 10px; font-weight: 600;
    background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 50px; z-index: 1;
    white-space: nowrap;
}

/* अब कोई tile बड़ा या चौड़ा नहीं — सभी 7 एक जैसे आकार के, एक ही row में */
.as3-bento-big, .as3-bento-wide {
    grid-column: span 1;
    grid-row: span 1;
    padding: 18px;
}

/* Tile backgrounds — हर एक की अपनी AI image + theme-रंग का semi-transparent overlay
   ताकि text हमेशा साफ़ पढ़ा जा सके। यहां image path अपडेट कर देना जब images बन जाएं। */
.as3-c1 {
    background-image:
        linear-gradient(160deg, rgba(74,14,23,0.78) 0%, rgba(43,10,15,0.88) 100%),
        url('/assets/images/bento-aarti.png');
}
.as3-c2 {
    background-image:
        linear-gradient(160deg, rgba(233,135,30,0.78) 0%, rgba(150,86,15,0.88) 100%),
        url('/assets/images/bento-chalisa.png');
}
.as3-c3 {
    background-image:
        linear-gradient(160deg, rgba(246,185,59,0.75) 0%, rgba(180,120,20,0.88) 100%),
        url('/assets/images/bento-bhajan.png');
}
.as3-c4 {
    background-image:
        linear-gradient(160deg, rgba(184,134,11,0.78) 0%, rgba(90,60,5,0.88) 100%),
        url('/assets/images/bento-vrat.png');
}
.as3-c5 {
    background-image:
        linear-gradient(160deg, rgba(67,26,78,0.78) 0%, rgba(44,20,64,0.9) 100%),
        url('/assets/images/bento-mantra.png');
}
.as3-c6 {
    background-image:
        linear-gradient(150deg, rgba(193,90,60,0.78) 0%, rgba(90,40,25,0.88) 100%),
        url('/assets/images/bento-bindayak.png');
}
.as3-c7 {
    background-image:
        linear-gradient(150deg, rgba(233,135,30,0.75) 0%, rgba(138,18,32,0.88) 100%),
        url('/assets/images/bento-tirth.png');
}

/* ================================================
   BLOCK HEAD — common
================================================ */
.as3-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.as3-block-head h2 { font-family: var(--as3-font-display); font-size: 25px; font-weight: 700; color: var(--as3-maroon); margin-bottom: 4px; }
.as3-block-head p { font-family: var(--as3-font-body); font-size: 13.5px; color: var(--as3-ink-soft); }

.as3-viewall {
    flex-shrink: 0; font-family: var(--as3-font-utility); font-size: 13px; font-weight: 600;
    color: var(--as3-saffron); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; padding-bottom: 3px; transition: all 0.25s var(--as3-ease);
}
.as3-viewall:hover { color: var(--as3-maroon); border-color: var(--as3-marigold); }

.as3-center-title { text-align: center; font-family: var(--as3-font-display); font-size: 27px; color: var(--as3-maroon); margin-bottom: 32px; }

/* ================================================
   WIDGET ROWS — इमेज + लिस्टिंग (light/dark variants)
================================================ */
.as3-widget { padding: 58px 0; }

.as3-light { background: var(--as3-white); border-top: 1px solid var(--as3-line); }

.as3-widget-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    gap: 44px;
    align-items: center;
    min-width: 0;
}

.as3-widget-content, .as3-widget-media { min-width: 0; }
.as3-reverse { grid-template-columns: 1.35fr 0.85fr; }
.as3-reverse .as3-widget-content { order: 1; }
.as3-reverse .as3-widget-media { order: 2; }

.as3-widget-media {
    position: relative;
    border-radius: var(--as3-radius-lg);
    overflow: hidden;
    background: var(--as3-cream); 
    aspect-ratio: 4 / 5; 
}
.as3-widget-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.as3-media-badge {
    position: absolute; bottom: 16px; left: 16px;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
    padding: 8px 16px; border-radius: 50px; font-family: var(--as3-font-utility);
    font-size: 12.5px; font-weight: 600; color: var(--as3-maroon);
}

/* Card grids */
.as3-cards { display: grid; gap: 15px; }
.as3-cards-3 { grid-template-columns: repeat(3, 1fr); }
.as3-cards-2 { grid-template-columns: repeat(2, 1fr); }

.as3-card {
    background: var(--as3-white); border: 1px solid var(--as3-line); border-radius: var(--as3-radius-md);
    padding: 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px;
    transition: all 0.3s var(--as3-ease);
}
.as3-card:hover { transform: translateY(-5px); box-shadow: var(--as3-shadow-md); border-color: var(--as3-marigold); }

.as3-card-tag {
    align-self: flex-start; font-family: var(--as3-font-utility); font-size: 10.5px; font-weight: 600;
    color: var(--as3-maroon); background: var(--as3-cream); padding: 4px 11px; border-radius: 50px;
}
.as3-card h3 { font-family: var(--as3-font-display); font-size: 16.5px; color: var(--as3-ink); line-height: 1.4; }
.as3-card p { font-family: var(--as3-font-body); font-size: 13px; color: var(--as3-ink-soft); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* List grid (Chalisa) */
.as3-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.as3-list-item {
    display: flex; align-items: center; gap: 13px; background: var(--as3-white);
    border: 1px solid var(--as3-line); border-radius: var(--as3-radius-sm); padding: 14px 15px;
    text-decoration: none; color: inherit; transition: all 0.25s var(--as3-ease);
}
.as3-list-item:hover { border-color: var(--as3-marigold); background: var(--as3-cream); }
.as3-list-icon { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--as3-cream); border-radius: 9px; font-size: 16px; }
.as3-list-item h4 {
    font-family: var(--as3-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--as3-ink);
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
}.as3-list-item p { font-family: var(--as3-font-body); font-size: 12px; color: var(--as3-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================
   DUAL COLUMN — भजन / मंत्र (no image)
================================================ */
.as3-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.as3-dual-col { background: var(--as3-white); border: 1px solid var(--as3-line); border-radius: var(--as3-radius-md); padding: 26px; }
.as3-chip-list { display: flex; flex-direction: column; }
.as3-chip {
    display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-decoration: none; color: var(--as3-ink);
    font-family: var(--as3-font-body); font-size: 14.5px; font-weight: 600;
    border-bottom: 1px dashed var(--as3-line); transition: all 0.25s var(--as3-ease);
}
.as3-chip:last-child { border-bottom: none; }
.as3-chip:hover { color: var(--as3-maroon); padding-left: 14px; }

/* ================================================
   FEATURES
================================================ */
.as3-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.as3-feature-box { background: var(--as3-white); border: 1px solid var(--as3-line); border-radius: var(--as3-radius-md); padding: 26px 20px; text-align: center; }
.as3-feature-icon { width: 52px; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--as3-marigold), var(--as3-saffron)); }
.as3-feature-box h3 { font-family: var(--as3-font-display); font-size: 15.5px; color: var(--as3-maroon); margin-bottom: 5px; }
.as3-feature-box p { font-family: var(--as3-font-body); font-size: 12.5px; color: var(--as3-ink-soft); line-height: 1.6; }

/* ================================================
   CTA
================================================ */
.as3-cta { padding: 58px 0; text-align: center; background: linear-gradient(120deg, var(--as3-maroon) 0%, var(--as3-twilight) 100%); }
.as3-cta h2 { font-family: var(--as3-font-display); font-size: 27px; color: #fff; margin-bottom: 10px; }
.as3-cta p { font-family: var(--as3-font-body); font-size: 14.5px; color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto 24px; }
.as3-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.as3-btn-solid, .as3-btn-ghost { font-family: var(--as3-font-utility); font-weight: 600; font-size: 14px; padding: 13px 28px; border-radius: 50px; text-decoration: none; transition: transform 0.3s var(--as3-ease); }
.as3-btn-solid { background: var(--as3-marigold); color: var(--as3-maroon-deep); }
.as3-btn-ghost { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; }
.as3-btn-solid:hover, .as3-btn-ghost:hover { transform: translateY(-3px); color: inherit; }

a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--as3-saffron); outline-offset: 2px; }

/* ================================================
   RESPONSIVE — exact 5-tier breakpoints
================================================ */

/* ---------- Desktop (1280px – 1400px) ---------- */
@media (min-width: 1280px) and (max-width: 1400px) {
    .as3-container { max-width: 1200px; }
}

/* ---------- Small desktop / large tablet (1024px – 1280px) ---------- */
@media (max-width: 1280px) and (min-width: 1024px) {
    .as3-bento-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .as3-bento-tile { min-height: 150px; }

    .as3-widget-grid { grid-template-columns: 1fr 1fr; gap: 30px; }

    .as3-cards-3, .as3-cards-2 { grid-template-columns: repeat(2, 1fr); }
    .as3-list-grid { grid-template-columns: repeat(2, 1fr); }
    .as3-features { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet (768px – 1024px) ---------- */
@media (max-width: 1024px) and (min-width: 768px) {
    .as3-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .as3-hero-image { order: -1; aspect-ratio: 16/9; }

    .as3-bento-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .as3-bento-tile { min-height: 140px; }

    .as3-widget-grid, .as3-reverse { grid-template-columns: 1fr; gap: 26px; }
    .as3-widget-content { order: 1; }
    .as3-widget-media    { order: 2; aspect-ratio: 16/9; }

    .as3-cards-3, .as3-cards-2 { grid-template-columns: repeat(2, 1fr); }
    .as3-list-grid { grid-template-columns: repeat(2, 1fr); }
    .as3-features { grid-template-columns: repeat(2, 1fr); }
    .as3-dual { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile (up to 767px) ---------- */
@media (max-width: 767px) {
    .as3-container { padding: 0 16px; }

    .as3-hero-grid { grid-template-columns: 1fr; gap: 26px; }
    .as3-hero-image { order: -1; aspect-ratio: 16/9; }
    .as3-hero-copy h1 { font-size: 30px; }

    .as3-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .as3-bento-tile { min-height: 130px; padding: 14px; }
    .as3-bento-icon { font-size: 20px; }
    .as3-bento-tile h3 { font-size: 13.5px; }
    .as3-bento-tile p { font-size: 10.5px; }

    .as3-widget-grid, .as3-reverse { grid-template-columns: 1fr; gap: 20px; }
    .as3-widget-content { order: 1; }
    .as3-widget-media {
        order: 2;
        aspect-ratio: 1 / 1;
    }

    /* कार्ड्स — मोबाइल पर भी 2 प्रति row, हर जगह same padding */
    .as3-cards-3, .as3-cards-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .as3-list-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .as3-features { grid-template-columns: repeat(2, 1fr); }
    .as3-dual { grid-template-columns: 1fr; }

    .as3-card { padding: 16px; }
    .as3-card h3 { font-size: 15px; }
    .as3-card p { font-size: 12.5px; -webkit-line-clamp: 2; }
    .as3-card-tag { font-size: 10px; padding: 3px 9px; }

    .as3-list-item { padding: 12px; gap: 10px; }
    .as3-list-icon { width: 34px; height: 34px; font-size: 14px; }
    .as3-list-item h4 { font-size: 13px; }
    .as3-list-item p { font-size: 11px; }

    .as3-block-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Very small phones (up to 280px) ---------- */
@media (max-width: 280px) {
    .as3-container { padding: 0 10px; }

    .as3-hero-copy h1 { font-size: 22px; }
    .as3-hero-copy > p { font-size: 13px; }
    .as3-search-box { padding: 10px 14px; }

    .as3-bento-grid { grid-template-columns: 1fr; gap: 8px; }
    .as3-bento-tile { min-height: 100px; padding: 12px; }

    .as3-cards-3, .as3-cards-2 { grid-template-columns: 1fr; }
    .as3-list-grid { grid-template-columns: 1fr; }
    .as3-features { grid-template-columns: 1fr; }

    .as3-block-head h2 { font-size: 20px; }
    .as3-cta h2 { font-size: 20px; }
}