/* Portal-style info cards — the single source of truth for the portal card
   design. Shared by:
     - the Lihtne keel category archive (category-lihtne-keel.php),
     - the Lihtsa keele selgitus page (blocks in body),
     - the vaimupuu/portal-links block (anywhere it is placed),
     - the vaimupuu/video-card block (card-portal--video variant; declares
       this handle as a second style in its block.json).

   Registered as the `vaimupuu-portal-cards` style handle (see
   inc/portal-links-block.php). The archive and selgitus page enqueue it
   directly; the block declares it via block.json `style`. Because it is a
   normal theme stylesheet, the category grid no longer depends on the block
   being present on the page. */

.post-grid--lihtne-keel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-lg);
  margin-block: var(--spacing-lg);
}

@media (max-width: 900px) {
  .post-grid--lihtne-keel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
  }
}

@media (max-width: 560px) {
  .post-grid--lihtne-keel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card-portal {
  --card-portal-title-lines: 2;
  --card-portal-excerpt-lines: 4;
  --card-portal-title-line: calc(var(--font-size-h3) * 1.3);
  --card-portal-excerpt-line: calc(var(--font-size-base) * 1.5);
  --card-portal-text-height: calc(
    var(--card-portal-title-line) * var(--card-portal-title-lines) +
    0.75rem +
    var(--card-portal-excerpt-line) * var(--card-portal-excerpt-lines)
  );

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card-portal:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.16),
    0 0 0 3px var(--color-link-blue);
  transform: translateY(-2px);
}

.card-portal__image {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Lihtne keel indicator, pinned to the bottom-right of the whole card (matches
   the homepage card-article badge). The badge is a direct child of
   `.card-portal` — which is `position: relative` — not of the image, so it sits
   over the card body's lower-right corner rather than over the thumbnail. */
/* Badge row bottom-right — same container pattern as .card-article__badges. */
.card-portal__badges {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  z-index: 2;
  pointer-events: none;
}

.card-portal__lihtne-keel-badge {
  width: 35px;
  height: 35px;
}

/* Extra-scoped like the card-portal--image img rules: when the block sits in
   a page/post body, `.page-content img` / `.single-post__content img` apply
   `margin: var(--spacing-lg) 0` — and on an absolutely-positioned element the
   bottom margin lifts it off its `bottom: 0.5rem` anchor, floating the badge
   up into the excerpt text. Reset it at higher specificity. */
.card-portal .card-portal__lihtne-keel-badge,
.page-content .card-portal__lihtne-keel-badge,
.single-post__content .card-portal__lihtne-keel-badge {
  margin: 0;
}

.card-portal__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Scoped to the image link (the thumbnail), not `.card-portal__image img`,
   so the lihtne keel badge — a sibling outside the link — is never sized by
   these rules and keeps its own 35px box. */
.card-portal__image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* When the block sits in post/page body, `.page-content img` /
   `.single-post__content img` (same specificity as the rule above, declared
   later → they win the tie) inject `margin` and `height: auto` onto the card
   image. The margin shifts the image down inside its clip box and height:auto
   disables the cover crop, mis-framing the thumbnail. Re-assert the card's own
   sizing, scoped high enough to win, and top-align the crop so the subject
   (usually upper) stays in frame. Inert on the archive (cards aren't in body). */
.page-content .card-portal__image-link img,
.single-post__content .card-portal__image-link img {
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center top;
}

.card-portal__body {
  padding: 1.25rem;
}

/* The badge occupies the card's bottom-right 43px (35px + 0.5rem inset); the
   default 1.25rem body padding is shallower than that, so a full text box
   (2-line title + 4-line excerpt) would run its last line under the badge.
   Reserve clearance — only on cards that actually carry the badge. */
.card-portal:has(.card-portal__badges) .card-portal__body {
  padding-bottom: calc(0.5rem + 35px + 0.5rem);
}

.card-portal__text {
  display: flex;
  flex-direction: column;
  height: var(--card-portal-text-height);
}

.card-portal__title {
  flex-shrink: 0;
  /* Always occupy the full two title rows, even for a one-line title, so
     every card's excerpt starts at the same height (Kerttu/Janek,
     2026-09-04: uniform card layout). */
  min-height: calc(var(--card-portal-title-line) * var(--card-portal-title-lines));
  margin: 0 0 0.75rem;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-link-blue);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-portal-title-lines);
  line-clamp: var(--card-portal-title-lines);
  overflow: hidden;
}

/* Scoped under .card-portal so `text-decoration: none` outranks content-area
   link rules (e.g. `.single-post__content a { text-decoration: underline }`)
   when the block sits inside post/page body — otherwise titles are underlined
   by default instead of only on hover. */
.card-portal .card-portal__title-link {
  color: inherit;
  text-decoration: none;
}

.card-portal .card-portal__title-link:hover,
.card-portal .card-portal__title-link:focus {
  color: var(--color-link-blue);
  text-decoration: underline;
}

/* Whole card clickable — same stretched-link pattern as .card-article__link
   in front-page.css (title link's hit area covers the card; no extra link
   for screen readers). Portal cards contain no other links, so nothing
   needs lifting above the overlay. */
.card-portal .card-portal__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Scoped under .card-portal so `margin: 0` outranks content-area paragraph
   rules (`.page-content p` / `.single-post__content p { margin-bottom }`).
   Without this, that leaked 1rem margin overflows the fixed-height text box,
   the excerpt gets flex-shrunk, and its last line is clipped mid-height —
   which is exactly the "cuts mid-line" symptom. No flex-grow either, so the
   box height stays a whole number of lines for line-clamp to cap cleanly. */
.card-portal .card-portal__excerpt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-portal-excerpt-lines);
  line-clamp: var(--card-portal-excerpt-lines);
  overflow: hidden;
}

/* External-link cue (orange arrow badge) on card titles. Duplicates the
   .external-link-cue rules from style.css because that sheet never loads in
   the block editor — this one does (block.json `style` handle), so without
   these the editor preview renders the inline SVG unconstrained (full card
   width) and in the inherited title color instead of orange. */
.card-portal .external-link-cue {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25em;
  color: var(--color-orange, #e8600a);
}

.card-portal .external-link-cue svg {
  width: 1.25em;
  height: 1.25em;
}

.card-portal--no-excerpt {
  --card-portal-text-height: calc(var(--card-portal-title-line) * var(--card-portal-title-lines));
}

.card-portal--no-excerpt .card-portal__title {
  margin-bottom: 0;
}

/* Image-dominant variant — added by the card partial whenever a card has no
   visible description (external-link stub posts, or showExcerpt turned off).
   The thumbnail grows from 16:9 to 4:3 and switches from cover-crop to
   contain, so partner logos display whole instead of being cropped; the body
   is just the 2-line clamped title. Used by the "Kus kasutatakse?" page. */
.card-portal--image {
  --card-portal-text-height: calc(var(--card-portal-title-line) * var(--card-portal-title-lines));
}

.card-portal--image .card-portal__image {
  aspect-ratio: 4 / 3;
  /* Logos are often transparent PNGs drawn for a light background — keep the
     image well white in the dark/gray color themes too. */
  background: var(--color-white);
}

.card-portal--image .card-portal__title {
  margin-bottom: 0;
}

/* Triple-scoped like the cover-crop override above so these win the tie
   against `.page-content img` / `.single-post__content img` when the block
   sits in a page body. box-sizing pinned so the letterbox padding stays
   inside the 100% box regardless of global box-sizing. */
.card-portal--image .card-portal__image-link img,
.page-content .card-portal--image .card-portal__image-link img,
.single-post__content .card-portal--image .card-portal__image-link img {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 1rem;
  object-fit: contain;
  object-position: center;
}

html[data-color-theme="dark"] .card-portal {
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-color-theme="dark"] .card-portal__title,
html[data-color-theme="dark"] .card-portal__title-link {
  color: #6b8cff;
}

html[data-color-theme="dark"] .card-portal__excerpt {
  color: #ccc;
}

html[data-color-theme="gray"] .card-portal {
  background: var(--color-gray-bg);
}

/* ==========================================================================
   "Vaata rohkem" disclosure (partials/card-portal-links.php, collapse mode)
   Native <details>: the first grid row stays visible, the rest open from
   the summary pill. Same pill idiom as the sisukord buttons.
   ========================================================================== */

.portal-links-more {
  margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-lg);
}

/* Video-row variant (sisukord view.js collapse on the Videote leht
   template): a wp-block-columns row has none of the internal bottom gap
   the portal grid ends with, so the pull-up margin above would sit the
   pill on the last card — use a positive margin for the same net 16px
   gap the portal grids show. */
.portal-links-more--videos {
  margin-top: var(--spacing-md);
}

/* Filled green like .btn-cta: "Vaata rohkem" performs an action (reveals
   more cards) while the "Üles" back pill only navigates — the two pills
   used to be white-with-border lookalikes and editors couldn't tell them
   apart (Janek, 10.09). The gray-outline back pill stays in sisukord css. */
.portal-links-more__summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--color-green-medium);
  border-radius: 999px;
  background-color: var(--color-green-medium);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.portal-links-more__summary::-webkit-details-marker {
  display: none;
}

.portal-links-more__summary:hover,
.portal-links-more__summary:focus-visible {
  background-color: var(--color-green-hover);
  border-color: var(--color-green-hover);
}

/* Open state inverts the fill: "Näita vähem" reads as the same control in
   its other state — white pill, green border and text. */
.portal-links-more[open] .portal-links-more__summary {
  background-color: var(--color-white);
  border-color: var(--color-green-medium);
  color: var(--color-green-medium);
}

.portal-links-more[open] .portal-links-more__summary:hover,
.portal-links-more[open] .portal-links-more__summary:focus-visible {
  background-color: var(--color-gray-bg);
  border-color: var(--color-green-hover);
  color: var(--color-green-hover);
}

.portal-links-more__summary:focus-visible {
  outline: 2px solid var(--color-green-light);
  outline-offset: 2px;
}

.portal-links-more__label--less {
  display: none;
}

.portal-links-more[open] .portal-links-more__label--more {
  display: none;
}

.portal-links-more[open] .portal-links-more__label--less {
  display: inline;
}

.portal-links-more .portal-links-more__grid {
  margin-block-start: var(--spacing-md);
}

/* Dark theme keeps the green fill, same as .btn-cta (no dark override):
   white-on-green stays >8:1 on any ground. */