/*
 * MindMonks — booking form production fixes
 *
 * Narrowly scoped corrections for the MindMonks Booking plugin's front end.
 * They live here rather than in the theme or the booking plugin so both of
 * those stay byte-identical to the approved local build and can be re-uploaded
 * without losing anything.
 *
 * Each rule states the defect it corrects. Nothing here changes the design.
 */

/* --------------------------------------------------------------------------
   Date picker: seven columns could not fit a phone

   .mm-cal__grid uses `grid-template-columns: repeat(7, 1fr)`, which is correct.
   But .mm-cal__day sets `aspect-ratio: 1` together with `min-height: 44px`,
   and a grid item's automatic minimum size then resolves to 44px of WIDTH too.
   That forces the seven 1fr tracks to at least 7 x 44px + 6 x 3px = 326px,
   while the form panel is only ~254px wide at a 320px viewport and ~292px at
   360px. The grid overflowed its own container and the last column was pushed
   past the viewport, where `body { overflow-x: hidden }` clipped it — so those
   dates were invisible and unclickable rather than reflowed.

   Allowing the cells to shrink lets the 1fr tracks do their job. Where there is
   room nothing changes, because 1fr is already wider than 44px. min-height is
   deliberately left alone, so the touch target stays 44px tall on every screen.
   -------------------------------------------------------------------------- */

.mm-cal__day,
.mm-cal__blank {
	min-width: 0;
}

/* `aspect-ratio: 1` together with `min-height: 44px` keeps forcing the box to
   44px wide even after the 1fr track has shrunk below that, so the cell spills
   over its own track (about 1px at 414px, far more on smaller screens). The
   aspect ratio is decorative here: min-height already guarantees the 44px
   touch target, and the track already governs the width. Dropping it lets the
   cell match its track at every width. The calendar is capped at 22rem, so on
   wide screens the track is ~44px anyway and nothing visibly changes. */
.mm-cal__day {
	aspect-ratio: auto;
}

/* --------------------------------------------------------------------------
   Service cards: ~190px of empty space inside every card on phones

   The wide service option is laid out as:

     .mm-option--wide .mm-option__body { flex-direction: row; flex-wrap: wrap;
                                         justify-content: space-between; }
     .mm-option__main                  { flex: 1 1 12rem; }

   At <= 26.25em the theme flips the body to `flex-direction: column` but leaves
   `flex-wrap: wrap` and `justify-content: space-between` in place, and leaves
   .mm-option__main at `flex: 1 1 12rem`. In a column container the main axis is
   vertical, so that 12rem basis becomes a 192px HEIGHT, and space-between then
   pushes the price to the far end of it. Each card inflated to ~277px with a
   large void between the title and the price.

   Resetting the three row-oriented properties lets the card collapse to its
   own content height. The stacked, left-aligned mobile layout the theme asked
   for is unchanged — this only removes the empty space.
   -------------------------------------------------------------------------- */

@media (max-width: 26.25em) {
	.mm-option--wide .mm-option__body {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.mm-option--wide .mm-option__main {
		flex: 0 1 auto;
	}
}