/* /srv/webapps/clients/fruitfulnetworkdevelopment.com/frontend/styles.css */

/* =========================
   RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   BASE LAYOUT
========================= */
body {
  display: flex;
  min-height: 100vh;
  width: 100vw;
  background: #101418;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
}

/* Side margins (1/22 each) */
.margin-left,
.margin-right {
  background-color: #202122;
  width: calc(100vw / 22);
}

/* Center content strip (20/22) */
.content-area {
  background-color: #101418;
  width: calc((100vw / 22) * 20);
  min-height: 100vh;
}

/* Header is top-adjacent */
.content-inner {
  padding-top: 0;
}

/* Shared section wrapper so stacked sections don’t touch each other */
.section-block {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
}

/* First section flush to top */
.page-header.section-block {
  margin-top: 0;
}

/* =========================
   HEADER
========================= */

.page-header {
  width: 100%;
}

.header-main-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-icon {
  height: 22px;
  cursor: pointer;
}

.header-logo {
  height: 26px;
}

.header-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.header-title {
  font-size: 1.1rem;
  text-decoration: underline;
  white-space: nowrap;
}

.header-subtitle {
  font-size: 0.8rem;
  white-space: nowrap;
}

.header-search {
  display: flex;
  align-items: center;
  margin-left: 2rem;
}

.search-input {
  padding: 0.35rem 0.5rem;
  background-color: #202122;
  border: 1px solid #898f96;
  color: #ffffff;
  min-width: 220px;
}

.search-input::placeholder {
  color: #898f96;
}

.search-button {
  padding: 0.35rem 0.75rem;
  border: 1px solid #898f96;
  border-left: none;
  background-color: #202122;
  color: #ffffff;
  cursor: pointer;
}

/* =========================
   MAIN 3-COLUMN AREA
========================= */

.main-columns {
  /* section-block already adds spacing & padding */
}

/* 3 main columns inside the content strip */
.columns {
  display: flex;
}

/* Left + right columns: 4/22 each */
.col-left,
.col-right {
  width: calc((100vw / 22) * 4);
}

/* Middle column: 12/22 */
.col-middle {
  width: calc((100vw / 22) * 12);
}

/* =========================
   LEFT COLUMN (DATE)
========================= */

.meta-column {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.meta-date {
  font-size: 0.85rem;
}

/* =========================
   MIDDLE COLUMN (META BAR + INNER CONTENT)
========================= */

/* Index button + name bar */
.meta-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.meta-index-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.meta-index-btn img {
  height: 20px;
  width: auto;
}

.meta-name {
  font-size: 0.9rem;
}

/* Thin divider under meta bar, full width of middle column */
.meta-bar-divider {
  height: 1px;
  width: 100%;
  background-color: #898f96;
  margin-bottom: 1.2rem;
}

/* Inner 2-column region (Oeuvre / Anthology vs Compendium) */
.middle-columns {
  display: flex;
  gap: 1.5rem;
}

/* Main text column (about 2/3 of middle column) */
.middle-main {
  flex: 5;
}

/* Compendium column (about 1/3) */
.middle-compendium {
  flex: 2;
}

/* =========================
   OEUVRE
========================= */

.oeuvre-section {
  width: 100%;
}

.oeuvre-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.oeuvre-textbox {
  font-size: 0.9rem;
  line-height: 1.5;
}

.oeuvre-textbox p {
  margin-bottom: 1rem;
}

/* =========================
   ANTHOLOGY
========================= */

.anthology-section {
  width: 100%;
  margin-top: 2.5rem;
}

.sub-divider {
  height: 1px;
  width: 100%;
  background-color: #898f96;
  margin-bottom: 1rem;
}

.anthology-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* 3×2 grid of anthology tiles */
.anthology-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.anthology-box {
  background-color: #ffffff;
  width: 90.9%;
  padding-top: 90.9%;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* images that fill the tile */
.anthology-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Are.na-style “fill tile” look */
}

/* text-only placeholder tile */
.anthology-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: #202122;
}

/* =========================
   COMPENDIUM (RIGHT INNER COLUMN)
========================= */

/* Container title */
.block-title {
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

/* Outer compendium box */
.block-rect {
  position: relative;
  width: 100%;
  border: 1px solid #898f96;
  background-color: #202122;
  padding: 4px;
  display: flex;
  flex-direction: column;

  /* master small-cell height variable – tweak once, everything follows */
  --comp-small-h: 80px;
}

/* ----- UNIFORM TOP-LEVEL COMPENDIUM SECTIONS ----- */

/* every top-level row in the compendium */
.comp-section {
  padding: 6px 8px;
  border-bottom: 1px solid #898f96;
}

/* last section has no bottom border */
.comp-section:last-child {
  border-bottom: none;
}

/* grid/image section uses slightly tighter padding */
.comp-section--grid {
  padding: 4px;
}

/* ----- TOP IMAGE GRID (now also a comp-section) ----- */

.compendium-top {
  position: relative;
  display: flex;
  margin-bottom: 0; /* border from .comp-section handles separation */
}

/* Vertical divider, inset so it doesn’t touch outer border */
.compendium-top::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 40%;                /* 2/5 of width */
  width: 1px;
  background-color: #898f96;
}

/* Left 2/5, right 3/5 */
.comp-left {
  width: 40%;
  display: flex;
  flex-direction: column;
}

.comp-right {
  width: 60%;
  display: flex;
  flex-direction: column;
}

/* Base image cell */
.comp-img {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stack 3 equal-height rows on left, with lines between */
.comp-left .comp-img {
  height: var(--comp-small-h);
  border-bottom: 1px solid #898f96;
}

.comp-left .comp-img:last-child {
  border-bottom: none;
}

/* Right column: two larger images */
.comp-right .comp-img {
  height: calc(var(--comp-small-h) * 1.5);
  border-bottom: 1px solid #898f96;
}

.comp-right .comp-img:last-child {
  border-bottom: none;
}

/* Images shrink to fit, never crop */
.comp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Micro images are 1/5 the small-cell height */
.comp-micro {
  width: calc(var(--comp-small-h) / 5);
  height: calc(var(--comp-small-h) / 5);
  padding: 0;
}

/* ----- CIRCULAR AVATAR (using data-slot) ----- */

img[data-slot="compendium.profile.avatar"] {
  --avatar-size: 48px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ----- PROFILE SECTION ----- */

.comp-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-height: var(--comp-small-h); /* 1 × small */
}

.comp-profile-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-profile-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comp-profile-name {
  font-weight: bold;
  font-size: 0.9rem;
}

.comp-profile-handle {
  font-size: 0.8rem;
  color: #d0d0d0;
}

.comp-profile-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.comp-profile-link {
  font-size: 0.8rem;
}

/* ----- LINKS SECTION ----- */

.comp-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: calc(var(--comp-small-h) / 2); /* 0.5 × small */
}

.comp-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comp-link-text {
  font-size: 0.8rem;
}

/* ----- ORGANIZATIONS SECTION ----- */

.comp-orgs {
  min-height: calc(var(--comp-small-h) * 2); /* 2 × small */
}

.comp-orgs-title {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.comp-orgs-list {
  margin-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* =========================
   RESPONSIVE: TABLET & DOWN
   (stack main columns, drop side bars)
========================= */
@media (max-width: 900px) {
  body {
    display: block; /* don't force the left/right margin columns */
  }

  .margin-left,
  .margin-right {
    display: none;  /* hide the side strips on smaller screens */
  }

  .content-area {
    width: 100vw;   /* use full width on small devices */
    min-height: auto;
  }

  .content-inner {
    padding: 0.75rem 0.75rem 1.5rem;
  }

  /* Stack the three big columns (left, middle, right) vertically */
  .columns {
    flex-direction: column;
  }

  .col-left,
  .col-middle,
  .col-right {
    width: 100%;
  }

  /* Inner middle columns (Oeuvre/Anthology vs Compendium) also stack */
  .middle-columns {
    flex-direction: column;
  }

  .middle-main,
  .middle-compendium {
    flex: none;
    width: 100%;
  }

  /* Anthology grid: go from 3 → 2 columns */
  .anthology-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   RESPONSIVE: PHONE
   (narrow screens)
========================= */
@media (max-width: 600px) {
  /* Header: stack logo + title/search vertically */
  .header-main-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Meta bar spacing and text sizing */
  .meta-bar {
    gap: 0.4rem;
  }

  .meta-name {
    font-size: 0.85rem;
  }

  /* Anthology grid: single column on very small screens */
  .anthology-grid {
    grid-template-columns: 1fr;
  }

  /* Slightly tighter padding on sections */
  .section-block {
    padding: 0.6rem 0.7rem;
  }
}

/* =========================
   ANTHOLOGY OVERLAY WIDGET
========================= */

/* generic hidden utility */
.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* lock scroll when overlay open */
body.overlay-open {
  overflow: hidden;
}

.anthology-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: opacity 0.2s ease;
}

.anthology-shell {
  width: min(1100px, 92vw);
  height: min(620px, 80vh);
  background: #15161b;
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* toolbar / url bar */

.anthology-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid #23242a;
}

.anthology-url-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anthology-url-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1d1f26;
  border-radius: 4px;
  padding: 6px 10px;
}

.anthology-url-icon img {
  width: 14px;
  height: 14px;
  display: block;
}

.anthology-url-text {
  font-size: 0.78rem;
  color: #f1f1f1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-icon-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overlay-icon-btn img {
  height: 24px;
}

/* main layout inside overlay */

.anthology-main {
  flex: 1;
  display: grid;
  grid-template-columns: 2.7fr 1fr; /* approx ratio from mock */
  padding: 20px;
  gap: 18px;
}

/* left canvas */

.anthology-canvas-wrapper {
  background: #101118;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anthology-canvas {
  width: 80%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
}

/* right meta panel */

.anthology-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.anthology-meta-card {
  background: #1b1c23;
  border-radius: 6px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.anthology-meta-title {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0;
  color: #f5f5f5;
}

.anthology-meta-description {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #c5c5c5;
}

.anthology-meta-details {
  margin: 4px 0 0;
  padding: 0;
}

.anthology-meta-details > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 2px;
}

.anthology-meta-details dt {
  font-weight: 500;
  color: #a8a8a8;
}

.anthology-meta-details dd {
  margin: 0;
  color: #dcdcdc;
}

.anthology-meta-buttons {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.meta-btn-pill {
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meta-btn-pill img {
  height: 26px;
}

/* lower reserved block to match mock */

.anthology-meta-lower {
  flex: 1;
  background: #181920;
  border-radius: 6px;
}

/* close + nav arrows */

.anthology-close {
  position: absolute;
  top: calc(50% - 290px);
  right: calc(50% - 540px);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.anthology-close img {
  height: 20px;
}

.anthology-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.anthology-arrow img {
  height: 26px;
}

.anth-arrow-prev {
  left: calc(50% - 580px);
}

.anth-arrow-next {
  right: calc(50% - 580px);
}

/* responsive overlay */

@media (max-width: 900px) {
  .anthology-main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .anth-arrow-prev {
    left: 14px;
  }

  .anth-arrow-next {
    right: 14px;
  }
}