/* ========== PODA Website Styles ========== */
:root{
  --indigo:#292159;         /* poda_indigo */
  --cream:#FFF8EF;          /* poda_cream */
  --ink:#0f172a;
  --muted:#6b7280;
  --stroke:#e6e6ea;
}

*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: linear-gradient(135deg,#FFF8EF 0%,#EAE4F6 50%,#DCE9F9 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1140px;margin:0 auto;padding:20px}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:40px;display:block}
nav a{color:var(--indigo);text-decoration:none;font-weight:600;margin-left:18px}
nav a:hover{text-decoration:underline}

/* Hero */
.hero{padding:72px 12px 24px;text-align:center}
.hero h1{margin:0 0 12px;color:var(--indigo);font-size:2.2rem}
.hero p{margin:0 0 22px;color:var(--muted);font-size:1.08rem}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;text-decoration:none;margin:4px}
.btn.primary{background:var(--indigo);color:#fff}
.btn.primary:hover{box-shadow:0 6px 16px rgba(41,33,89,.25)}
.btn.ghost{background:#fff;color:var(--indigo);border:1px solid var(--indigo)}
.btn.ghost:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* Features grid */
.features{padding:12px 0 40px}
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* Rotated wrappers for the scattered look */
.polaroid-wrap{display:inline-block;transform-origin:center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.r1{transform:rotate(-2.5deg)} .r2{transform:rotate(1.5deg)}
.r3{transform:rotate(-1deg)}   .r4{transform:rotate(2deg)}
.r5{transform:rotate(-3deg)}   .r6{transform:rotate(1deg)}
.r7{transform:rotate(-1.5deg)}

/* ---------- PURE CSS Polaroid (no image) ----------

Structure:
<figure class="polaroid">
  <div class="window"><img ...></div>
  <figcaption class="caption">...</figcaption>
</figure>
*/
.polaroid{
  --card-radius: 10px;
  --window-radius: 8px;
  --border: 1px;
  --pad: 14px;          /* side/top padding */
  --bottom-pad: 78px;   /* extra “white space” at the bottom for caption */

  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3/4;
  margin: 0 auto;

  /* The white card: */
  background: #fff;
  border: var(--border) solid var(--stroke);
  border-radius: var(--card-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);

  /* Inner layout: top window + bottom caption “lip” */
  padding: var(--pad) var(--pad) var(--bottom-pad);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clip any overflow from rotations */
}

/* Photo window – fills available top area naturally */
.polaroid .window{
  flex: 1 1 auto;
  border-radius: var(--window-radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); /* subtle matte */
}

/* Drop any image and it fills perfectly */
.polaroid .window img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* key bit: auto fill without guessing offsets */
  object-position: center;
}

/* Nicer caption styles */
.polaroid .caption {
  position: absolute;
  left: calc(var(--pad) + 4px);
  right: calc(var(--pad) + 4px);

  /* Instead of bottom anchoring, we center it */
  bottom: 0;
  height: var(--bottom-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  line-height: 1.25;
}

.polaroid .caption h3{
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--indigo);
  letter-spacing: .2px;
}

.polaroid .caption p{
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}

/* Optional: clamp long captions to 2 lines */
.polaroid .caption p{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Footer */
footer{padding:26px 12px 18px;text-align:center;color:var(--muted);font-size:.9rem}
footer a{color:var(--indigo);text-decoration:none}
footer a:hover{text-decoration:underline}