/* =====================================================================
   Manika — TABLET layer (hatchery-manika child theme)
   Band: 641–960px (portrait tablet 768, landscape ~900, small laptop ≤960).
   This sheet loads AFTER style.css, concept.css and mobile.css, so on equal
   specificity a plain-class rule here wins by source order — no !important
   needed except where we must beat style.css's own !important declarations.

   Why a separate file from mobile.css: mobile.css is the phone layer
   (canonical max-width:640). Tablet has the opposite intent — sections may
   stack but must NOT collapse to content width, two-column grids should
   breathe, and the fixed bottom chrome has more room. The ranges don't
   overlap (≤640 vs 641–960), so load order between the two is irrelevant.
   ===================================================================== */

/* ---------- 1. Section collapse at ≤960 ----------
   style.css:2207 forces EVERY `.mk-section` to `flex-direction:column !important`
   at max-width:960. Stacking is intended, but that block never sets
   `align-items`, so the base `.mk-section{align-items:flex-start}` still applies.
   In a COLUMN that makes .mk-section-text/.mk-section-media shrink to their
   CONTENT width (measured: text 123px, media 52px, gallery tiles crushed to
   ~19px on a 768px tablet). Fix: stretch the cross-axis so the stacked children
   fill the width. The handful of genuinely center-stacked concepts keep their
   own align-items (re-asserted after the blanket stretch). No new behaviour is
   introduced above 960 (desktop rows are unaffected — align-items:flex-start is
   correct there because the cross axis is vertical). */
@media (max-width: 960px) {
    .mk-section { align-items: stretch; }

    /* intentionally centered / fixed-ratio stacks — preserve their centering */
    .mk-section--stacked,
    .mk-section--thali,
    .mk-section--hukamnama,
    .mk-section--darbar-invite,
    .mk-section--sevadar-board,
    .mk-section--social,
    .mk-section--discography {
        align-items: center;
    }
}