/* ============================================================================
   GYNOFEM — INVESTOR RESOURCES (Investor.html)
   ----------------------------------------------------------------------------
   "Annual Report" covers and "Investor Presentation" downloads, placed
   between the Investor Information card and the Corporate Overview block.
   Uses the same max width and side gutter as the page's card grids, so its
   edges line up with the Corporate Overview cards below.

     >= 1200px    Two columns: three report covers in a white panel, with the
                  presentation list beside it at the same height. "Download"
                  appears on hover, as in the reference design.
     768-1199px   Stacked: covers full width, presentations in three columns
                  with "Download" always shown.
     <= 767px     Presentations become a single list.
     <= 700px     Report covers turn into rows (thumbnail + title) so the
                  titles stay readable on small tablets and phones.

   Covers are drawn in CSS from the brand gradients and logo. To use a real
   cover image instead, add <img class="ir-report-cover-img" src="…" alt="">
   inside that card's .ir-report-cover; it fills the cover and hides the
   drawn artwork.

   The PDF links themselves are handled by script.js/investor-documents.js.
   ============================================================================ */

.ir-resources {
  --ir-ink: var(--text, #222831);
  --ir-muted: var(--text-light, #5f6b7a);
  --ir-accent: #b5179e;
  --ir-plum: #781f91;
  --ir-line: var(--border, #f3c9dd);
  /* Same elevation as the Investor Information card above. */
  --ir-shadow:
    0 12px 32px rgba(17, 24, 39, 0.12),
    0 2px 8px rgba(17, 24, 39, 0.06);
  --ir-gap: 36px;

  max-width: 1300px;
  margin: 0 auto;
  padding: 64px 8% 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: var(--ir-gap);
}

/* Each block spans the heading row and the content row, so both headings
   share one baseline and the panel and list start level even if a heading
   wraps. */
.ir-block {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--ir-gap);
  min-width: 0;
}

.ir-block-title {
  align-self: end;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ir-ink);
}

/* ---------------------------------------------------------------------------
   Annual Report
   --------------------------------------------------------------------------- */

.ir-report-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: 16px;
  list-style: none;
  background: var(--white, #ffffff);
  border-radius: 6px;
  box-shadow: var(--ir-shadow);
}

.ir-report-panel > li {
  display: flex;
  min-width: 0;
}

/* The card is a portrait cover. Its top 80% is reserved for the cover
   artwork, so the title always sits below the logo and year: if the title
   needs an extra line on a narrow card, the card grows instead of the two
   overlapping. */
.ir-report-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 213 / 277;
  padding-top: 80%;
  overflow: hidden;
  border-radius: 6px;
  color: #ffffff;
  text-decoration: none;
  container-type: inline-size;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ir-report-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20%;
  overflow: hidden;
  color: #ffffff;
  container-type: inline-size;
  transition: transform 0.5s ease;
}

.ir-report-cover::before,
.ir-report-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Brand mark watermark */
.ir-report-cover::after {
  right: -22%;
  bottom: 2%;
  width: 78%;
  height: 78%;
  background: url("../img/mother.png") no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.09;
}

/* 2025-26 — deep purple with a fine research grid */
.ir-report-cover--1 {
  background: linear-gradient(160deg, #8d0fb3 0%, #6e2ea6 48%, #3a0f5c 100%);
}
.ir-report-cover--1::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* 2024-25 — plum with a large ring framing the logo */
.ir-report-cover--2 {
  background: linear-gradient(175deg, #5b1f8a 0%, #3a0f5c 100%);
}
.ir-report-cover--2::before {
  left: -20%;
  top: -6%;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 56%,
    rgba(223, 110, 168, 0.2) 57%,
    rgba(223, 110, 168, 0.2) 98%,
    transparent 99%
  );
}
.ir-report-cover--2::after {
  display: none;
}

/* 2023-24 — magenta-to-purple with soft light */
.ir-report-cover--3 {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.26), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(253, 121, 168, 0.55), transparent 48%),
    linear-gradient(150deg, #d9579e 0%, #b5179e 42%, #6e2ea6 100%);
}
.ir-report-cover--3::after {
  right: auto;
  left: -24%;
  transform: scaleX(-1);
}

.ir-report-logo,
.ir-report-kicker,
.ir-report-year {
  position: relative;
  z-index: 1;
}

.ir-report-logo {
  width: 64%;
  height: auto;
  filter: brightness(0) invert(1);
}

.ir-report-kicker {
  margin-top: 10cqi;
  padding-left: 0.3em; /* balances the trailing letter-spacing */
  font-size: 0.7rem;
  font-size: 4.6cqi;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.ir-report-year {
  margin-top: 2cqi;
  font-size: 2rem;
  font-size: 15cqi;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Optional real cover image (see header note). */
.ir-report-cover-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ir-report-cover:has(.ir-report-cover-img)::before,
.ir-report-cover:has(.ir-report-cover-img)::after {
  display: none;
}

.ir-report-label {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 4cqi, 10px);
  padding: clamp(22px, 16cqi, 40px) clamp(10px, 7cqi, 16px)
    clamp(10px, 7cqi, 16px);
  font-size: clamp(0.75rem, 6.6cqi, 1rem);
  line-height: 1.45;
  background: linear-gradient(
    to top,
    rgba(33, 8, 52, 0.88) 0%,
    rgba(33, 8, 52, 0.6) 55%,
    rgba(33, 8, 52, 0) 100%
  );
}

.ir-report-arrow {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Investor Presentation
   --------------------------------------------------------------------------- */

.ir-presentation-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
}

.ir-presentation-list > li {
  display: flex;
  min-width: 0;
}

.ir-presentation-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 88px;
  padding: 18px;
  background: var(--white, #ffffff);
  border: 1px solid var(--ir-line);
  border-radius: 6px;
  color: var(--ir-ink);
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ir-presentation-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ir-presentation-name {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ir-ink);
  transition: color 0.3s ease;
}

.ir-presentation-date {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ir-muted);
}

.ir-presentation-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ir-accent);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.ir-presentation-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   Interaction
   --------------------------------------------------------------------------- */

.ir-report-card:focus-visible,
.ir-presentation-card:focus-visible {
  outline: 3px solid rgba(181, 23, 158, 0.45);
  outline-offset: 3px;
}

.ir-presentation-card:focus-visible {
  background: linear-gradient(135deg, #fff5fc 0%, #f7e6ff 100%);
  border-color: #db3d86;
}
.ir-presentation-card:focus-visible .ir-presentation-name {
  color: var(--ir-plum);
}

/* Hover only where the device can really hover, so a tap on a phone never
   leaves a card stuck in its hover state. */
@media (hover: hover) {
  .ir-report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(110, 46, 166, 0.28);
  }
  .ir-report-card:hover .ir-report-cover {
    transform: scale(1.04);
  }
  .ir-report-card:hover .ir-report-arrow {
    transform: translateX(4px);
  }

  .ir-presentation-card:hover {
    background: linear-gradient(135deg, #fff5fc 0%, #f7e6ff 100%);
    border-color: #db3d86;
    box-shadow: 0 14px 30px rgba(214, 51, 132, 0.1);
  }
  .ir-presentation-card:hover .ir-presentation-name {
    color: var(--ir-plum);
  }
}

/* Desktop: "Download" is revealed on hover / keyboard focus. Its space is
   always reserved, so nothing shifts when it appears. */
@media (min-width: 1200px) and (hover: hover) {
  .ir-presentation-action {
    opacity: 0;
    transform: translateX(-6px);
  }
  .ir-presentation-card:hover .ir-presentation-action,
  .ir-presentation-card:focus-visible .ir-presentation-action {
    opacity: 1;
    transform: none;
  }
}

/* "Coming soon" notice for documents whose PDF link is not added yet. */
.ir-doc-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9998;
  width: max-content;
  max-width: min(440px, calc(100% - 48px));
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6e2ea6 0%, #8d0fb3 100%);
  box-shadow: 0 12px 30px rgba(110, 46, 166, 0.3);
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.ir-doc-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .ir-resources {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 56px;
    padding: 56px 8% 64px;
  }
  .ir-block {
    display: block;
    grid-row: auto;
  }
  .ir-block-title {
    margin-bottom: 28px;
  }
  .ir-presentation-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 16px;
  }
  .ir-presentation-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .ir-resources {
    row-gap: 48px;
    padding: 48px 8% 56px;
  }
  .ir-block-title {
    margin-bottom: 22px;
  }
  .ir-presentation-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ir-presentation-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    padding: 16px 18px;
  }
}

@media (max-width: 640px) {
  /* Clear of the WhatsApp button, which sits bottom-right at this width. */
  .ir-doc-notice {
    bottom: 84px;
    max-width: calc(100% - 32px);
    border-radius: 14px;
  }
}

@media (max-width: 700px) {
  .ir-report-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px 16px;
  }
  .ir-report-panel > li + li {
    border-top: 1px solid #f3e6ee;
  }
  .ir-report-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    aspect-ratio: auto;
    padding: 14px 0;
    overflow: visible;
    border-radius: 0;
    color: var(--ir-ink);
    container-type: normal;
  }
  .ir-report-card:hover {
    transform: none;
    box-shadow: none;
  }
  .ir-report-cover {
    position: relative;
    inset: auto;
    flex: 0 0 76px;
    aspect-ratio: 213 / 277;
    padding-top: 16px;
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(58, 15, 92, 0.2);
  }
  .ir-report-kicker {
    display: none;
  }
  .ir-report-year {
    margin-top: 12cqi;
  }
  .ir-report-label {
    gap: 10px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    background: none;
  }
  .ir-report-arrow {
    color: var(--ir-accent);
  }
  .ir-report-format {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ir-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ir-report-card,
  .ir-report-cover,
  .ir-report-arrow,
  .ir-presentation-card,
  .ir-presentation-name,
  .ir-presentation-action,
  .ir-doc-notice {
    transition: none;
  }
}