/**
 * @file views-sundmused.css
 * Drupal core ships the Views "Grid" style with no CSS (same gap hit with
 * Inimesed and Õppeprogrammid) - this gives the Sündmused view a 2-column
 * grid of horizontal cards (image left, text right), matching the
 * wireframe pattern, and constrains the source images which vary wildly
 * in size.
 */

.view-id-sundmused .view-content {
  margin-top: 2rem;
}

.view-id-sundmused .views-view-grid > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 700px) {
  .view-id-sundmused .views-view-grid > div {
    grid-template-columns: 1fr;
  }

  /*
   * Single-column mobile list: give every card a divider + generous
   * breathing room, so it's clear where one event ends and the next
   * starts (existing 2rem row-gap/margin-bottom is kept as-is; this adds
   * on top of it). Skip the border on the very first card overall - the
   * "one row-wrapper div per pair of items" Views Grid quirk means a
   * plain :first-child would also match the first card of every
   * subsequent row-wrapper, not just the true first item.
   */
  .view-id-sundmused .views-view-grid > div > div {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .view-id-sundmused .views-view-grid > div:first-child > div:first-child {
    padding-top: 0;
    border-top: none;
  }
}

.view-id-sundmused .views-view-grid > div > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 1rem;
}

@media (max-width: 500px) {
  .view-id-sundmused .views-view-grid > div > div {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
}

.view-id-sundmused .views-field-field-sundmuse-pohipilt {
  grid-column: 1;
  grid-row: 1 / -1;
}

@media (max-width: 500px) {
  .view-id-sundmused .views-field-field-sundmuse-pohipilt {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 1rem;
  }
}

.view-id-sundmused .views-field-field-sundmuse-pohipilt img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-lg, var(--radius));
}

@media (max-width: 500px) {
  .view-id-sundmused .views-field-field-sundmuse-pohipilt,
  .view-id-sundmused .views-field-field-sundmuse-pohipilt img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.view-id-sundmused .views-field-title {
  grid-column: 2;
  font-weight: 600;
}

.view-id-sundmused .views-field-title h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.view-id-sundmused .views-field-field-sundmuse-sisutekst {
  grid-column: 2;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.view-id-sundmused .views-field-field-kuupaev {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

/*
 * Küla/Loodusselts tags: same rounded-pill look as Õppeprogrammid's
 * Sihtrühm badge (views-oppeprogrammid.css) - shown on the Sündmused
 * listing and front-page block only, not the event's own page (deemed
 * unnecessary noise there). A checkboxes field can have 0, 1, or 2
 * values, rendered as a <ul>/<li> list (multi_type: ul); each value is
 * wrapped in a <span class="pill--kula"> / <span class="pill--
 * loodusselts"> by the ellamaa_pill_list field formatter (in
 * ellamaa_helpers), so CSS can color the two pills differently.
 */
.view-id-sundmused .views-field-field-kula-loodusselts {
  grid-column: 2;
  margin-bottom: 0.5rem;
}

.view-id-sundmused .views-field-field-kula-loodusselts ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

[class^="pill--"] {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
}

/* Per-value colors, matching the main menu's Küla (brown) and Loodusselts
   (green) buttons. */
.pill--kula {
  color: #684109;
  background: #ede5d9;
}

.pill--loodusselts {
  color: #33530a;
  background: #e4ead3;
}

@media (max-width: 500px) {
  .view-id-sundmused .views-field-title,
  .view-id-sundmused .views-field-field-sundmuse-sisutekst,
  .view-id-sundmused .views-field-field-kuupaev,
  .view-id-sundmused .views-field-field-kula-loodusselts {
    grid-column: 1;
  }
}

/*
 * Individual Sündmus page: main content + "other events" sidebar side by
 * side, matching the same two-column pattern as Õppeprogrammid
 * (.oppeprogramm-layout in views-oppeprogrammid.css).
 */
.sundmus-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.sundmus-main {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-areas:
    ". date"
    "image body"
    ". file"
    "extra extra";
  gap: 1.5rem 2rem;
  align-items: start;
}

.sundmus-related h3 {
  margin: -1rem -1rem 1rem;
  padding: 1rem;
  font-size: 1.6875rem;
  font-weight: 600;
  background: #4d6b4a;
  color: #fff;
  border-radius: var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius)) 0 0;
}

.sundmus-related {
  flex: 0 0 330px;
  padding: 1rem;
  background: #f1ebdd;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
}

.sundmus-related .view-sundmused > .view-header,
.sundmus-related .view-sundmused > .view-content {
  margin: 0;
}

.sundmus-related .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sundmus-related .item-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.sundmus-related .item-list li:first-child {
  padding-top: 0;
}

.sundmus-related .item-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sundmus-related .views-field-field-kuupaev {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.sundmus-related .item-list a {
  font-size: 1.125rem;
  color: var(--foreground);
  text-decoration: none;
}

.sundmus-related .item-list a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/*
 * Plain link + icon, matching .oppeprogramm-view-all (views-oppeprogrammid.css)
 * exactly - not the button treatment .sundmused-view-all (front-page card)
 * uses, since this is a different, sidebar-scoped element despite the
 * similar name.
 */
.sundmus-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.sundmus-view-all:hover {
  color: var(--primary);
  text-decoration: underline;
}

.sundmus-view-all__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .sundmus-layout {
    flex-direction: column;
  }

  .sundmus-related {
    flex-basis: auto;
    width: 100%;
  }
}

.sundmus-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

/*
 * Date/time colors (DateTimeSplitFormatter in ellamaa_helpers splits the
 * field into two spans specifically so these can differ) - date in the
 * same brown as the Sündmused main menu button, time in the same green
 * as Õppeprogrammid's, per the client's own color pairing. The calendar
 * icon stays black regardless (icon_color set directly in node.html.twig).
 */
.datetime-split {
  display: flex;
  gap: 0.4rem;
}

.datetime-split__date {
  color: #684109;
}

.datetime-split__time {
  color: #33530a;
}

/*
 * Featured image within .sundmus-main: a fixed two-column grid (image
 * column, text column - see grid-template-areas on .sundmus-main above),
 * NOT the floated-image/wrapping-text pattern Õppeprogrammid uses
 * (.oppeprogramm-featured-image in views-oppeprogrammid.css). Changed
 * 2026-08-24: Sündmus body text is often short (unlike Õppeprogrammid's
 * longer descriptions), and wrapping text around a float left an awkward
 * orphan line under the image once the text ran out. A grid keeps the
 * image and text as independent columns regardless of text length, so
 * there's no wrap-around edge case to look wrong.
 */
.sundmus-featured-image {
  grid-area: image;
}

.sundmus-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, var(--radius));
}

.sundmus-body {
  grid-area: body;
}

.sundmus-body p {
  margin-bottom: 1rem;
}

.sundmus-file {
  grid-area: file;
}

.sundmus-extra {
  grid-area: extra;
}

@media (max-width: 700px) {
  .sundmus-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "image"
      "body"
      "file"
      "extra";
  }
}

/*
 * Front page teaser (block_frontpage display): plain title list, no
 * bullets, extra breathing room between links, and the "view all" footer
 * link styled as a button.
 */
.view-display-id-block_frontpage .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.view-display-id-block_frontpage .item-list li {
  margin-bottom: 1.25rem;
}

.view-display-id-block_frontpage .item-list li:last-child {
  margin-bottom: 0;
}

.view-display-id-block_frontpage .item-list a {
  text-decoration: none;
}

.view-display-id-block_frontpage .item-list a:hover {
  text-decoration: underline;
}

/* 60% gray, ~60% of the 1.125rem body font-size (color-mix rather than
   var(--muted-foreground) - that token currently equals --foreground with
   no lightening, so it wouldn't actually read as gray). */
.view-display-id-block_frontpage .views-field-field-kuupaev {
  margin-top: 0.25rem;
  font-size: 0.675rem;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.sundmused-view-all {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--button-primary-color);
  color: var(--primary-foreground);
  border-radius: var(--radius-md, var(--radius));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.sundmused-view-all:hover {
  opacity: 0.9;
}

/*
 * Date + "Jaga Facebookis" share link share one grid cell (the old .sundmus-date
 * grid-area moved to the wrapper). The share row copies the date row: black icon,
 * 0.9rem text in the body text colour, underlined to read as a link.
 * Plain link to facebook.com/sharer; Facebook builds the card from the page's
 * Open Graph tags (Metatag defaults for node__sundmus).
 */
.sundmus-meta {
  grid-area: date;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.share-facebook__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Same hover logic as the site's other links: text colour -> blue. */
.share-facebook__link:hover,
.share-facebook__link:focus-visible {
  color: var(--primary);
}