/* ===== Itinerary Folder Tabs (clean build) ===== */

/* Title link (unchanged) */
.itinerary-link { margin-top: 2rem; text-align: center; }


/* Design tokens */
:root{
  --manila: #d2ab6f;
  --manila-2: #c79b57;
  --ink: #0808cf;
  --tab-border: #cfcfcf;
  --radius: 14px;
  --gap: 8px;
  --grain: .08; /* 0..0.12 */
}

/* Layout shell */
.folder{
  margin:0.5rem auto 2rem auto; width:min(1100px,92%);
  position:relative; isolation:isolate; /* makes z-index local & predictable */
}

/* Tabs row */
.folder-tabs{
  display:flex; align-items:end; gap:var(--gap);
  position:relative; z-index:3; margin-left:2px;
}

/* Individual tab */
.tab{
  position:relative; display:inline-block; min-width:150px;
  padding:10px 16px 12px; text-align:center; font-weight:600;
  color:#2a2a2a; text-decoration:none; cursor:pointer;

  background:linear-gradient(#fff,#f3f3f3);
  border:1px solid var(--tab-border); border-bottom:none;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset, 0 8px 10px rgba(0,0,0,.08);
}


/* Active tab */
.tab.active{
  background:linear-gradient(#fff,#f6f6f6);
  color:#00008B; z-index:4; /* sits over seam */
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 12px 16px rgba(0,0,0,.12);
}

/* Hide panels (Stimulus toggles .hidden) */
.panel.hidden{ display:none; }



/* Folder pocket */
.folder-content{
  height:1200px;
  position:relative; z-index:1; color:var(--ink);
  padding: 4rem 10rem 2rem; /* shorter top now that seam is thinner */
  background:
    radial-gradient(ellipse 60px 30px at 15% 25%, rgba(150, 111, 51, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40px 80px at 70% 15%, rgba(160, 120, 80, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80px 25px at 30% 70%, rgba(150, 111, 51, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 35px 90px at 85% 60%, rgba(160, 120, 80, 0.09) 0%, transparent 55%),
    linear-gradient(
      94deg,
      rgba(150, 111, 51, 0.08) 0%,
      transparent 1.5%,
      transparent 3%,
      rgba(160, 120, 80, 0.06) 4%,
      transparent 8%,
      transparent 12%,
      rgba(150, 111, 51, 0.07) 15%,
      transparent 20%,
      transparent 25%,
      rgba(160, 120, 80, 0.05) 28%,
      transparent 35%
    ),
    linear-gradient(
      86deg,
      transparent 0%,
      rgba(150, 111, 51, 0.04) 15%,
      transparent 18%,
      transparent 22%,
      rgba(160, 120, 80, 0.06) 25%,
      transparent 30%,
      transparent 45%,
      rgba(150, 111, 51, 0.05) 50%,
      transparent 60%
    ),
    linear-gradient(180deg, #e6d3a3 0%, #d4c093 100%);
  border:1px solid rgba(0,0,0,.1); border-top:0;
  border-top-right-radius:var(--radius);
  border-top-left-radius: var(--radius);  
  border-bottom-right-radius:var(--radius);
  border-bottom-left-radius:var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 14px rgba(0,0,0,.22),
    0 1px 3px rgba(0,0,0,.30);
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.25);
}

/* Paper grain */
.folder-content::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(1px 1px at 85% 40%, rgba(0,0,0,.6), transparent 60%);
  opacity:var(--grain);
}

/* Links inside pocket */
.folder-content a{ color:var(--ink); }

/* Axis & sizing vars */
.timeline{
  --bullet-size: 1rem;           /* matches .timeline-item::before width/height */
  --axis-x: calc(var(--bullet-size) / 2); /* center of the bullet from the left edge */
  --axis-width: 2px;

  position: relative;
  padding-left: 2rem;            /* unchanged: room for bullets/content */
  padding-top: calc(var(--bullet-size) / 2);    /* clip line to first bullet */
  padding-bottom: calc(var(--bullet-size) / 2); /* clip line to last bullet */
}

.timeline::before{
  content: '';
  position: absolute;
  top: 0;                        /* starts after padding-top (i.e., at first bullet) */
  bottom: 0;                     /* ends before padding-bottom (i.e., at last bullet) */
  left: var(--axis-x);           /* place the line at the bullet center */
  transform: translateX(-50%);   /* center the 2px line on that axis */
  width: var(--axis-width);
    /* gradient fade at top and bottom */
  background: linear-gradient(
    to bottom,
    rgba(35, 35, 87, 0) 0%,        /* transparent at very top */
    rgba(35, 35, 87, 1) 10%,       /* fully solid after 10% */
    rgba(35, 35, 87, 1) 90%,       /* stay solid until near bottom */
    rgba(35, 35, 87, 0) 100%       /* fade out again */
  );
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--ink);
  border-radius: 50%;
  border: 2px solid var(--manila);
}

.timeline-header {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.timeline-body {
  padding-left: 1rem;
}

details {
  margin-bottom: 1rem;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

summary .time {
  font-weight: normal;
  margin-right: 1rem;
}

.details {
  padding: 0.5rem 1rem;
  border-left: 2px solid var(--ink);
  margin-left: 0.5rem;
}

/* spacing that you had on .details; adjust as you like */
.itn-details { margin-bottom: 1rem; }

/* indent the content under the summary a touch */
.itn-details .collapse { padding-left: 1rem; }

/* the animation: 0fr -> 1fr gives natural height both directions */
.collapse{
  display: grid;
  grid-template-rows: 0fr;         /* collapsed */
  overflow: hidden;                 /* hides while 0fr */
  transition: grid-template-rows 260ms ease, opacity 220ms ease;
  opacity: 0;                       /* faded when closed */
}

.itn-details[open] .collapse{
  grid-template-rows: 1fr;          /* expands to content height */
  opacity: 1;
}

/* allow children to shrink inside the 0fr container */
.collapse-inner{ min-height: 0; }

/* Image boxes positioned on the right side */
.image-boxes {
  position: absolute;
  right: -60px;
  top: 60px;
  width: 120px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.image-box {
  position: absolute;
  width: 200px;
  height: 215px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  padding: 15px 15px 8px 15px;
  transition: transform 0.3s ease;
  font-family: 'Courier New', monospace;
}

.image-box-1 {
  top: 0;
  right: 0;
  transform: rotate(10deg);
  z-index: 5;
}

.image-box-2 {
  top: 220px;
  right: 15px;
  transform: rotate(-10deg);
  z-index: 4;
}

.image-box-3 {
  top: 440px;
  right: 5px;
  transform: rotate(10deg);
  z-index: 3;
}

.image-box-4 {
  top: 660px;
  right: 20px;
  transform: rotate(-10deg);
  z-index: 2;
}

.image-box-5 {
  top: 880px;
  right: 20px;
  transform: rotate(10deg);
  z-index: 1;
}

.polaroid-photo {
  width: 100%;
  height: 180px;
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f0f0f0;
  background-image: 
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: none;
}

.photo-placeholder:empty {
  display: block;
  position: relative;
}

.photo-placeholder:empty::before {
  content: "📷";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #999;
}

.polaroid-caption {
  display: none;
}