/*
 * Magazine subscription widget - fit the uploaded cover to the widget box.
 *
 * The widget box is a fixed 25rem-tall, overflow:hidden flex column
 * (.widgets-area.horizontal .widgets .widget). Every other widget in that row
 * sizes its image from the container - .banner img uses width/height 100% with
 * object-fit, .gardens_of_world.horizontal img uses width:9rem - but
 * .magazine-subscription .main-image img had no constraint at all, so the cover
 * rendered at its intrinsic pixel size.
 *
 * A portrait cover (the current upload is 300x386) is far wider than the ~24%
 * left over beside the 76% .main-sentence, so it wrapped onto its own flex line
 * and pushed the content to ~55rem inside a 25rem box. With
 * justify-content:center + overflow:hidden that clipped ~15rem off the top and
 * the bottom: the green panel and the button disappeared entirely and the
 * "Jardins" masthead was cut off.
 *
 * Fix: size the cover from its container and letterbox it with
 * object-fit:contain, so any upload - portrait, landscape or square - fits
 * without cropping and without disturbing the surrounding layout.
 *
 * Kept out of styles.min.css on purpose: that file is a gulp build artifact
 * (see gulpfile.js -> scssBuild) and hand edits there are lost on the next
 * build. Enqueued from includes/Frontend.php, same pattern as
 * jardins-do-mundo.css.
 */

/* Baseline for the vertical/sidebar and mobile layouts: never let the cover
   overflow its column, whatever the upload's intrinsic width. */
.magazine-subscription .main-image img,
.magazine-subscription .offer_image img {
    max-width: 100%;
    height: auto;
}

/* Vertical (stacked) layout: narrow the cover and centre it under the green
   panel. Applies to .vertical widgets at any width, and to .horizontal ones
   below 767.89px, where the horizontal rules are switched off and the widget
   stacks anyway. */
.magazine-subscription.vertical .main-image {
    width: 60%;
    margin: -3rem auto 5rem;
}

@media screen and (max-width: 767.88px) {
    .magazine-subscription .main-image {
        width: 60%;
        margin: -3rem auto 5rem;
    }
}

@media screen and (min-width: 767.89px) {
    /* Fill the 25rem widget box instead of sitting centred in it, so the flex
       lines distribute over the full height rather than leaving a dead gap
       above the green panel and below the button. */
    .magazine-subscription.horizontal .widget-content {
        height: 100%;
    }

    /* Horizontal layout: the cover shares flex line 1 with the 76% green panel
       (76% + 23% leaves a 1% gap under justify-content:space-between), so only
       the button wraps onto its own line, as the layout intends.

       Height budget inside the 25rem box:
         line 1  cover                     20.0rem
         line 2  button 3.9rem - 1rem      +2.9rem
                                          --------
                                           22.9rem   (2.1rem of slack, enough
                                                      for a longer sentence)

       margin-bottom is reset here because the 5rem in the base rule is spacing
       for the stacked vertical layout; .horizontal only ever zeroed margin-top,
       so the leftover 5rem was adding to flex line 1's height. */
    .magazine-subscription.horizontal .widget-content .main-image {
        width: 23%;
        height: 20rem;
        margin-bottom: 0;
    }

    .magazine-subscription.horizontal .widget-content .main-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Let the button sit closer to the cover instead of overlapping it by a
       full 3rem. Height budget becomes 20rem + 3.9rem - 1rem = 22.9rem, still
       inside the 25rem box. */
    .magazine-subscription.horizontal .widget-content .button {
        margin-top: -1rem;
    }
}

/* Theme breakpoint gap, pre-existing and site-wide: styles.min.css switches the
   root font-size to the mobile scale at max-width:768px (inclusive) but switches
   to the .horizontal layout at min-width:767.89px. Between those two - which
   includes 768px exactly, iPad portrait - the desktop layout runs at the mobile
   rem scale, so 1rem is ~19.7px instead of ~5.3px and every rem in this widget
   is ~3.7x too big for its 25rem box.

   Rather than move a breakpoint the whole site depends on, let this one widget
   size to its content in that band so nothing is clipped. */
@media screen and (min-width: 767.89px) and (max-width: 768px) {
    .widgets-area.horizontal .widgets .widget.magazine-subscription {
        height: auto;
    }

    .magazine-subscription.horizontal .widget-content {
        height: auto;
    }
}