/*
Theme Name: Light City Church
Theme URI: https://example.org/
Description: Elementor child theme for the Light City Church site recreation. Header, footer, archive templates and the full design system live here so the layout can be restyled globally without editing page-level Elementor data. Requires the Hello Elementor parent theme.
Author: Site build
Author URI: https://example.org/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightcity
Tags: elementor, church, one-click-import
*/

/* Design system lives in assets/css/theme.css — enqueued from functions.php.
   This file is the theme header plus site-specific overrides. It loads AFTER
   theme.css, so anything here wins. Never edit theme.css directly. */


/* ==========================================================================
   1. IMAGE SLOTS
   Applies to Elementor Image widgets that replace a placeholder. Add the
   matching classes in Elementor under Advanced > Layout > CSS Classes,
   e.g. "lcc-ph lcc-ph--21x9". Locks the crop so swapping a photo can't
   change the section's proportions.
   ========================================================================== */

.lcc-ph--21x9 img,
.lcc-ph--16x9 img,
.lcc-ph--4x5 img,
.lcc-ph--3x2 img,
.lcc-ph--1x1 img {
  width: 100%;
  object-fit: cover;
}

.lcc-ph--21x9 img { aspect-ratio: 21 / 9; }   /* page headers */
.lcc-ph--16x9 img { aspect-ratio: 16 / 9; }   /* message thumbnails */
.lcc-ph--4x5  img { aspect-ratio: 4 / 5; }    /* portraits */
.lcc-ph--3x2  img { aspect-ratio: 3 / 2; }    /* tiles + cards */
.lcc-ph--1x1  img { aspect-ratio: 1 / 1; }    /* team headshots */


/* ==========================================================================
   2. LOCATION CARDS
   ========================================================================== */

/* Featured images fill the card the way the placeholders did. */
.lcc-locationcard .lcc-placeholder,
.lcc-locationcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait cards. First number is width, second is height. */
.lcc-locationcard {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

/* Keeps faces in frame. Lower number moves the crop up; delete this rule
   entirely to centre the image. */
.lcc-locationcard img { object-position: center 25%; }

/* Title and times are <span> elements — force them onto separate lines. */
.lcc-locationcard__city,
.lcc-locationcard__times { display: block; }

/* Stronger scrim so white text stays readable over lighter photos. */
.lcc-locationcard::after {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 75%);
}

/* Collapse empty grid tracks so three cards fill the row instead of leaving
   a fourth slot's worth of dead space. Remove "--locations" to apply this to
   the message and team grids too. */
.lcc-cardgrid--locations {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}


/* ==========================================================================
   3. HERO
   Positions the <video> element itself rather than Elementor's wrapper,
   so this survives Elementor version changes.
   ========================================================================== */

.lcc-hero { position: relative; overflow: hidden; }

.lcc-hero .lcc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.lcc-hero .lcc-hero__inner {
  position: relative;
  z-index: 2;
}

.lcc-hero__title .elementor-heading-title,
.lcc-hero__title h1 {
  font-size: clamp(2.2rem, 1.2rem + 3vw, 4.25rem);
  max-width: 20ch;
}
/* ==========================================================================
   4. YOUR OWN ADDITIONS
   Paste anything new below this line.
   ========================================================================== */