/* ============================================================
   Limelight Hawaii — content blocks
   Loaded by includes/blocks/render.php, and only on pages that
   actually render blocks.

   The block partials reproduce the site's existing section markup,
   but under their own class names (.block-card rather than
   .team-card, .value-card, .mission-card …). main.css styles those
   original names, so blocks need the equivalent rules here.

   That is deliberate: blocks own their own styling, so adding a
   block type never means editing main.css, and renaming a legacy
   section class cannot silently break a managed page.
   ============================================================ */

/* ---- Card media -------------------------------------------
   Mirrors .team-card .uk-card-media-top in main.css (height 300 /
   250 / 200 by breakpoint). Uses object-fit rather than UIkit's
   uk-cover + <canvas>, so the crop holds even if UIkit's JS has
   not initialised.
   ------------------------------------------------------------ */
.block-card .uk-card-media-top {
    height: 300px;
    overflow: hidden;
    position: relative;
}
.block-card .uk-card-media-top .block-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-slow, all 0.4s ease);
}
.block-card:hover .uk-card-media-top .block-card-image {
    transform: scale(1.04);
}

/* Whole card as a link (FAQ category cards). Mirrors .faq-category-card. */
a.block-card--link {
    display: flex;
    color: inherit;
    text-decoration: none;
}
a.block-card--link:hover,
a.block-card--link:focus {
    text-decoration: none;
    color: inherit;
}
a.block-card--link:focus-visible {
    outline: 2px solid var(--primary-accent, #a5ce3c);
    outline-offset: 2px;
}

/* ---- Card body --------------------------------------------- */
.block-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.block-card .uk-card-body {
    flex: 1 1 auto;
}
.block-card-icon {
    line-height: 1;
}

/* NOTE: .block-card .uk-card-title deliberately sets NOTHING.
   Every hardcoded card on this site uses UIkit's own .uk-card-title
   (1.5rem), and the sections that differ set their own size in main.css
   (.experience-limelight is 1.3rem) or their own margin (.specs-card is
   margin:0, .event-type-card is 15px). A generic size here loads after
   main.css, ties on specificity and wins, so it silently overrode all of
   them: it shrank the specs card's header and moved the accent underline
   with it. Leave the title to UIkit and to the preset. */

/* ---- Body copy inside text/split blocks -------------------- */
.block-body > *:first-child { margin-top: 0; }
.block-body > *:last-child  { margin-bottom: 0; }
.block-body img { max-width: 100%; height: auto; }

/* The original story column opened with an h2 inside the copy, so
   rich text carries headings. Keep them in the page's scale. */
.block-body h2 {
    font-size: 1.9rem;
    margin-bottom: 16px;
}
.block-body h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

/* ---- Split media ------------------------------------------- */
.block-split .split-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 960px) {
    .block-card .uk-card-media-top { height: 250px; }
}
@media (max-width: 640px) {
    .block-card .uk-card-media-top { height: 200px; }
    .block-body h2 { font-size: 1.5rem; }
}

/* ============================================================
   Preset restores
   ------------------------------------------------------------
   card-grid's "Visual preset" adds the original section's class
   so main.css / home.css style the block like the section it
   reproduces. But this file is injected by render.php in the
   BODY, so it loads after both, and the generic .block-card
   rules above tie on specificity and win on source order.

   Every value below is the source stylesheet's, restated at
   .block-card.<preset> (0,3,0) so the preset wins its own
   properties back. Only genuine conflicts are listed; anything
   the preset sets that blocks.css does not touch already
   applies normally.

   Add a row here whenever a new preset is added to
   admin/includes/block_registry.php.
   ============================================================ */

/* experience: index.php "Experience at Limelight".
   main.css .experience-limelight .uk-card-media-top.
   The title needs nothing here: .experience-limelight .uk-card-title already
   sets 1.3rem/700/15px and now reaches the block, because the preset emits the
   section class too. */
.block-card.experience-card .uk-card-media-top { height: 250px; }
/* The original card has no image zoom, and home.css kills the section's
   transitions outright, so the generic scale() would snap rather than ease. */
.block-card.experience-card:hover .uk-card-media-top .block-card-image {
    transform: none;
}
/* The original description is a <p class="uk-text-small">, and main.css gives
   that flex-grow so the "Learn More" link is pushed to the foot of the card.
   Blocks emit an unclassed <p>, so restore it here rather than special-casing
   the markup. Left to home.css below 640px, where it retunes both values. */
.block-card.experience-card .uk-card-body > p {
    flex-grow: 1;
    margin-bottom: 20px;
}
@media (min-width: 640px) {
    .block-card.experience-card .uk-card-body > p {
        font-size: 0.875rem;
        line-height: 1.6;
    }
}
@media (max-width: 959px) {
    .block-card.experience-card .uk-card-media-top { height: 220px; }
}
@media (max-width: 639px) {
    .block-card.experience-card .uk-card-media-top { height: 200px; }
}

/* event-type: planning.php "event types".
   main.css .event-type-card .uk-card-media-top, and its hover zoom is 1.1
   where the generic rule above is 1.04. The title needs nothing: main.css
   .event-type-card .uk-card-title already reaches the block. */
.block-card.event-type-card .uk-card-media-top { height: 250px; }
.block-card.event-type-card:hover .uk-card-media-top .block-card-image {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .block-card.event-type-card .uk-card-media-top { height: 200px; }
}
@media (max-width: 640px) {
    .block-card.event-type-card .uk-card-media-top { height: 180px; }
}

/* spec: planning.php "technical specifications".
   The original media box is an INLINE style on the markup rather than a rule
   in main.css (height:200px, no breakpoints), which is why nothing in main.css
   contradicted the generic 300px and the mismatch went unnoticed.
   The specs card is also the one card that does NOT animate: it has no
   uk-card-hover and no image zoom, only .specs-card:hover's lift. */
.block-card.specs-card .uk-card-media-top { height: 200px; }
@media (max-width: 960px) {
    .block-card.specs-card .uk-card-media-top { height: 200px; }
}
@media (max-width: 640px) {
    .block-card.specs-card .uk-card-media-top { height: 200px; }
}
.block-card.specs-card:hover .uk-card-media-top .block-card-image {
    transform: none;
}