/* ===========================================================================
   53 - The special-event card, on a desktop only.

   Why this file exists
   --------------------
   The owner, looking at the calendar on a desktop, said the event cards "take
   up an incredible amount of space" and asked for one that is "about two tiles
   in height" - still obviously bigger and more important than an ordinary
   class, but not the four-and-a-bit it had become.

   Measured on the live page (week of 6 Oct 2026, 1440px viewport, the card
   column is 1048px wide at every desktop size):

       ordinary class card   196px
       event card BEFORE     843px   = 4.30 class tiles
       event card AFTER      392px   = 2.00 class tiles

   How the height was lost
   -----------------------
   52-calendar-skin.css stacks the event card in one column - photograph on
   top at its own full width, words underneath - with the picture allowed to
   run to 620px. At 1048px wide a 4:3 photograph is ~830px tall on its own.

   This file turns the card on its side for desktop: the photograph takes the
   left 48% of the card and the words sit beside it. Nothing is removed. The
   "Event" kicker, the title link, the date range, the teacher, the short
   description, the price and the "See this event" button are all still there,
   just rearranged. That also makes the event card the only LANDSCAPE card in
   the feed, which is what makes it read as special rather than merely large.

   The photograph is still never cropped
   -------------------------------------
   52-calendar-skin.css carries a long note explaining that event photographs
   are group shots and any fixed crop decapitates somebody, so they are drawn
   with object-fit: contain. That promise is kept here: contain stays, and the
   picture is fitted inside the new box rather than cut to fill it. The nine
   event photographs on the site run between 1.26:1 and 1.5:1, and the box is
   503x392 (1.28:1), so in practice they fill it almost exactly; a squarer or
   wider one simply sits on the card's own dark green with a little space at
   the sides or top, which reads as a mount, not as a mistake.

   Desktop only
   ------------
   Everything here is inside @media (min-width: 900px). Below that the phone
   layout in 52-calendar-skin.css is untouched - measured identical before and
   after at 375px (event 515px, class 416px, both runs).

   Cascade
   -------
   Overlay CSS loads in filename order, so order IS cascade order. Of the 34
   files in assets/css/overhaul, only 52-calendar-skin.css writes any
   .rhcl-card rule at all; 40-classes.css, 41-classes-touch.css,
   42-classes-called-off.css, 43-life-drawing.css, 57-needlework-appointment.css
   and 80-links.css touch other rhcl- classes but never .rhcl-card. 53 sorts
   after 52 and nothing after it competes, so these rules land.
   =========================================================================== */

@media (min-width: 900px) {

  /* The card becomes two columns: picture, then words. The words column is
     itself two rows - the description block, and the price + button row
     pinned to the bottom edge - so the action always sits on the card's
     baseline however short the title is.

     :has(.rhcl-card-art) mirrors 52's own guard. An event with no photograph
     is a different shape entirely (it is already only 168px tall there) and
     is deliberately left alone. */
  .rhc-classes .rhcl-cards .rhcl-card--event:has(.rhcl-card-art) {
    height: 392px;              /* exactly two 196px class tiles */
    overflow: hidden;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  /* The picture spans both rows, so it runs the full height of the card and
     the card has a single clean edge down its middle.

     max-height must be reset: 52 caps it at 620px, which in a 392px box is
     harmless but misleading, and min-height: 150px from the base .rhcl-card-art
     rule would fight a short contained image. */
  .rhc-classes .rhcl-cards .rhcl-card--event:has(.rhcl-card-art) .rhcl-card-art {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  /* 52 shifts every SECOND card's picture down with
     .rhcl-cards .rhcl-card:nth-child(even) .rhcl-card-art { object-position:
     center 62% }, so two classes from the same studio on the same day show
     different parts of the same watercolor. That selector carries five
     classes and outranks 52's own three-class event rule, so an event that
     fell in an even slot would have its contained photograph pushed
     off-centre inside the card. All nine of today's event cards happen to sit
     first in their day, so it never fires right now - this is insurance for
     the day an event is listed under a class. Event photographs are
     one-per-event; they never need the trick. */
  .rhc-classes .rhcl-cards .rhcl-card--event:nth-child(even) .rhcl-card-art {
    object-position: center;
  }

  /* The words are centred against the picture rather than pinned to the top,
     which is what stops the block looking like it has slid to one end of a
     tall card. */
  .rhc-classes .rhcl-cards .rhcl-card--event:has(.rhcl-card-art) .rhcl-card-body {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 22px 28px 6px;
  }

  /* Three lines of description instead of two. The horizontal card has room
     for it, and filling that room with the event's own words is better than
     filling it with empty green. Worst case measures ~225px inside a 322px
     row, so it cannot push the action out of the card. */
  .rhc-classes .rhcl-cards .rhcl-card--event:has(.rhcl-card-art) .rhcl-card-lede {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .rhc-classes .rhcl-cards .rhcl-card--event:has(.rhcl-card-art) .rhcl-card-act {
    grid-column: 2;
    grid-row: 2;
    padding: 0 28px 24px;
  }
}