/* styles.css - simple responsive styles for puppy rehoming pages */
:root{
  --max-width:1100px;
  --accent:#2b6cb0;
  --muted:#555;
  --page-pad:18px;
  /*
    Use a monospace typeface throughout the site.  The family below
    will fall back to the default Courier New on most systems and
    gracefully degrade if unavailable.  Italic and bold faces will
    automatically map to the appropriate variant of the font.
  */
  font-family: "Courier New", Courier, monospace;
}
*{box-sizing:border-box}
body{margin:0;color:#111;line-height:1.3;}
.container{max-width:var(--max-width);margin:24px auto;padding:var(--page-pad);}
.header{display:flex;align-items:center;gap:12px}
.header h1{margin:0;font-size:1.5rem}
/*
  The thumb grid on the home page should fill as much of the
  viewport as practical.  We split the seven thumbnails into a
  top row of four and a bottom row of three.  Each row uses a
  different flex‑basis so that the images are evenly spaced.
*/
.grid-thumbs{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:16px;
  width:100%;
  /* allow the grid to take up most of the viewport height.  The
     60vh value is a rough balance that leaves room for the title
     and some breathing room. */
  min-height:60vh;
  margin: 18px auto;
  padding: 0 12px;
}

/* first row of 4 items */
.grid-thumbs > .thumb:nth-child(-n+4){
  flex: 1 1 calc((100% - 3 * 16px) / 4);
  height:40vh;
}
/* second row of 3 items */
.grid-thumbs > .thumb:nth-child(n+5){
  flex: 1 1 calc((100% - 2 * 16px) / 3);
  height:40vh;
}

.thumb{
  background:#f7f7f7;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  border:1px solid #e6e6e6;
  text-align:center;
  /* provide a positioning context so the caption can be absolutely
     positioned over the bottom of the image */
  position:relative;
}

/*
  The thumbnail image should scale to fit inside its card without
  cropping.  Using object-fit: contain ensures the entire photo is
  visible within the allotted space.  The image fills the card
  vertically; the caption will be drawn on top using absolute
  positioning.
*/
.thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-bottom:1px solid #eee;
}

/*
  Caption styling for the puppy names beneath each thumbnail.  The
  caption is positioned at the bottom of the card so that it is
  always visible and does not push the image out of view.  A
  semi‑transparent white background helps the text remain legible
  regardless of the underlying image.
*/
.thumb > div{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:6px 4px;
  background:rgba(255,255,255,0.8);
  font-weight:600;
  font-size:0.9rem;
}

.thumb .meta{padding:10px}
.puppy-name{font-weight:600}
.puppy-desc{color:var(--muted);font-size:0.95rem;margin-top:6px}

/*
  Old collage styles are no longer used.  Instead we introduce
  a polaroid‑style collage which scatters the images randomly
  and enlarges them on hover.  Each polaroid is rotated a bit
  using nth‑child selectors and gently pops into place on hover.
*/
.polaroid-collage{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:24px;
}

.polaroid-collage .polaroid{
  position:relative;
  width:180px;
  height:180px;
  padding:12px;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
  /* anchor scaling to the top so hover enlargements grow downward
     instead of being cut off by the description above */
  transform-origin: top center;
}

.polaroid-collage .polaroid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.polaroid-collage .polaroid:nth-child(1){transform:rotate(-6deg);} 
.polaroid-collage .polaroid:nth-child(2){transform:rotate(5deg);} 
.polaroid-collage .polaroid:nth-child(3){transform:rotate(-8deg);} 
.polaroid-collage .polaroid:nth-child(4){transform:rotate(4deg);} 
.polaroid-collage .polaroid:nth-child(5){transform:rotate(-5deg);}

.polaroid-collage .polaroid:hover{
  /* enlarge the polaroid and bring it to the front on hover */
  transform:scale(1.2) rotate(0deg);
  z-index:10;
  box-shadow:0 6px 12px rgba(0,0,0,0.3);
}

/* Banner image for puppy pages */
/*
  Banner images on the individual puppy pages should display the entire
  photograph without cropping.  We achieve this by using
  `object-fit: contain` and allowing the banner section to flex so
  that it grows or shrinks relative to the viewport.  The height
  will be controlled via the flex properties on the parent container
  (see the `.puppy-page` styles below).  The `border-radius` and
  margin remain for a polished look.
*/
.banner img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
  display:block;
  margin-bottom:0;
}

/*
  Layout adjustments for the individual puppy pages.  These pages
  should fit within a single viewport height without the need to
  scroll the entire window.  The body is turned into a flex
  container and the primary sections (banner, description and
  collage) are assigned flexible heights using the `flex` property.
  The numbers (e.g. 4 2 4) represent proportional units of the
  available height.  Overflow within the description or collage
  sections will scroll internally if necessary.
*/
body.puppy-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  height:100vh;
}

/* allocate space for the banner */
/* reduce the banner height slightly to leave more room for the
   description so that longer paragraphs can fit without page scroll */
/* On puppy pages the banner occupies a fixed portion of the viewport
   regardless of the underlying image dimensions.  Setting a fixed
   height (in viewport units) ensures the banner remains large and
   consistent across pages while the contained image scales down via
   `object-fit: contain`.  We do not flex this element so that its
   height does not shrink based on content. */
.puppy-page .banner{
  height:40vh;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* allocate space for the description; enable internal scrolling */
/* allocate more height to the description area so that it can
   accommodate longer text without forcing the page to scroll. */
/* The description shares the remaining vertical space with the
   polaroid collage.  Using flex:1 allows it to grow or shrink
   depending on the viewport height.  Internal overflow is enabled
   so that text can scroll within the section if necessary without
   forcing the entire page to scroll. */
.puppy-page .description{
  flex:1;
  overflow-y:auto;
  margin-top:12px;
  margin-bottom:12px;
}

/* allocate space for the polaroid collage; enable internal scrolling
   if the number of images exceeds the available space */
/* slightly reduce the height of the collage area to balance the
   overall page layout */
/* The collage also occupies half of the remaining space beneath
   the banner.  It scrolls internally if necessary. */
.puppy-page .polaroid-collage{
  flex:1;
  overflow-y:auto;
  justify-content:center;
  margin-top:0;
  margin-bottom:16px;
}

/* reduce the polaroid sizes slightly to fit more comfortably
   within the viewport */
.puppy-page .polaroid-collage .polaroid{
  width:160px;
  height:160px;
}

/* Header row with back link on the left and action buttons on the right */
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  margin-bottom:12px;
}

/* Style for the back link so it resembles a button and fits with the
   monospace aesthetic.  We avoid underlines and use a bold weight for
   visibility. */
.back-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
}

/* Remove the margin-left:auto from header-actions to allow
   positioning within .header-row */
.header-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:0;
}

/* small responsive tweaks */
/*
  Responsive layout adjustments for the home page grid.  We
  progressively change the number of columns depending on the
  viewport width while preserving the height of each card.  The
  desktop layout (≥981px) remains unchanged: four items in the top
  row and three in the bottom row.  On medium screens the cards
  arrange themselves into two columns, and on narrow screens they
  stack into a single column.
*/
@media (max-width:980px){
  .grid-thumbs > .thumb{
    /* two columns: subtract one gap of 16px because there will be
       exactly two items per row */
    flex: 1 1 calc((100% - 16px) / 2) !important;
    height:40vh;
  }
  /* allow the grid to span the full width */
  .grid-thumbs{max-width:100%;}
}
@media (max-width:600px){
  .grid-thumbs > .thumb{
    /* single column */
    flex: 1 1 100% !important;
    height:40vh;
  }
  .grid-thumbs{max-width:100%;}
  /* ensure images stretch vertically to fill their cards */
  .thumb img{height:100%;}
}

/* utility */
.back-link{display:inline-block;margin-top:12px;color:var(--accent);text-decoration:none;font-weight:600}

/*
  Center the main title on the index page and tighten its spacing.
  This rule targets the direct h1 child of a container.  Since
  individual puppy pages use h2 headings, only the home page is
  affected.
*/
.container > h1{
  text-align:center;
  margin-top:12px;
  margin-bottom:12px;
}

/* override the default container margins on the puppy pages so that
   the overall page can fit exactly into the viewport height.  We
   remove the top and bottom margin and allow the container to flex
   while maintaining horizontal centering via auto margins. */
.puppy-page .container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--page-pad);
  display:flex;
  flex-direction:column;
  flex:1;
}



.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{padding:8px 12px;border-radius:8px;border:1px solid #d1d5db;background:white;cursor:pointer;font-weight:600}
.btn:active{transform:translateY(1px)}
.like-btn{display:inline-flex;gap:8px;align-items:center}
.interested-btn{background:var(--accent);color:white;border:none}
.modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);z-index:40}
.modal.open{display:flex}
.modal-card{background:white;padding:16px;border-radius:10px;max-width:520px;width:92%}
.form-row{display:flex;flex-direction:column;margin-bottom:10px}
.form-row label{font-size:0.9rem;margin-bottom:6px}
.form-row input, .form-row textarea{padding:8px;border:1px solid #e6e6e6;border-radius:6px}
.small-muted{font-size:0.85rem;color:var(--muted)}

/*
  Enhanced Breed/Age section styling
  ---------------------------------
  The landing page summarises the litter's breed and age.  To make
  this information stand out against the mint green background, wrap
  it in a soft white panel with rounded corners, a faint border and a
  gentle shadow.  On wider screens the breed and age are shown side
  by side; on small screens the flex layout stacks them vertically.
*/
.breed-age-section{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:16px 0;
  padding:12px 20px;
  background:rgba(245, 186, 255, 0.8);
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  font-size:1.1rem;
}
.breed-age-section .breed-info,
.breed-age-section .age-info{
  flex:1 1 auto;
  text-align:center;
  color:var(--muted);
}
.breed-age-section strong{
  color:var(--accent);
  margin-right:4px;
  font-weight:600;
}
.breed-age-section span{
  color:#333;
  font-weight:500;
}

/*
  Supplemental call‑to‑action styling
  ----------------------------------
  The index page includes a line of text prompting visitors to click
  on the puppy photos below.  The element has a dedicated class
  `.click-message` and lives within the breed/age summary panel.
  Giving it a full width and centering the text ensures it sits on
  its own line across the panel, while the accent colour ties it
  visually into the rest of the site.
*/
.breed-age-section .click-message{
  /* Force the call‑to‑action onto its own line by giving it a 100% flex basis
     and explicit width.  The extra width property helps Safari and other
     browsers wrap it to the next line even when horizontal space remains. */
  flex-basis:100%;
  width:100%;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  color:var(--accent);
}
@media (max-width:600px){
  .breed-age-section{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .breed-age-section .breed-info,
  .breed-age-section .age-info{
    text-align:left;
  }
}