/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.8
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* H1 tags were added across the site for SEO/accessibility on 2026-10-13
   (previously every page's main title was an H2, which has no semantic H1
   at all). Promoting those titles from H2 to H1 made them render larger,
   because Elementor's global kit styles the two tags differently:

     .elementor-kit-6 h1 { font-size: 40px }   <- what they became
     .elementor-kit-6 h2 { font-size: 28px }   <- what they were

   (28px is the global "Secondary" typography size, exposed as the CSS
   variable --e-global-typography-secondary-font-size.)

   A previous attempt at this fix used a bare `h1 { font-size: 1.5em }`.
   That never had any effect: a bare element selector (0,0,1) loses to
   Elementor's `.elementor-kit-6 h1` (0,1,1) on specificity. The comment
   accompanying it was also wrong - it claimed neither tag had an explicit
   font-size, when the kit sets both explicitly.

   Matching the kit's own selector + `body` (0,2,1) beats it reliably,
   regardless of stylesheet load order. Using the variable rather than a
   hardcoded 28px means this keeps tracking the H2 size if the global
   typography is ever changed in Elementor.

   `text-transform` is the other half of the same regression: the kit's H1
   rule also sets `uppercase`, which its H2 rule does not. So the promotion
   turned "Esta semana" into "ESTA SEMANA", "Conócenos" into "CONÓCENOS" and
   so on across every page. Resetting it to `none` restores the written case
   the titles had as H2s.

   Not reset here: `font-weight`. These titles compute to 800, but that comes
   from a per-widget Elementor setting that applied just as much when they
   were H2s - it is not part of the regression, so it is left alone. */
body.elementor-kit-6 h1 {
    font-size: var(--e-global-typography-secondary-font-size, 28px);
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Loop-template rules that exist on pre-production but are missing from the
   local database. Investigated 2026-10-14.

   The `limit-text` class is applied to the synopsis widget in three loop
   templates, but the rule that gives that class any meaning was stored in
   Elementor 4's per-element atomic style on the parent container - not in
   post_content, and not anywhere a revision captures. Pre-production's
   generated CSS has it; the local database does not, in any of the 20
   revisions of each template going back to June 2026. Both sides even share
   the same newest revision ID (1685 for template 1119), so the revision
   history migrated intact and the style did not: the All-in-One WP Migration
   export carried the markup and the class but dropped the rule.

   Symptom locally: cartelera cards are locked to height 340px while the
   synopsis is free to grow. "El precio de la red" (873-character synopsis,
   234px tall) pushed the Comprar entradas / Ver mas row to top 398px - 94px
   past the bottom of its own card and over the next one. 2 of 7 cards
   overflowed; short synopses fit and looked fine, which is why it reads as
   random overlapping rather than a layout fault.

   Keeping these here rather than re-entering them in Elementor means they
   survive the next database import and are visible in the codebase instead of
   buried in a per-element style blob.

   The `body` prefix is not cosmetic. Elementor prints the loop CSS inline as
   <style id="loop-1119"> in the BODY (offset ~59300 in the cartelera HTML),
   long after this stylesheet has loaded in the head (~24500), so a rule of
   equal specificity would lose on source order. `body` raises these to
   (0,2,1) and wins regardless of order - the same reasoning as the h1 fix
   above.

   The line counts differ per template on purpose; these mirror pre-production
   exactly. Template 1172 has no clamp there, only a margin reset, so that is
   all it gets here.
   --------------------------------------------------------------------------- */

/* "Carrusel esta semana" (template 848) - homepage carousel. */
body .elementor-848 .limit-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* "cartelera test" (template 1119) - synopsis display.
   Festival cards store the synopsis as 5 separate <p> elements each prefixed
   "Sinopsis." in the CMS. Showing them all causes the next paragraph's header
   to peek in at the bottom of the card when the first paragraph ends just shy
   of the container boundary. Only the first <p> is shown; it fills however many
   lines its content needs. overflow:hidden on the container clips if it overflows.
   Film cards have a single <p>, so hiding :not(:first-child) has no effect there. */
body .elementor-1119 .limit-text {
    overflow: hidden;
    white-space: normal;
}
body .elementor-1119 .limit-text > p:not(:first-child) {
    display: none !important;
}

/* "test proximos estrenos" (template 1172) - margin reset only, no clamp. */
body .elementor-1172 .limit-text p {
    overflow: hidden;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Cartelera poster column: constrain the width as well as the height.

   Unlike the clamp above, this is NOT a local-only regression - it behaves the
   same on pre-production, it is just invisible there while the cartelera holds
   a single film.

   The poster already carries `height: 340px` and `object-fit: cover`, but the
   image widget itself is `width: auto` inside a row flex container, so it
   shrink-to-fits the poster's own aspect ratio. The `width: 100%` on the <img>
   then resolves against that shrink-to-fit width, which means object-fit never
   has a fixed box to crop into and every card's poster ends up a different
   width:

       458x655 -> 238px      462x577 -> 272px
       462x616 -> 255px      442x655 -> 229px

   Pinning the widget to 238px gives object-fit: cover a fixed box, so every
   poster occupies the same column. 238 = 340 x 0.70, the poster ratio
   documented in the 2026-10-14 CHANGELOG entry and the one most of the
   existing carteles already use - so correctly proportioned posters are
   unchanged and only the odd-shaped ones get trimmed.

   From 768px up only: below that the card switches to `flex-direction: column`
   and the poster is meant to span the full width of the card.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .elementor-1119 .elementor-element.elementor-element-34919df {
        width: 238px;
        max-width: 238px;
    }
}

/* ---------------------------------------------------------------------------
   Carousel slide background image: force fill.

   The image widget (elementor-absolute) inside each swiper slide of loop
   template 848 has a custom CSS block in its Elementor settings that keeps
   reverting to `height: 500px !important` on the <img> and leaves the <a>
   as `display: inline-block`. The slot is ~584px tall, so the image leaves
   an ~84px maroon gap below it, and `width: 100%` on the <img> resolves
   against the <a>'s shrink-to-fit width instead of the slide.

   Putting the fix here means it survives any Elementor re-save. The selector
   does not use the generated widget ID (03ad7af) — it targets the structural
   role: an absolutely-positioned image widget inside a template-848 slide.
   --------------------------------------------------------------------------- */
/* Mobile (<768px): stacked layout — image on top, card below. Just make the
   <a> block-level so width: 100% on the <img> resolves against the slide
   width rather than the inline wrapper. No height overrides: the image
   determines its own height at natural aspect ratio. */
@media (max-width: 767px) {
    body .elementor-848.swiper-slide .elementor-absolute.elementor-widget-image > a { display: block !important; width: 100% !important; }
    body .elementor-848.swiper-slide .elementor-absolute.elementor-widget-image img { width: 100% !important; }
}

/* Desktop (≥768px): side-by-side layout — image fills the full slide slot.
   The widget is position:absolute inside a position:relative container whose
   height is set by the card text, so height:100% gives the image the same
   height as the slot. All three levels need it — the <a> included, or the
   image resolves its 100% against the inline wrapper's shrink-to-fit box. */
@media (min-width: 768px) {
    body .elementor-848.swiper-slide .elementor-absolute.elementor-widget-image { height: 100% !important; }
    body .elementor-848.swiper-slide .elementor-absolute.elementor-widget-image > a { display: block !important; width: 100% !important; height: 100% !important; }
    body .elementor-848.swiper-slide .elementor-absolute.elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* ---------------------------------------------------------------------------
   WCAG 2.2 AA: minimum 24 × 24 px touch targets.

   Social icons (elementor-social-icon <a>) render at 23 × 23 px.
   Footer nav links (elementor-icon-list-item <a>) render at ~16 px line-height.
   Both are below the 24 × 24 px threshold required for AA compliance.
   --------------------------------------------------------------------------- */
.elementor-social-icon {
    min-width: 24px !important;
    min-height: 24px !important;
}
.elementor-icon-list-item > a {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Cartelera card layout: fix title gap and pin buttons to bottom.
   The text content column (elementor-element-cba7a3f, template 1119) has
   a variable number of grid rows depending on card type (5 for event cards,
   8 for film cards). The Elementor default is --e-con-grid-template-rows:
   repeat(1,1fr), which makes the title row absorb all vertical slack.

   Fix strategy: switch the text column to flex column with an explicit
   height matching the poster (340px, border-box). flex-grow:1 on the
   synopsis (elementor-element-3931f54) causes it to absorb remaining
   space, and the buttons container naturally falls to the bottom.

   margin-top:auto on the buttons was tested extensively (stylesheet rule
   and JS inline style with !important) and fails silently — the auto
   margin can only absorb free space WITHIN a grid area, but with
   align-content:start each grid area is exactly the track height, so
   there is no free space inside any area to absorb.

   On mobile (< 768px) the card is stacked vertically and the text
   column is height:auto, so this override is desktop-only. */
@media (min-width: 768px) {
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f {
        display: flex !important;
        flex-direction: column !important;
        height: 340px !important;
        overflow: hidden;
    }
    body .elementor-1119 .elementor-element.elementor-element-3931f54 {
        flex-grow: 1 !important;
        min-height: 0 !important;
    }
}

/* Cartelera card separator line: move from director widget to session widget.
   The original border-bottom was on elementor-element-3528f0b (director), so
   it only appeared for films that have a director field. Festival/event cards
   have no director widget and showed no separator at all.
   Fix: strip the border and extra padding from the director widget and put a
   border-top on the session widget (cfebff1), which is always rendered.
   The line now appears consistently on every card immediately above the session
   time, whether or not a director is present. */
body .elementor-1119 .elementor-element.elementor-element-3528f0b {
    border-style: none !important;
    padding-bottom: 0 !important;
}
body .elementor-1119 .elementor-element.elementor-element-cfebff1 {
    border-top: 2px solid #000;
    padding-top: 5px;
}
/* ---------------------------------------------------------------------------
   Cartelera card: uniform height on mobile + ellipsis on a clipped synopsis.
   Added 2026-10-16.

   Two problems this solves.

   1. Mobile (< 768px) cards were all different heights - 662px to 1002px in
      the current cartelera - because the stacked layout left the text column
      at height:auto, so each card grew to fit its own synopsis. The desktop
      fix above (fixed-height flex column) is now mirrored here with a height
      of 348px, giving every mobile card the same 688px total (340px poster +
      348px text).

   2. Nothing told the reader a synopsis had been cut. `overflow: hidden` on
      the widget clips cleanly but silently; pre-production showed a "…".

   Why the clamp lives on the inner <p> and not on the widget: Chrome ignores
   -webkit-line-clamp on a flex item. The flex algorithm resolves the item's
   height before the clamp runs, so the box is sized but no ellipsis is ever
   painted. The <p> is a normal block inside that item, so the clamp works
   there - but only if the line count is given explicitly, which is why the
   numbers below are hard-coded per breakpoint rather than derived.

   The line counts are the space actually available in the worst case for
   each card type, measured in Chrome (20px line-height):

                      film card            event/festival card
                      (has director)       (no director widget)
       < 768px        120px -> 6 lines     189px -> 9 lines
       768-1023px     104px -> 5 lines     161px -> 7 lines  (2-line title)
       >= 1024px      104px -> 5 lines     189px -> 9 lines

   Event cards get their own counts because they render fewer widgets (no
   director, year/country, genre or language rows), which leaves ~85px more
   room for the synopsis. They are selected by the absence of the director
   widget via :has() rather than by a card-type class, because the loop
   template does not emit one.

   The 768-1023px row is lower for event cards only: that is the one case
   where the title wraps to two lines, which costs 28px of synopsis space.

   Residual gap: a card whose synopsis is genuinely shorter than the space
   available still leaves white space above the buttons ("Digger", 2 lines).
   That is not a layout fault - there is no more text to show. The buttons
   stay pinned to the bottom so the card grid still reads as a grid.
   --------------------------------------------------------------------------- */
body .elementor-1119 .limit-text > p:first-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Mobile: mirror the desktop fixed-height flex column so every card matches. */
@media (max-width: 767px) {
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f {
        display: flex !important;
        flex-direction: column !important;
        height: 348px !important;
        overflow: hidden;
    }
    body .elementor-1119 .elementor-element.elementor-element-3931f54 {
        flex-grow: 1 !important;
        min-height: 0 !important;
    }
    body .elementor-1119 .limit-text > p:first-child {
        -webkit-line-clamp: 6;
    }
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f:not(:has(.elementor-element-3528f0b)) .limit-text > p:first-child {
        -webkit-line-clamp: 9;
    }
}

@media (min-width: 768px) {
    body .elementor-1119 .limit-text > p:first-child {
        -webkit-line-clamp: 5;
    }
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f:not(:has(.elementor-element-3528f0b)) .limit-text > p:first-child {
        -webkit-line-clamp: 9;
    }
    /* Safety net: no title may push past two lines and blow the budget. */
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f > .elementor-widget-heading:first-child .elementor-heading-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* Tablet: the event-card title wraps to two lines here, costing 28px. */
@media (min-width: 768px) and (max-width: 1023px) {
    body .elementor-1119 .elementor-element.elementor-element-cba7a3f:not(:has(.elementor-element-3528f0b)) .limit-text > p:first-child {
        -webkit-line-clamp: 7;
    }
}


/* Carousel title: clamp to 2 lines max; director follows immediately after.
   Root cause of the gap: the slide card is an e-grid container whose first
   row is set to `1fr` via --e-con-grid-template-rows (loop-848 inline style).
   `1fr` fills whatever space the grid has left after the other rows, which is
   ~180px regardless of whether the title is 1 or 2 lines — producing a
   ~134px gap below 1-line titles. Overriding the variable to `auto` makes the
   first row size to its content instead.
   The title widget also gets align-self:start so it doesn't stretch to fill
   the row during the repaint, and height:fit-content as a belt-and-suspenders
   guard. padding-bottom:6px on the heading prevents descenders (j, g, etc.)
   from being clipped by overflow:hidden. */
body .elementor-848.swiper-slide .elementor-element-e846a54 {
    --e-con-grid-template-rows: auto;
}
body .elementor-848.swiper-slide .elementor-element-927604c {
    height: fit-content !important;
    align-self: start !important;
}
body .elementor-848.swiper-slide .elementor-element-927604c .elementor-heading-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    padding-bottom: 6px !important;
}

/* Event slides (no director widget in DOM): allow the title to expand to
   4 lines so long festival/event titles show in full instead of truncating.
   Uses :has() which is supported in all modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
body .elementor-848.swiper-slide:not(:has(.elementor-element-db062b6)) .elementor-element-927604c .elementor-heading-title {
    -webkit-line-clamp: 4 !important;
}

/* Carousel buttons: pin to the bottom of the card regardless of content above.
   The card is a fixed-height CSS grid (354px) with align-content:start, which
   packs rows from the top and leaves free space at the bottom. Switching to
   space-between distributes that free space between rows, which always places
   the last row (buttons) flush with the bottom of the grid — both festival
   slides (5 rows, ~72px free → 18px between each pair) and movie slides
   (8 rows, ~75px free → ~11px between each pair) end up with buttons starting
   at 354 - 36 = 318px from the grid top. */
body .elementor-848.swiper-slide .elementor-element-e846a54 {
    align-content: space-between !important;
}

/* ---------------------------------------------------------------------------
   Carousel navigation arrows.
   Injected by assets/js/carousel-a11y.js into .elementor-widget-loop-carousel.
   --------------------------------------------------------------------------- */

/* Flex row that wraps the Swiper pagination bullets.                         */
.ca11y-pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay — pointer-events:none wrapper sized to match the swiper area.     */
.ca11y-overlay {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
}

/* Prev / next arrow buttons — CSS chevron, no glyph metrics issues.         */
.ca11y-arrow {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.ca11y-arrow::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid #fff;
    border-right: 2.5px solid #fff;
}
.ca11y-prev::before {
    transform: rotate(-135deg) translate(-1px, 1px);
}
.ca11y-next::before {
    transform: rotate(45deg) translate(-1px, 1px);
}
.ca11y-arrow:hover {
    background: rgba(0, 0, 0, 0.72);
}
.ca11y-arrow:focus-visible {
    background: rgba(0, 0, 0, 0.72);
    outline: 2px solid #fff;
    outline-offset: 2px;
}